Bootstrap 5 official tutorial

Bootstrap 5 Official Tutorial

Best Tutorial for learning bootstrap 5.Fast Learning Tutorial and how to Install Bootstrap 5 in your system.

News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons.

How to convert bootstrap 4 to bootstrap 5 ?

Bootstrap 5’s very first alpha has arrived! We’ve been working hard for several months to refine the work we started in v4, and while we’re feeling great about our progress, there’s still even more to do.

We’ve been focused on making the migration from v4 to v5 more approachable, but we’ve also not been afraid to step away from what’s outdated or no longer appropriate. As such, we’re very happy to say that with v5, Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer. We’re sharpening our focus on building tools that are more future-friendly, and while we’re not fully there yet, the promise of CSS variables, faster JavaScript, fewer dependencies, and better APIs certainly feel right to us.

Before you jump to updating, please remember v5 is now in alpha—breaking changes will continue to occur until our first beta. We haven’t finished adding or removing everything, so check for open issues and pull requests as you have questions or feedback.

Creative Look and Feel

bootstrap built on the improvements to our docs homepage in v4.5.0 with an updated look and feel for the rest of our docs. Bootstrap docs pages are no longer full-width to improve readability and make our site feel less app-like and more content-like. In addition, we’ve upgraded our sidebar to use expandable sections (powered by our own Collapse plugin) for faster navigation.

jQuery and JavaScript

The fundamental concepts of Bootstrap, grid layout, responsiveness, contents of HTML and CSS-based components, will probably stay untouched in the fifth major release of Bootstrap. Nevertheless, some of the crucial ideas, like usage of the jQuery library, have been challenged by many users in the web development community and are likely to vanish in the next version of Bootstrap.

Whats new in Bootstrap 5 ?

Currently the major changes expected in v. 5 include:

• Removing jQuery
• Deprecated support for IE10
• Dropping QUnit
• Building testing infrastructure in Jasmine
• Documentation rewritten in Hugo
• General massive changes in JavaScript
• General minor changes in CSS
• Responsive containers

Dropped jQuery

jQuery was (and still is!) a revolutionary technology that helped millions of developers to write cross-browser code easily, but after were invented solutions such as Angular, React or Vue.js, jQuery found out to wasn't enough to compete with them. Bootstrap 5 is 100% jQuery-free and every component was rewritten to vanilla JS. This will help to integrate it with more JavaScript frameworks. However, Bootstrap 5 still can be used with jQuery.

Responsive Containers

Currently, Bootstrap was providing two options of the container - a regular container or container-fluid. In Bootstrap 5, we've got some new options for the container such as `.container-sm`, `.container-md` and more. Responsive containers will be 100% width until they get specified breakpoints. That was something that - in my opinion - Bootstrap needed.

Using as a module

Bootstrap 5 introduced its ESM version which allows using it as a module (if your browser supports it). Example:

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'


  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Refreshed website

Till now, Bootstrap's website is hosted on GitHub Pages with a little help from Jekyll. Bootstrap 5 will be hosted on Netlify which provides more advanced options than GitHub Pages. Also, Jekyll was dropped and now Bootstrap will be using the Hugo framework. The website was slightly refreshed and it looks... just great!

The list of changes would be much much longer and it's not easy to describe them all. Currently, there's no estimated time of delivery of Bootstrap 5, but you can track the progress on its official repository on GitHub

Removing of QUnit

Massive Changes in Javascript

Minor Changes in CSS

Drop support for Node.js 8

Building Testing Infrastructure in Jasmine

Revamp grid to blend flexbox and grid layout

Responsive sticky top

Update DevDependencies

Documentation rewritten in Hugo

Bootstrap without jQuery

Is pure JavaScript achievable in Bootstrap 5

The team officially announced their plans to remove jQuery dependency in Bootstrap 5. The announcement received mixed opinions, some developers state that removing jQuery is a bad move due to its usefulness, while others believe that golden age of the library is over and it's time to move on.

Both sides have their reasons as jQuery is indeed a fairly aged project and remains almost unmaintained, but offers very elegant solutions in some cases and is still widely used and considered a reliable tool.

Bootstrap 5 columns

Grid usage and layout in Bootstrap 5

The famous 12-column system which is the fundament of Bootstrap concept will almost certainly stay with us in Bootstrap 5.

Although in recent months the development is focused mostly on improving performance and reducing the loading time, the main idea of the project is still responsiveness. To this day, there is no better way of solving the problem of different screen sizes than Bootstrap rows and columns.