Category: 1. bootstrap

https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/2560px-Bootstrap_logo.svg.png

Environment Setup

It is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup Bootstrap 5.3. We will also discuss the Bootstrap file structure, and demonstrate its usage with an example.

There are two ways to do the environment Setup in Bootstrap 5.3.

Compiled CSS and JS
Source Files

Following sections will discuss about these two steps.

Compiled CSS and JS

You can download ready to use compiled code of Bootstrap v5.3.0 here

Once downloaded, unzip the compressed folder and we see the following folder structure:

  bootstrap/
 css/
bootstrap-grid.css
bootstrap-grid.css.map
bootstrap-grid.min.css
bootstrap-grid.min.css.map
bootstrap-grid.rtl.css
bootstrap-grid.rtl.css.map
bootstrap-grid.rtl.min.css
bootstrap-grid.rtl.min.css.map
bootstrap-reboot.css
bootstrap-reboot.css.map
bootstrap-reboot.min.css
bootstrap-reboot.min.css.map
bootstrap-reboot.rtl.css
bootstrap-reboot.rtl.css.map
bootstrap-reboot.rtl.min.css
bootstrap-reboot.rtl.min.css.map
bootstrap-utilities.css
bootstrap-utilities.css.map
bootstrap-utilities.min.css
bootstrap-utilities.min.css.map
bootstrap-utilities.rtl.css
bootstrap-utilities.rtl.css.map
bootstrap-utilities.rtl.min.css
bootstrap-utilities.rtl.min.css.map
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
bootstrap.rtl.css
bootstrap.rtl.css.map
bootstrap.rtl.min.css
bootstrap.rtl.min.css.map js/
 bootstrap.bundle.js
 bootstrap.bundle.js.map
 bootstrap.bundle.min.js
 bootstrap.bundle.min.js.map
 bootstrap.esm.js
 bootstrap.esm.js.map
 bootstrap.esm.min.js
 bootstrap.esm.min.js.map
 bootstrap.js
 bootstrap.js.map
 bootstrap.min.js
 bootstrap.min.js.map

This compressed folder contains:

Compiled and minified CSS bundles: Bundles of compiled and minified CSS (view a comparison of CSS files)
Compiled and minified JavaScript plugins: JavaScript plugins that have been minified and compiled (view a JS files comparison)

Documentation, source code, and any extra JavaScript dependencies like Popper are not included.

Source files

You can download Bootstrap source files by clicking on the download link on official site here, or you can also use the GitHub link to start downloading . You will get the Bootstrap v5.3.0 after this download.

Download Sass, JavaScript, and documentation files to customizeBootstrap using your asset pipeline. Extra tools are needed for this option.

For converting Sass source files into CSS files, use the Saas compiler.
Autoprefixer for CSS vendor prefixing

CDN via jsDelivr

CDN (Content Delivery Network) is a free content delivery platform offered by Bootstrap. Predefined files of CSS and JS can be used without installing them in your local system using the Bootstrap CDN. You can use available Bootstrap codes by copying the link and adding them to your project.

The only condition to use the CDN is to have internet connectivity in your local system. Developers can access the complete CSS for Bootstrap CDN via jsDelivr by copying the below link:.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

It is advised to add Popper before JS, preferably via CDN:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>

Package managers

We can also install Bootstrap into the local system using Package Manager. Let’s see the commands to install Bootstrap.

Package Manager	Description	Commands to install
npm	Install Bootstrap in your Node.js powered apps with the npm package:	$ npm install [email protected]
yarn	Install Bootstrap in your Node.js powered apps with the yarn package:	$ yarn add [email protected]
RubyGems	Install Bootstrap in your Ruby apps using Bundler (recommended) and RubyGems by adding the following line to your Gemfile:	gem ‘bootstrap’, ‘~> 5.3.0’ OR $ gem install bootstrap -v 5.3.0
Composer	You can also install and manage Bootstraps Sass and JavaScript using Composer:	$ composer require twbs/bootstrap:5.3.0
NuGet	If you develop in .NET Framework, you can also install and manage Bootstraps CSS or Sass and JavaScript using NuGet.	Step1: PM> Install-Package bootstrap Step2: PM> Install-Package bootstrap.sass

HTML Template

A basic HTML template using Bootstrap 5.3 would look like this −

You can edit and try running this code using Edit & Run option.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap demo</title><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"></head><body><h1>Welcome to Tutorialspoint!</h1><script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script></body></html>

Here you can see the popper.min.js, bootstrap.bundle.min.js and bootstrap.min.css files that are included to make a normal HTM file to the Bootstrapped Template.

September 22, 2025

Overview

Bootstrap

Bootstrap is a popular open-source front-end framework that is used to create responsive and mobile-first websites and web applications.

It provides a collection of CSS and JavaScript components, such as grids, forms, buttons, navigation bars, and more, which can be easily implemented and customized to create responsive and visually appealing web interfaces.

With Bootstrap, developers can save time and effort by utilizing pre-designed components, as well as the grid system for creating responsive layouts. It also provides numerous styling options and utilities to enhance the overall appearance and functionality of websites. Bootstrap is widely used by web developers to streamline the web development process and create consistent and visually appealing user interfaces.

History of Bootstrap

Mark Otto and Jacob Thornton developed the Bootstrap, at Twitter. In August 2011, Bootstrap was released as an open source product, on GitHub.

Key points in Bootstrap 5 and later versions

There are several new features and changes in Bootstrap 5 compared to Bootstrap 4. Some of the notable ones include:

Smaller file size: Bootstrap 5.* is designed to be more lightweight, with the removal of jQuery and other dependencies. It has switched to Vanilla JavaScript. This leads to faster load times.
Improved grid system: The grid system in Bootstrap 5.* comes with a new, more flexible layout. It introduces a new gap utility and no longer relies on floats.
Updated default colors and theming: Bootstrap 5.* introduces a new default color palette and theme. The new colors are more modern and visually appealing.
Improved form controls: The form controls in Bootstrap 5.* have been enhanced with new styles and options. There are new styles for checkboxes and radio buttons, as well as improved custom select menus.
New helpers and utilities: Bootstrap 5.* introduces new utility classes and helpers, such as vertical centering, stretched link utility, and more.
Improved documentation and accessibility: The documentation for Bootstrap 5 has been updated and improved, making it easier to use and understand. Additionally, Bootstrap 5 focuses more on accessibility, with better ARIA support and improved keyboard navigation.

Bootstrap – advantages

There are several benefits of using Bootstrap:

Responsive design: Bootstrap is built with a mobile-first approach, meaning it is designed to be responsive and adapt to different screen sizes. This ensures that your mobile application looks good and functions well on various devices, including smartphones and tablets.
Time-saving: Bootstrap provides a wide range of predefined and customizable CSS and JavaScript components, such as grids, buttons, navigation bars, and modals. These ready-to-use components help developers save time and effort by eliminating the need to code everything from scratch.
Consistent appearance: With Bootstrap, you can achieve a consistent and professional-looking design across your mobile application. It offers a set of predefined styles and themes that can be easily customized to match your brand’s identity.
Cross-browser compatibility: Bootstrap is designed to work well across different web browsers, ensuring that your mobile application functions consistently for users, regardless of the browser they prefer to use.
Community and support: Bootstrap has a large and active community of developers who contribute to its improvement and provide support through forums and online resources. This can be helpful if you encounter any challenges or have questions during the development of your mobile application.
Accessibility: Bootstrap follows modern web development standards and best practices, including accessibility guidelines. This ensures that your mobile application is accessible to users with disabilities, enhancing its usability and reach.
Continuous updates and enhancements: Bootstrap is regularly updated and improved with new features, bug fixes, and performance enhancements. By using Bootstrap, you can take advantage of these updates to keep your mobile application up-to-date and optimized.

Bootstrap – important globals

Let’s examine how Bootstrap utilizes a limited number of crucial global styles and settings that are primarily focused on normalizing cross-browser styles.

HTML5 doctype

HTML5 doctype is crucial to be used, without which the styling will be incomplete and inappropriate.

For LTR direction:

<!DOCTYPE html><html lang="en">

  ...
&lt;/html&gt;</pre>

For RTL direction:

<!DOCTYPE html><html lang="ar" dir="rtl">

  ...
&lt;/html&gt;</pre>

Viewport meta

Bootstrap follows a "mobile-first" development approach, where the code is initially optimized for mobile devices, and then components are scaled up as needed through CSS media queries. To ensure accurate rendering and touch zooming on all devices, it's essential to include the responsive viewport meta tag in the <head> section of your webpage.

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

Box-sizing

The global box-sizing value is switched from content-box to border-box, for extensive sizing in CSS. It ensures that the final width of an element is not affected by the padding.

The following code will let all the nested elements, including the ones with generated content via ::before and ::after, inherit the specified box-sizing for that .selector-for-some-widget:

    .selector-for-some-widget {
    box-sizing: content-box;
  }

Reboot

In order to correct the inconsistencies across various browsers and devices, use reboot. This will improve the cross-browser rendering.

Use of CDN

CDN, Content Delivery Network, is a network of servers that speeds up the loading of webpages for data-heavy applications.

How to use Bootstrap CDN?

Follow the steps given below:

Build a basic HTML file - Use your preferred code editor to create the file
Convert the file to a Bootstrap template - Include the Bootstrap CSS CDN and Bootstrap JS CDN files, along with Popper and Bootstrap jQuery through their CDN links
Save and view the file - Save the file with extension .html and as a template.

September 22, 2025