Last Updated:

Bootstrap  - What is Bootstrap 5? | Latest version

In this article, we will get acquainted with the Bootstrap framework. Consider what it is and why it is needed. Let's analyze its main advantages and disadvantages.

What is Bootstrap?

Bootstrap is an open source and free HTML, CSS and JS framework that is used by web developers to quickly layout responsive website designs and web applications.

The Bootstrap framework is used around the world not only by independent developers, but sometimes by entire companies. A lot of different sites have been created on Bootstrap, you can see them on the Bootstrap Expo page.

Bootstrap latest

The main field of its application is the front-end development of sites and interfaces of admin panels. Among similar systems (Foundation, UIkit, Semantic UI, InK, etc.), the Bootstrap framework is the most popular.

Why is Bootstrap so popular? This is due to the fact that it allows you to make up sites several times faster than on "pure" CSS and JavaScript. And in our world, time is a very valuable resource. Another aspect of it is accessibility. It boils down to the fact that it provides an opportunity even for a novice web developer (without deep knowledge and sufficient practice) to create sufficiently high-quality layouts.

The Bootstrap framework is a set of CSS and JavaScript files. To use it these files you just need to connect to the page. After that, you will have access to the tools of this framework: the column system (Bootstrap grid), classes and components.

How does it work? For example, to create a button on a page using Bootstrap, you only need to add a few classes to the reference or element.button

To create a button in Bootstrap 5:

<!-- To make the link look like a button, add 2 classes to it: btn and btn-success -->
<a href="#" class="btn btn-success">Button style link</a>
 

How's that? How long did it take? Yes, just a few seconds.

And if, for example, you need to create tabs. To do this, you just need to copy the finished HTML fragment, and edit it so that the code for a certain number of tabs remains in it:

<!-- Bootstrap 5 -->
<nav>
  <div class="nav nav-tabs" id="tab" role="tablist">
    <!-- the data-bs-target attribute must point to the element to be shown -->
    <button class="nav-link active" id="tab-section-1" data-bs-toggle="tab" data-bs-target="#section-1" type="button" role="tab" aria-controls="nav-section-1" aria-selected="true">Section 1</button>
    <button class="nav-link" id="tab-section-2" data-bs-toggle="tab" data-bs-target="#section-2" type="button" role="tab" aria -controls="nav-section-2" aria-selected="false">Section 2</button>
    <button class="nav-link" id="tab-section-3" data-bs-toggle="tab" data-bs-target="#section-3" type="button" role="tab" aria -controls="nav-section-3" aria-selected="false">Section 3</button>
  </div>
</nav>
<div class="tab-content p-3" id="nav-tabContent">
  <!-- the id attribute defines the tab -->
  <div class="tab-pane fade show active" id="section-1" role="tabpanel" aria-labelledby="nav-section-1-tab">
    ...
  </div>
  <div class="tab-pane" id="section-2" role="tabpanel" aria-labelledby="nav-section-2-tab">
    ...
  </div>
  <div class="tab-pane fade" id="section-3" role="tabpanel" aria-labelledby="nav-section-3-tab">
    ...
  </div>
</div>
 

That's it, the tabs are ready. This, too, took a matter of seconds. True, amazing speed. That's the power of Bootstrap.

But, Bootstrap is not just a set of ready-made tools (HTML fragments, classes, components and plugins), but a well-designed front-end framework that can be easily customized for yourself by editing Sass variables and using mixins.

What Bootstrap consists of

Bootstrap consists of:

  • layout tools (wrapping containers, a powerful grid system, flexible media objects, adaptive utility classes);
  • classes for styling basic content: text, images, code, tables, and figure;
  • ready-made components: buttons, shapes, horizontal and vertical navigation panels, sliders, drop-down lists, accordions, modal windows, tooltips, etc.;
  • utility classes for solving the traditional tasks most commonly encountered by web developers: text alignment, showing and hiding elements, setting colors, backgrounds, and indentations, etc.marginpadding

Where to Start Learning Bootstrap

The first thing we need is to download the framework and connect it to the page. How to do this is described in detail in the article "Installing the Bootstrap Platform".

After we do this, the next question usually arises: "What next? How do I use Bootstrap?" In fact, there is nothing complicated here, creating pages using Bootstrap is quite simple.

First, you need to study the grid and practice on it to make up page layouts and create block markup. You can learn it here (for those who use Bootstrap 3) or here (for Bootstrap 4).

For your information, the grid in Bootstrap 3.x is built on , and in "4.x" and "5.x" on flexbox.float

After you understand the grid, you need to study the components of Bootstrap (how they are made up and configured) and learn how to insert them into the right places on the page.

These are the minimum tasks that you need to set for yourself in order to learn how to make up sites and web applications on Bootstrap.

Well, if your task is not just to use Bootstrap, but to change something in it, to redo, then without good knowledge of CSS here of course can not do. Some things, of course, can be tweaked through changes to SCSS variables and the application of mixins, while others cannot. And this applies to any frameworks.

Advantages and disadvantages of the Bootstrap framework

Advantages of Bootstrap when using it for frontend development of sites and admin panel interfaces:

  • high speed of creating high-quality adaptive layout even by novice web developers (this is achieved through the use of ready-made classes and components created by professionals);
  • cross-browser and cross-platform (correct display and operation of the site in all browsers and operating systems supported by this framework);
  • the presence of a large number of ready-made well-thought-out components, tested by a huge community of web developers on various devices;
  • the ability to customize for your project, this is achieved by changing SCSS variables and using mixins (you can change the number of columns, colors, radius of rounding, indentation between columns, etc.);
  • low entry threshold; to work with the framework, it is not necessary to have "deep" knowledge of HTML, CSS, JavaScript and jQuery (it is enough to know only the basics of these technologies);
  • uniformity of design and its consistency between different components (in Bootstrap all components are made in the same style);
  • the presence of a huge number of communities and educational materials; if desired, this will help not only to understand the framework well, but also to find answers to almost any questions you have.

The Bootstrap framework is an open source project available on Github. It is licensed by MIT. This means that it can be used for free in both open and commercial projects.

Bootstrap, of course, is a good tool, but not everything is made up on it. It, for example, does not make sense to use it for:

  • creation of front-end projects with a unique design;
  • development of projects in which the customer is ready to pay for the project in "pure" CSS and JavaScript (in most cases, such development is carried out in a team in which each of its participants performs a certain set of functions);
  • Layout of personal projects, if you have enough time and your level of knowledge of HTML, CSS and JavaScript is sufficient to do it.

Bootstrap, like most similar frameworks, has drawbacks. These include:

  • a larger size of the final css and js-files of the project than they would have turned out if we had created all this ourselves (this is due to the fact that the styles of the framework and its js-code contain universal code (for all occasions), and in fact for a particular project only a part of all this may be required);
  • the difficulty of using Bootstrap to layout sites with a unique design, because development in this case will be accompanied by a significant rewrite of its code and simple configuration of Bootstrap variables here can not be dispensed with.

The first drawback can be slightly "smoothed out" if we build the project from source and include only those components that we need in it. In this case, the code of this framework will be much smaller. You can see how to do this in Bootstrap 4 here, and in Bootstrap 3 here.

Which version of Bootstrap to choose

For most web projects, it is better to use the latest version of Bootstrap in the selected branch.

Currently:

  • in v5 - it's 5.1.3 ;
  • in v4 - it's 4.6.1;
  • in v3 it is 3.4.1.

Bootstrap 5 is recommended for projects that will only be used in modern browsers (support for IE and other browsers is not needed). In other cases, Bootstrap 4.

What's new in Bootstrap 5:

  • there is no dependence on the jQuery library, all plugins are rewritten in pure JavaScript;
  • The Popper library has been updated to v2.x from v1.x.
  • Internet Explorer 10 and 11, Microsoft Edge <16, Firefox <60, Safari <10, iOS Safari <10, Chrome <60 and Android <6 are not supported.
  • added a new breakpoint to the grid (for 1400px and above);xxl
  • New classes, and to specify horizontal and vertical indentation between cells..g-*.gx-*.gy-*
  • a new offcanvas component has been added;
  • the Media component has been removed, its implementation is proposed using the Bootstrap utility classes;
  • improved the section on forms in the documentation, and added the ability to create in the floating .inputlabel

The third version mainly makes sense to use if you need support for "old" browsers (IE8 and IE9).

The main differences between Bootstrap 4 and Bootstrap 3 are:

  • Does not support IE8, IE9 and iOS6 (v4 is now only IE10+ and iOS7+);
  • the grid and other components are built on flex, not float;
  • the source code of the styles is written in Sass, not Less;
  • sizes are specified in rem and em, not in px;
  • Font size increased from 14px to 16px;
  • increased the number of breakpoints in the net (in v4 - 5, in v3 - 4);
  • Removed panels, thumbnails, and Wells components, and add Cards instead.
  • removed Glyphicons icon font and jQuery plugin Affix;
  • almost all components have been updated;
  • Tooltips and Content Blocks (Popovers) are built on the Popper JS library.

Bootstrap 3 components in IE8 and some other versions are displayed without gradients, shadows, or rounded corners. This is because they do not support the CSS3 properties used for this purpose.