What Is Bootstrap And How To Use It

By Sruthy

By Sruthy

Sruthy, with her 10+ years of experience, is a dynamic professional who seamlessly blends her creative soul with technical prowess. With a Technical Degree in Graphics Design and Communications and a Bachelor’s Degree in Electronics and Communication, she brings a unique combination of artistic flair…

Full Bio >

Follow
Learn about our editorial policies.
 Updated March 7, 2024

In this introductory tutorial, we have covered What is Bootstrap and how to use it. We have also discussed  Responsive web design, Mobile-first approach, history of Bootstrap, Migrating to Bootstrap 4 highlights, Browser, and device compatibility:

We will explore the advantages of and how to use Bootstrap package, creating your first web page – Hello World, community, and frequently asked questions.

=> Take A Look At The Bootstrap Beginners Guide Here

Bootstrap Tutorial

Bootstrap 4 Tutorial

Target Audience

For a better understanding of this tutorial series, you need to have a decent knowledge of HTML, CSS, and JavaScript.

This tutorial series is specially designed for someone who has no or little knowledge of Bootstrap. However, advanced users and professionals may also find this series useful. At the end of this tutorial series with proper practicing, we strongly believe that you will be able to master Bootstrap.

In simple words, this is a zero to hero tutorial series for Bootstrap 4.

What Is Bootstrap

Boostrap – Official Website

It is a free and open-source front-end framework for Cascading Style Sheets (CSS). It helps to build responsive and mobile-first web applications. Further, it adds a lot of creativity to your web application.

Therefore, Bootstrap is one of the most popular CSS frameworks among thousands of web developers all over the world.

Bootstrap 4 is written in HTML, CSS, Syntactically Awesome Stylesheets (Sass), and JavaScript. Its source code is hosted on GitHub and licensed under the MIT License.

While talking about the popularity, it is the seventh most starred repository on GitHub. Currently, the Bootstrap repository has around 145,031 stars.

The below screenshot shows the top 10 most starred repositories on GitHub.

Repositories on GitHub

[image source]

What Is Responsive Web Design

layout of Bootstrap

[image source]   

What is the screen size of your device? Do you think it is similar to mine?

Answers for the above two questions may vary from user to user as different devices have different screen sizes.

If you create a web design targeting a particular device or device category (such as mobile phones, tabs, or desktops), it may not fit for another device or device category. However, it is not possible to build a separate design for each device and device category.

Responsive web design is the answer to overcome this barrier.

Responsive web design is a technique that is used to automatically match the design to fit the screen size of the device. We are indeed happy to mention that Bootstrap is one of the best web platforms to build responsive web applications.

Example: Bootstrap 4 breakpoints for responsive containers.

The responsive container is a new feature introduced in Bootstrap version 4.4.

For example, container-sm class (.container-sm) is 100% wide to begin till the sm breakpoint is reached, wherever it will proportion with md, lg, and xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

What Is Mobile-First Approach

Mobile-first Approach

As the name indicates, the mobile-first approach is starting to design from the mobile end and then expand it to suit tablet and desktop versions. It is also developed to be mobile-first. On the other hand, a desktop-first approach is starting to design from the desktop end.

There are several advantages of using the mobile-first approach. Usually, a mobile-first design is lightweight. It also has a low bandwidth when compared to a desktop-first design. Also, mobile-first websites have faster loading times than desktop-first websites. However, there is little space for creativity for mobile-first designs.

History Of Bootstrap

The framework was initially released on August 19, 2011. The original name of Bootstrap is Twitter Blueprint.

There are four major releases so far i.e.  Bootstrap version 1.x, version 2.x, version 3.x, and version 4.x. Version 4.5 is the current version of Bootstrap.

Note: Bootstrap 5 Alpha was released in June 2020. However, it is not yet released to the public.

Follow this link if you want to know more about the older versions.

Migrating From Bootstrap 3 To Bootstrap 4 Highlights

Here is a summary that you need to know while migrating from version 3.x to 4.x.

#1) Browser Support

  • Bootstrap 3 supports Internet Explorer 8 and Internet Explorer 9, but version 4 does not support Internet Explorer 8 and Internet Explorer 9. Version 4 only supports Internet Explorer 10+.
  • Bootstrap 3 supports Android Browser and WebView unofficially, but Bootstrap 4 officially supports Android version 5.0 Lollipop’s Browser and WebView.

#2) Operating System (OS) Support

Version 3 supports iOS 6, but version 4 does not support iOS 6. It only supports iOS 7+.

#3) Global Changes

The following list shows a summary of the global changes.

  • Flexbox is enabled by default.
  • Switched from Less to Sass for the source CSS files.
  • Switched from px to rem as the primary CSS unit.
    • Note: Pixels are still used for media queries and grid behaviour as device viewports are not affected by type size.
  • Global font-size increased from 14px to 16px.
  • Removed the support for non-responsive usage.
  • Several new utility classes added for common CSS property-value pairs and margin/padding spacing shortcuts.

#4) Grid System Changes

The following list shows a summary of grid system changes.

  • Moved to flexbox.
  • Updated grid class names and a new grid tier.
  • Updated grid sizes, mixins, and variables.

#5) Component Changes

The following list shows a summary of component changes.

  • Dropped Bootstrap panels, thumbnails, and wells.
  • Dropped the Glyphicons icon font
  • Dropped the Affix jQuery plugin
  • Dropped the pager component
  • Refactored nearly all components

As we just discussed a summary, you can visit the link to find out how to migrate to Bootstrap 4 in detail.

Browser And Device Compatibility

Bootstrap supports the latest version of all major web browsers like:

  • Google Chrome
  • Firefox
  • Safari
  • Opera and
  • Internet Explorer

Version 3 supports Internet Explorer 8, Internet Explorer 9, and iOS 6. But, Bootstrap 4 does not support Internet Explorer 8, Internet Explorer 9, and iOS 6. Instead, version 4 supports Internet Explorer 10+ and iOS 7+.

Why Bootstrap

There are several advantages of using Bootstrap for building applications.

Some of the advantages are listed below.

  • It is free and open-source.
  • It is lightweight.
  • Allows building responsive web designs.
  • supports all major web browsers.
  • A rich set of components and utilities are available for development.
  • Supports jQuery plugins.
  • Availability of a large number of templates, themes, and plugins.
  • Good documentation support (E.g. The official documentation).
  • It is easy to learn for beginners.
  • Larger community support

How To Use Bootstrap

There are several options to include Bootstrap into your project.

They are,

  1. Downloading ready-to-use compiled CSS and JS code.
  2. Downloading source files
  3. Via Bootstrap CDN (Via jsDelivr)
  4. Via Package Managers
    • NPM
    • Yarn
    • RubyGems
    • Composer
    • NuGet

Let’s have a detailed look at them one by one.

Downloading Ready-to-Use Compiled CSS And JS Codes

This option allows you to download ready-to-use compiled Bootstrap CSS code and  JS code, and add them to the project folder. These codes include compiled and minified CSS bundles and compiled and minified JavaScript plugins.

Note: Compiled CSS and JS folders do not contain source files, non-compulsory JavaScript dependencies such as jQuery & popper.js, and documentation files.

You can visit here to download compiled CSS and JS plugins.

Downloading Source Files

This option allows you to download source files for compiling Bootstrap with your asset pipeline. The source file folders contain Documentation, JavaScript, and Sass. However, this option needs a Sass compiler (to compile your CSS) and Autoprefixer.

Note: You can find more information about Autoprefixer by clicking this link.

You can visit here to download source files for Bootstrap.

Via Bootstrap 4 CDN (Via jsDelivr)

If you are using the above two options, you have to download Bootstrap. Instead of downloading, you can add a cached version of compiled CSS and JS into your project. It is a quick method to insert Bootstrap into your project. jsDelivr is a free and open-source Content Delivery Network (CDN).

#1) Adding a Cached Version of Bootstrap’s Compiled CSS

You can add a cached version of compiled CSS into your project by following the below step.

Add the following code snippet into the <head> (head tag) before all other stylesheets. It will load Bootstrap CSS.

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css” integrity=”sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2″ crossorigin=”anonymous”>

#2) Adding a Cached Version of Bootstrap’s Compiled JS

There are two methods to add a cached version of compiled JS into your project.

Method 1:

Add the following <scripts>s (scripts) right before the </body> (closing of the body tag) which is closer to the end of your web page. It will load Bootstrap JS.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
</script>

Note: The bootstrap.bundle.js file and the bootstrap.bundle.min.js file include Popper. But it does not include jQuery. Therefore, jQuery is added as a separate script.

Method 2:

Instead of the above method, you can add separate scripts, as shown below.

Add the following <scripts>s (scripts) right before the </body> (closing of the body tag) which is closer to the end of your web page. It will load Bootstrap JS.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity=
"sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 
crossorigin="anonymous">
</script>

Note: The above order is important! jQuery must come first. If you are adding Popper.js as a separate script, it must come before the JavaScript plugins. Then, the JavaScript plugins, as shown above.

Components Requiring JavaScript

The following components require JavaScript.

  • Closing alerts
  • Toggling buttons
  • Checkbox functionality
  • Radio button functionality
  • Sliding behavior (including controls and indicators) of carousels.
  • Collapsing toggling visibility of content.
  • Displaying and positioning dropdowns (also requires popper.js).
  • Displaying, positioning, and scrolling modals.
  • Navbar for extending our collapse plugin to implement responsive behaviour.
  • Displaying and dismissing toasts.
  • Displaying and positioning tooltips and popovers (it requires popper.js also).
  • Scrollspy for scroll behaviour and navigation updates.

Via Package Managers

You can use package managers to pull source files into your project. It requires a Sass compiler and Autoprefixer for proper use.

#1) npm

You can use the npm package to install Bootstrap into your Node.js powered apps. You can run the following command in the command prompt or terminal to install Bootstrap using this method.

npm install bootstrap

#2) yarn

You can use the yarn package to install Bootstrap for Node.js powered apps. You can run the following command in the command prompt or terminal to install Bootstrap using this method.

yarn add bootstrap

#3) RubyGems

There are a few methods to install this framework into your Ruby apps.

a) Add the below line to your Gemfile to install Bootstrap (version 4.5.3 ) using Bundler (Recommended) and RubyGems.

gem ‘bootstrap’, ‘~> 4.5.3’

It is the recommended method to install Bootstrap into your Ruby apps. However, you can use the following option as well.

b) You can install gem by running the below command if you are not using Bundler.

gem install bootstrap -v 4.5.3

#4) Composer

You can use the composer to install and manage Sass and JavaScript of Bootstrap. Run the following command in the command prompt or terminal to install it using this method.

composer require twbs/bootstrap:4.5.3

#5) NuGet

You can install and manage CSS or Sass and JavaScript of Bootstrap in your .NET apps using NuGet:

Install-Package bootstrap

Install-Package bootstrap.sass

#6) Bootstrap Examples

You can visit the official website to download and examine the already built Bootstrap examples that are provided by the official website.

What Does Bootstrap Package Include

The Bootstrap package (Compiled CSS and JS) consists of two main folders named CSS Bootstrap folder and JS Bootstrap folder.

The CSS Bootstrap folder contains the following files.

  • bootstrap.css
  • bootstrap.css.map
  • bootstrap.min.css
  • bootstrap.min.css.map
  • bootstrap-grid.css
  • bootstrap-grid.css.map
  • bootstrap-grid.min.css
  • bootstrap-grid.min.css.map
  • bootstrap-reboot.css
  • bootstrap-reboot.css.map
  • bootstrap-reboot.min.css
  • bootstrap-reboot.min.css.map

The JS Bootstrap folder contains the following files.

  • bootstrap.bundle.js
  • bootstrap.bundle.js.map
  • bootstrap.bundle.min.js
  • bootstrap.bundle.min.js.map
  • bootstrap.js
  • bootstrap.js.map
  • bootstrap.min.js
  • bootstrap.min.js.map

Note: These files may vary depending on the version that you have installed.

Example – Hello World!

Let’s first create a simple web page without using Bootstrap. After that, we will create a web page with the framework.

Follow the below steps to create a simple web page to display “Hello World!” (Without using Bootstrap).

Step 1: Open a notepad and add the following code.

<!doctype html>
<html lang="en">
 <head>
 <title> </title>
 </head>
 <body>
 <p>Hello World!</p>
 </body>
</html>

Step 2: Then save the file as an HTML file by giving .html extension.

Example: without bootstrap.html

Step 3: Open the file on a web browser and you will see an output similar to the screenshot below.

without bootstrap

Follow the below steps to create a web page to display “Hello World!” using Bootstrap.

Step 1: Open a notepad and add the following code.

<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<title></title>
</head>
<body>
<p>Hello World! </p>

<!-- For this example JavaScript is optional. You may choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>

Step 2: Then save the file as an HTML file by giving .html extension.

Example: with bootstrap.html

Step 3: Open the file on a web browser. You will see an output similar to the screenshot below.

with bs

Congratulations! You have just created your first web page using Bootstrap 4.

Now you can compare the two outputs. 

Community

Before concluding our first tutorial, let’s have a quick look at the community.

The community consists of a large number of developers all over the world.

The following list shows some of the useful community resources.

Joining these communities will help you to get to know the latest news and also discuss issues related to Bootstrap developments.

Frequently Asked Questions

In this section, we will look at some of the frequently asked questions:

Q #1) What is Bootstrap?

Answer: It is a free and open-source front-end framework that is used to build responsive and mobile-first web applications.

Q #2) What is the current version of Bootstrap?

Answer: Bootstrap version 4 is the current version.

Q #3) Bootstrap 4 is written in which languages?

Answer: It is written in HTML, CSS, Syntactically Awesome Stylesheets (Sass) and JavaScript.

Q #4) What is Responsive web design?

Answer: Responsive web design is a technique that is used to automatically match the design to fit the screen size of the device.

Q #5) What is the Mobile-first approach?

Answer: The mobile-first approach is starting to design from the mobile end and then expand to suit tablet and desktop versions.

Q #6) Name a few advantages of a Mobile-first design when compared to a Desktop-first design.

Answer: The below list shows a few advantages of a mobile-first design when compared to a desktop-first design.

  • More lightweight
  • Low bandwidth
  • Faster loading times

Q #7) What are the browsers supported by Bootstrap 4?

Answer: It supports the latest version of all major web browsers such as Google Chrome, Firefox, Safari, Opera, and Internet Explorer.

Q #8) What are the advantages of using Bootstrap?

Answer: The below list shows some of the advantages-

  • Free to use
  • Lightweight
  • Supports to develop Responsive web designs.
  • Supports all major web browsers.
  • Has a large number of components and utilities.
  • Supports jQuery plugins
  • A large number of templates, themes, and plugins are available.
  • Good documentation support
  • Easy to learn for beginners.
  • Wider community support.

Q #9) What are the options available to insert Bootstrap into a project?

Answer: The list given below shows the options available to insert it into a project.

  • Downloading ready-to-use compiled CSS and JS code.
  • Downloading source files
  • Via Bootstrap CDN (Via jsDelivr)
  • Via package managers
    • NPM
    • Yarn
    • RubyGems
    • Composer
    • NuGet

Q #10) State if all Bootstrap components require JavaScript?

Answer: No, only some components require JavaScript (E.g. closing alerts, toggling buttons, etc.).

Conclusion

Bootstrap is a lightweight CSS framework that is used to develop mobile-friendly and responsive applications. The current version is version 4. There are several methods to insert the framework into your project.

Even though there are several alternatives for Bootstrap, many of the developers prefer it as the CSS framework due to its advantages. The community consists of a large number of developers all around the world, and there are several community resources available as well.

=> Read Through The Easy Bootstrap Training Series

Was this helpful?

Thanks for your feedback!

Recommended Reading

Leave a Comment