html

How to get started with Bootstrap 5?

Bootstrap 5 is the latest version of the Bootstrap framework that lets its users create websites that are responsive in nature and with a mobile-first approach. This approach specifies that the web design is first developed for mobile phones, and later on for other devices. Bootstrap 5 was launched in the year 2021 and has many amazing features such as speedy stylesheets and enhanced responsiveness. Here we will guide you on how to get started with Bootstrap 5 but before that let’s learn a bit more about Bootstrap 5.

Characteristics of Bootstrap 5

Bootstrap 5 has many features that make it stand out amongst other versions. A few of these characteristics are listed below.

  1. This latest version of Bootstrap is very user-friendly.
  2. It has fast 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 speedy, thereby, saving a lot of time and energy.

Bootstrap 5 vs. Bootstrap 3 & 4

When compared with other Bootstrap versions, specifically version 3, and version 4, the main difference that can be pointed out amongst other differences is that Bootstrap 5 uses vanilla JavaScript rather than jQuery.

Get Bootstrap 5

Before you can begin using Bootstrap 5 you obviously need to download it first and for that, you can either include it from the Content Delivery Network, or download and install it from bootstrap.com. For the sake of this tutorial, we are going to include Bootstrap 5 from CDN.

For CSS

<link href="https://cdn.jsdelivr.net/npm/bootstr[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 Bootstrap 5 is included, let’s develop our first program.

Getting started with Bootstrap 5

Below we have provided you with a step-by-step guide on how to get started with Bootstrap 5.

1. Make an HTML Document
The purpose of making an HTML file using Bootstrap 5 is to include HTML5 doctype so that this framework can make complete use of various HTML elements, and CSS properties.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
</html>

Also include the lang attribute, along with a character set. Another that we have added here is the responsive meta tag. As we know, Bootstrap 5 develops a website with a mobile-first approach, therefore, including a responsive meta tag makes sure that the website is responsive on touch, and zooming.

2. Add Bootstrap 5
Now simply add the CDN for CSS and JavaScript in your HTML file to start using Bootstrap 5 without any problem.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
</html>

Both the CDNs were added in the tag. Another approach to adding the CDN of JavaScript in the file is before the closing body tag.

3. Add Elements
The code above is entirely missing the tag, therefore, to add some content, create various HTML elements in the body of your file. Since the purpose of this post is to show the responsiveness of Bootstrap 5, therefore, we present you here with some basic knowledge about Bootstrap container classes.

A fundamental requirement of Bootstrap 5 is to include a container for the purpose of wrapping the content of the website. 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 get a full-width container that spans across the complete viewport width.

Here we will be using the container-fluid class to demonstrate our first responsive page using Bootstrap 5.

<div class="container-fluid">
  <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>
</div>

Using the container-fluid class we have created a div element that further nests a <h1> element, and two <p> elements. Scale the browser window up and down to see the effect.

Output

A responsive web page was created successfully using Bootstrap 5.

Conclusion

To get started with Bootstrap 5 you first have to make a basic HTML file by including the HTML5 doctype so Bootstrap 5 can make complete use of various HTML elements, and CSS properties. Afterward you either have to install Bootstrap 5 or get its CDN and include it in your HTML document. Then you can start creating the elements that you want to show on you web page. Lastly, save your file, and voila your first Bootstrap 5 page has been created. This tutorial guides you a step-by-step on how to get started with Bootstrap 5.

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.