Using Bootstrap to develop web applications makes the coding process easier and faster. Unfortunately, previous versions of Bootstrap still make the website load slow. Well, Bootstrap 5 comes with better performance!

Is that true? Then, how to use Bootstrap 5 properly?

In this Bootstrap 5 tutorial article we will explain it in full. Starting from what Bootstrap 5 is, what's new in version 5, various advantages, to how to use Bootstrap 5!

What is Bootstrap 5?

Bootstrap 5 is the latest version of Bootstrap which was officially released on May 5, 2021. In this version, several components have been updated to make it easier for developers during the website development process. As one of the most popular CSS frameworks in the world, Bootstrap is proven to be able to speed up the coding process, offers easy integration on developed websites, and runs well on various modern web browsers.

Unfortunately, using Bootstrap 4 for websites is considered too heavy and can slow down website performance. Well, Bootstrap 5 is here to solve this problem. One of the major changes in this latest version is the removal of jQuery and the use of vanilla JS. This will make the website lighter and of course speed up loading the website.

What's New in Bootstrap 5?

1. New Documentation Logo and Appearance

You can immediately feel the changes in Bootstrap 5 when you access the official Bootstrap website, namely the new logo and documentation display. The new logo design in Bootstrap is inspired by the curly braces ({}) which are commonly used for writing CSS code. Besides being fresh, Bootstrap wants to show they are one of the best CSS frameworks.

2. jQuery is Deprecated

Bootstrap 4 uses jQuery to make designs interactive. Unfortunately, the use of jQuery is less effective because you must call the external jQuery library first to run an interaction. Instead, Vanilla JS was chosen to help developers create interactive designs because it is lighter.

3. Discontinuation of Support for Old Browsers

In the latest version, Bootstrap discontinued support for the following browser versions:

• Microsoft Edge Legacy
• Internet Explorer versions 10 and 11
• Firefox version 60 and below
• Safari version 10 and below
• iOS Safari version 10 and below
• Chrome version 60 and below
• Android version 6 and below

The termination of support for the above browser is done to maximize the custom properties function in this latest version of Bootstrap. The reason, this function can only be run on modern web browsers with the latest technology.

4. Support for Right-To-Left (RTL) Display

Bootstrap 5 now supports text-alignment starting from the right or Right to Left (RTL). This is done as support for websites whose writing is read from the right, such as websites in Arabic. If in Bootstrap 4 the text-alignment can be set using the text-left, text-center and text-right classes, in the latest version, Bootstrap changes the left and right classes to start and end as follows:

• text-start to replace text-left
• text-center
• text-end to replace text-right

Not only text-alignment, everything that involves writing left and right positions in Bootstrap 5 changes to start and end.

5. Bootstrap Icons

Prior to Bootstrap Icons, you needed a third-party icon provider service such as Font Awesome, Feather and Octicons to use the icons on the website you were developing. Now, Bootstrap has its own open-source library that provides more than 1500 free icons in SVG format. Not only for Bootstrap 5, Bootstrap Icons can also be used on previous versions of Bootstrap and website projects without Bootstrap though.

Advantages of Bootstrap 5

1. Easier to Read Documentation

Bootstrap 5 updates the appearance of the documentation so that it is easier for users to read. In Bootstrap 5, you can check subcategories directly with the dropdown menu. That way, you can move from one document to another more easily and quickly without checking each of the main categories one by one.

2. Light and Fast

With the replacement of jQuery to vanilla JS, the use of Bootstrap 5 becomes lighter and faster. Why is that? Vanilla JS is not a new JavaScript framework, but pure JavaScript. This means that the latest version of Bootstrap uses pure JavaScript to create design interactions. The use of vanilla JS will indeed make the lines of code longer than using the jQuery library. Even so, the compilation process will be faster and feel lighter. The reason is all of that happens directly on Bootstrap without calling external libraries first.

3. Responsive Design

Bootstrap is a mobile-first framework that makes it compatible and responsive for devices with small screens. However, more and more Bootstrap users who use ultra-wide screens make the Bootstrap 5 version add .col-xxl breakpoint to the grid system used. The goal, you can create responsive designs for screens with a max width of more than 1400px though.

4. Consistent Design

The latest version of Bootstrap allows you to create a more consistent website design. No more worrying about changes to website components when opened in a different browser. All of this happened thanks to an update to the form element in the latest version of Bootstrap.

5. Support Modern Browser

Bootstrap 5 is still a framework that supports various browsers. However, now their support is given to modern browsers only. The reason is, with modern browsers the properties customization feature in Bootstrap 5 can be more optimal. That way, website development for the needs of today's users can be easier.

How to Use Bootstrap 5

1. Create a Navbar

One of Bootstrap's new features that you can try is creating a navbar that uses the dropdown-menu-dark class.

2. Make a Jumbotron

Jumbotron is a component used to display highlighted information on a web page. The use of jumbotron aims to make visitors more focused and pay more attention to the message displayed.

3. Using Cards in Bootstrap 5

You will create three cards with different text-alignment on each card. The first card uses text-start, the second card uses text-center, and the third card uses text-end.

4. Creating Forms

Another new thing you can try in the Bootstrap 5 tutorial is the use of form elements.

5. Creating Footer in Bootstrap 5

The last thing you will try in the Bootstrap 5 tutorial is that you create a footer. In this section, you will implement how to use Bootstrap 5 icons, text-alignment, and the new grid system in Bootstrap.