2021 All What You Need To Know About Bootstrap 5

Published September 01, 2021

Bootstrap is possibly the most used framework to design websites due to its versatility of use. Even, many website users have already replaced the CSS and JS of Bootstrap 5 obtaining a web with a fantastic performance without the need to do any complete migration. Be careful, this does not mean that the same thing happens to you. Still, I want to invite you to review the components and features of this new version.


All What You Need To Know About Bootstrap 5


What Is Bootstrap?

As you know, the world of the internet has been changing progressively. User needs are increasing and more and more devices are connecting to the network. Consequently, websites around the world have had to adapt and evolve, and this is where we have Bootstrap as the protagonist.


According to the official website, Bootstrap allows you to shape your website and adapt it to the current needs of your users. Bootstrap is an open source toolkit for responsive web development with HTML, CSS and JavaScript. With it you can shape your website through the use of its CSS and JavaScript libraries. It includes different components: modal windows, menus, boxes, buttons, forms, etc. I. e., the elements you need to layout your page.


Why Use Bootstrap 5?

Besides being open source, it means free of use (yes, you can download it directly from its official website), it is very easy to use, it makes your website work faster, it allows you to design websites that can adapt to any device having the mobile device as principal; it allows you to customize your website helping your visitors navigate through it in a more pleasant way.


Bootstrap 5 classes

  • gx- * classes control the horizontal width of the column.

  • gy- * classes control the vertical height of the row.

  • g- * controls the width and height of the column.

  • Rows-cols-auto.


Top 3 features of Bootstrap5 - Removed Jquery dependency


Bootstrap 5 Features & Components

Let's see what's new in Bootstrap 5:

  • Columns: It has 6 levels (xs, sm, md, lg, xl, xxl).

  • Colors: Additional colors have been added with an improved color palette.

  • Jquery: It has been removed and changed to Vanilla JS with some plugins that work pretty good.

  • Internet Explorer: The new version does not support IE 10 and 11.

  • Forms: Whether it is any operating system or browser, the appearance of the form elements will not change.

  • Utilities API: This new version permits us to modify and also create our own utility.

  • Glutter: We use .g * with font size in rem.

  • Vertical classes: Columns cannot be placed relative.

  • Icons: This new version has its own SVG icons.

  • Jumbotron: This new version is not compatible with it.

  • Card Deck: It has been removed from this new version.

  • Navbar: The inline-block property is removed and we will get the black dropdown menu as the default for the dropdown-menu-dark class.

  • Static site generator: This new version uses the Hugo generator.


Updated Forms

The appearance of the forms has been modified by adding the selection using the "switches". It provides a more modern look and at the same time encourages user interaction.


Color Palettes

In version 5, we find more options with a wider color palette than the previous version. We find interesting contrast options and it is possible to customize your own website without leaving the color base. Also, we can continue to use the famous colors Primary, Secondary, Warning, Danger, etc.


CSS Color Variables

This new version includes 21 color variables in its CSS code. The color variables are inside the Bootstrap 5 CSS file; just load the colors you will need.


To use the CSS selector with the variable -bs-indigo, use var (-bs-indigo).


By modifying Bootstrap's built-in color variables you will be able to change your website colors and even makes it match with your company’s logo colors and make it look unique.


Left-Right Becomes Start-End

Therefore .mr- * becomes .me- *. Here are some utilities that have been renamed:

  • Renamed .left- * and .right- * becomes .start- * and .end- *.

  • Renamed .float-left and .float-right becomes .float-start and .float-end.

  • Renamed .border-left and .border-right becomes .border-start and .border-end.

  • Renamed .rounded-left and .rounded-right becomes .rounded-start and .rounded-end.

  • Renamed .ml- * and .mr- * becomes .ms- * and .me- *.

  • Renamed .pl- * and .pr- * becomes .ps- * and .pe- *.

  • Renamed .text-left and .text-right becomes .text-start and .text-end.



Gutter is the padding between the columns. By default there is a space between columns that can be reduced or increased as indicated by the design.


In Bootstrap 5 glutters can be modified using the .g * class to modify this space between columns.


You can apply the class just to modify the width .gx- * or also to do the same to control the vertical space .gy- *.


Grid XXL

In this version a new utility is introduced that is applied to wider screens. The .xxl class creates a new zoom point starting at 1400 pixels.


Extra small (xs), 0-576 px.

Small (sm),> 576 px.

Medium (md),> 768 px.

Large (lg),> 992 px.

Extra Large (xl),> 1200 px.

Extra Extra Large (xxl),> 1400 px.


SVG Icon Library

If we recall, in version 3 Bootstrap offered reusable components called Ghyphicons which were removed in version 4.


In this new version and for the first time, it offers its own Bootstrap icon library, custom designed for components used in navigation controls. The main advantage is that they are in SVG format, that is, they are vector and can be scaled to any size while styles can be implemented just like any other text.


Many users, after implementing this icon library, have realized that it can become very scarce and may need to add a second library when using this new version in their projects.


Not only are web pages created with Bootstrap, but also the best online sales platforms from around the world integrate these resources that we like so much to design



Bootstrap5 Examples;



Article Contributed By :