Bootstrap

What is Bootstrap 5?

Bootstrap is a CSS framework that was designed for creating responsive websites and especially those websites that are developed for mobiles before being designed for any other device type. This framework was developed using HTML, CSS, and JavaScript, and consists of templates for creating various elements such as buttons, forms, dropdowns, and many more. Moreover, this framework is open source and is also free to use.

As the title of the article suggests, here the main focus of our discussion will be Bootstrap 5. Therefore, without further ado, let’s get started.

What is Bootstrap 5?

Bootstrap 5 is the latest version of the Bootstrap framework that lets its users create amazing websites with speedy CSS stylesheets and enhanced responsiveness. It was launched in the year 2021 and is supported by almost all browsers and platforms. \

Features of Bootstrap

Some of the distinguishing features of Bootstrap 5 are as follows.

  1. This newest version of Bootstrap is lightweight and can be customized according to the users’ needs.
  2. It consists of enhanced responsiveness.
  3. It is useful for developing websites that are designed for mobile phones first and other devices later.
  4. This framework is compatible with all modern browsers.
  5. It is faster, thereby, saving a lot of time and energy.

Bootstrap 5 vs. other versions

In comparison with other versions, specifically version 3, and version 4, Bootstrap 5 uses vanilla JavaScript rather than jQuery. However, the older versions can still be used for bug fixing or altering the documentation.

Now that we have a basic introduction of what Bootstrap 5 is, let’s build our first web page using this framework.

My first Bootstrap5 program

For the purpose of using Bootstrap 5, you obviously need to install it first. You can either include this framework from Content Delivery Network, or download and install it from bootstrap.com. The first approach is preferred if you do not want to host Bootstrap 5. Below we have given the CDN of Bootstrap 5.

For CSS

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

For JavaScript

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Now that we have our CDN, let’s build a web page using Bootstrap 5. Below, we have provided a step-by-step guide.

Step 1
The first step to using Bootstrap 5 is to include HTML5 doctype so that Bootstrap 5 can make complete use of various HTML elements, and CSS properties.

<!DOCTYPE html>>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

Apart from HTML5 doctype we have also included the lang attribute, along with a character set.

Step 2
As we know Bootstrap 5 develops a website with a mobile-first approach, therefore, the next step is to add a responsive meta tag to make sure that the website built as a result is responsive on touch, and zooming.

Include the following the <head> tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 3
A basic necessity of Bootstrap 5 is to include a container for the purpose of wrapping the content of the website. These containers basically wrap elements inside of them. In order to use these containers use the following two classes.

  1. .container to build a container with fixed-width yet responsive.
  2. .container-fluid to make a full-width container that spans across the complete viewport width.

Step 4
For this step we will be adding some content to create our webpage using the fixed-width container. We are keeping our program very simple so that as a beginner it is easy to understand Bootstrap 5.

<div class="container">
  <h1>Bootstrap 5</h1>
  <p>Bootstrap 5 is the latest version of the Bootstrap framework that lets its user create amazing websites with speedy CSS
    stylesheets and enhanced responsiveness. </p>
  <p>In comparison with other versions specifically version 3, and version 4, Bootstrap 5 uses vanilla JavaScript rather than
    jQuery.</p>
</divt;

In the above code, using the container class we have created a div element that further nests a heading, and two paragraphs. To see the full effect of Bootstrap 5 resize your browser window. In the output below, we have shown you how the page looks at random screen sizes.

Output
When the screen width is 837px, and above.

When the screen width is 677px, and lesser.

A webpage was successfully created using Bootstrap 5.

Conclusion

Bootstrap 5 is the latest version of the CSS Bootstrap framework that lets its users create websites that are responsive in nature and with a mobile-first approach. This version has speedy stylesheets and enhanced responsiveness and was launched in 2021. It has many amazing features that distinguish it from other versions. In comparison with other versions, specifically version 3, and version 4, Bootstrap 5 uses vanilla JavaScript rather than jQuery. This tutorial covers all the necessary details about Bootstrap 5 along with a simple program.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.