Skip to main content

Introduction to Bootstrap v5

Bootstrap Introduction​

Bootstrap is a popular front-end framework that allows developers to create responsive and mobile-first websites quickly and easily.

Bootstrap 5 is the latest version of this framework, released in May 2021. It offers a range of new features, improvements, and enhancements over the previous version, Bootstrap 4.

Why we should use bootstrap​

There are several reasons why you might choose to use Bootstrap in your web development projects:

Responsive design​

Bootstrap is designed to be mobile-first, which means that it helps you create websites that look great on all devices, including desktops, laptops, tablets, and smartphones.

This is essential in today's world, where the majority of internet traffic comes from mobile devices.

Time-saving​

Bootstrap provides a wide range of pre-built components and templates, which can save your time and effort when building websites. Instead of starting from scratch, you can use these building blocks to create responsive layouts, forms, menus, and other elements quickly and easily.

Consistency​

By using Bootstrap, you can ensure that your website has a consistent look and feel across all pages and devices. This is because Bootstrap provides a set of standard styles and components that you can use throughout your website.

Cross-browser compatibility​

Bootstrap is designed to work with all modern web browsers, which means that you don't have to worry about testing your website on multiple browsers and versions.

Customizability​

While Bootstrap provides a range of pre-built components and templates, you can also customize these elements to meet your specific needs.

Basic example of Bootstrap​

Editor

Loading...

In this example:

  • We have included the Bootstrap CSS and JavaScript files from a CDN (Content Delivery Network) to avoid the need to download these files and host them on our server.
  • We have also included a meta viewport tag to ensure that the website is responsive and fits the width of the device.
  • The container class is a Bootstrap class that centers the content on the page and adds some padding to the sides.
  • The h1 and p tags are standard HTML tags, but they are styled using Bootstrap's default styles.

What is Bootstrap CDN​

Bootstrap CDN (Content Delivery Network) is a way to include the Bootstrap framework in your website or web application by referencing the Bootstrap files hosted on a third-party server.

When you use Bootstrap CDN, your website loads the Bootstrap files from a nearby server that is part of the CDN network.

This can improve the loading speed and performance of your website, especially for users who are located far away from your server.

To use Bootstrap CDN, you simply need to include the Bootstrap CSS and JavaScript files in your HTML code by referencing the URLs provided by the CDN.

As an example:

Editor

Loading...

In this example:

  • We have included the Bootstrap CSS and JavaScript files from the jsDelivr CDN, which is a popular CDN for open-source projects.
  • The @5.0.1 part of the URLs specifies the version of Bootstrap that we want to use.

Include Bootstrap’s CSS and JS​

To include Bootstrap's CSS and JS using a Content Delivery Network (CDN), below steps can be followed:

  • Open your HTML file in a code editor or text editor.

  • In the head section of your HTML file, add a link to the Bootstrap CSS file using the following code:

<link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
/>

This will load the latest version of Bootstrap's CSS

  • At the end of the body section of your HTML file, add a script tag to include the Bootstrap JS file using the following code:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>

This will load the latest version of Bootstrap's JS.