What is Bootstrap

o Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing a responsive and mobile friendly website.
o It is absolutely free to download and use.
o It is a front-end framework used for easier and faster web development.
o It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many others.
o It can also use JavaScript plug-ins.
o It facilitates you to create responsive designs.

History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released
as an open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub.

Advantages of Using Bootstrap

If you have had some experience with any front-end framework, you might be
wondering what makes Bootstrap so special. Here are some advantages why one
should opt for Bootstrap framework:
 Save lots of time — You can save lots of time and efforts using the Bootstrap
predefined design templates and classes and concentrate on other
development work.
 Responsive features — Using Bootstrap you can easily create responsive websites
that appear more appropriately on different devices and screen resolutions without
any change in markup.
 Consistent design — All Bootstrap components share the same design templates
and styles through a central library, so the design and layout of your web pages will
be consistent.
 Easy to use — Bootstrap is very easy to use. Anybody with the basic working
knowledge of HTML, CSS and JavaScript can start development with Bootstrap.
 Compatible with browsers — Bootstrap is created with modern web browsers in
mind and it is compatible with all modern browsers such as Chrome, Firefox, Safari,
Internet Explorer, etc.
 Open Source — And the best part is, it is completely free to download and use.

Note: Bootstrap is responsive by default with a mobile first approach. Bootstrap 5 is

the latest and most stable version of the Bootstrap. Bootstrap 5 is supported in all
major modern browsers such Google Chrome, Firefox, Safari, Internet Explorer 10
and above, etc.
What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.

What Bootstrap package contains

Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, and
background.

CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML
elements style and an advanced grid system.

Components: Bootstrap contains a lot of reusable components built to provide

iconography, dropdowns, navigation, alerts, pop-overs, and much more.

JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can
easily include them all, or one by one.

Customize: Bootstrap components are customizable and you can customize

Bootstrap's components, LESS variables, and jQuery plugins to get your own style.

Bootstrap Versions
Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with
new components, faster stylesheet and more responsiveness.

Bootstrap 5 supports the latest, stable releases of all major browsers and platforms.
However, Internet Explorer 11 and down is not supported.

The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5
has switched to vanilla JavaScript instead of jQuery.

Where to Get Bootstrap 5

There are two ways to start using Bootstrap 5 on your own web site.

You can:

 Include Bootstrap 5 from a CDN

 Download Bootstrap 5 from getbootstrap.com

Method 1: Using the Bootstrap Content Delivery Network

(CDN)
Using the Bootstrap CDN is a great way to deliver the content from your website to
your users quickly and efficiently based on their geographic location and improve
your website server’s performance. To link Bootstrap in HTML using this method:

Adding Bootstrap 5 CDN to HTML

Bootstrap 5 no longer needs jQuery as a dependency since JavaScript can provide

the same functionality. To add Bootstrap 5 CDN to HTML:

 For CS

Copy this stylesheet link to the <head> tag of your desired HTML file.

<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">

 For JS

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7C
XvN" crossorigin="anonymous"></script>

Or

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.min.js" integrity="sha384-
mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD
" crossorigin="anonymous">
</script>
Method 2: Downloading files locally
Another way of importing Bootstrap to HTML is to directly download the files locally
to your HTML project folder. The files can be downloaded from the following links:

Bootstrap 5: https://getbootstrap.com/docs/5.3/getting-started/download/

For CSS:
Include a link to the bootstrap.min.css file in the <head> portion of your HTML file.
Doing this enables you to use the Bootstrap CSS components as per your need.

 For JS:

Add a link to the bootstrap.min.js file before the end of the <body> portion of your
HTML file. Doing this enables you to use Bootstrap JS components.

Note that the jquery.min.js and popper.min.js files must be included before
loading bootstrap.min.js, even if you have downloaded the files locally.

Creating Your First Web Page with Bootstrap

1. Add the HTML5 doctype

Bootstrap 5 uses HTML elements and CSS properties that require the HTML5
doctype.

Always include the HTML5 doctype at the beginning of the page, along with the lang
attribute and the correct title and character set:

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

2. Bootstrap 5 is mobile-first

Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are

part of the core framework.

To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:

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

The width=device-width part sets the width of the page to follow the screen-width of
the device (which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first loaded by the
browser.

3. Containers

Bootstrap 5 also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The .container class provides a responsive fixed width container

2. The .container-fluid class provides a full width container, spanning the entire
width of the viewport

Example
<!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]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j
6gD" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXv
N" crossorigin="anonymous"></script>
</body>
</html>

Available breakpoints
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for
building responsively. These breakpoints can be customized if you’re using our
source Sass files.

Breakpoint Class infix Dimensions

Extra small None <576px

Small sm ≥576px

Medium md ≥768px

Large lg ≥992px

Extra large xl ≥1200px

Extra extra large xxl ≥1400px

Each breakpoint was chosen to comfortably hold containers whose widths are
multiples of 12. Breakpoints are also representative of a subset of common device
sizes and viewport dimensions—they don’t specifically target every use case or
device. Instead, the ranges provide a strong and consistent foundation to build on for
nearly any device.

Containers
Containers are a fundamental building block of Bootstrap that contain, pad, and align
your content within a given device or viewport.

How they work

Containers are the most basic layout element in Bootstrap and are required when
using our default grid system. Containers are used to contain, pad, and
(sometimes) center the content within them. While containers can be nested, most
layouts do not require a nested container.

Bootstrap comes with three different containers:

 .container, which sets a max-width at each responsive breakpoint

 .container-{breakpoint}, which is width: 100% until the specified breakpoint
 .container-fluid, which is width: 100% at all breakpoints

The table below illustrates how each container’s max-width compares to the
original .container and .container-fluid across each breakpoint.

See them in action and compare them in our Grid example.

Extra small Small Medium Large X-Large XX-Large

<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px

.container 100% 540px 720px 960px 1140px 1320px

.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Default container
Our default .container class is a responsive, fixed-width container, meaning its max-
width changes at each breakpoint.

<div class="container">
<!-- Content here -->
</div>
Responsive containers
Responsive containers allow you to specify a class that is 100% wide until the
specified breakpoint is reached, after which we apply max-widths for each of the
higher breakpoints. For example, .container-sm is 100% wide to start until
the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl.

<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>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Fluid containers
Use .container-fluid for a full width container, spanning the entire width of the viewport.

<div class="container-fluid">
...
</div>

Adding Background and Borders to Containers

By default, container doesn't have any background-color or border. But if you need
you can apply your own styles, or simply use the Bootstrap background-color and
border utility classes to add background-color or border on them, as shown in the
following example.

Example-

<!-- Container with dark background and white text color -->
<div class="container bg-dark text-white">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>

<!-- Container with light background -->

<div class="container bg-light">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>

<!-- Container with border -->

<div class="container border">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>
 Applying Paddings and Margins to Containers
By default, containers have padding of 12px on the left and right sides, and no
padding on the top and bottom sides. To apply extra padding and margins you can
use the spacing utility classes.

<!-- Container with border, extra paddings and margins -->

<div class="container border py-3 my-3">

<h1>This is a heading</h1>

<p>This is a paragraph of text.</p>

</div>

Bootstrap Grid System

Bootstrap grid system provides an easy and powerful way to create responsive
layouts of all shapes and sizes. It is built with flexbox with mobile-first approach.
Also, it is fully responsive and uses twelve column system (12 columns available per
row) and six default responsive tiers.
If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns:

span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

You can use the Bootstrap's predefined grid classes for quickly making the
layouts for different types of devices like mobile phones, tablets, laptops,
desktops, and so on.
For example, you can use the .col-* classes to create grid columns for extra
small devices like mobile phones in portrait mode, and the .col-sm-* classes for
mobile phones in landscape mode.
Similarly, you can use the .col-md-* classes to create grid columns for medium
screen devices like tablets, the .col-lg-* classes for devices like small laptops,
 the .col-xl-* classes for laptops and desktops, and the .col-xxl-* classes for large
desktop screens.

The following table summarizes how the Bootstrap 5 grid system works across different
screen sizes:

Extra small Small Medium Large Extra Large XXL

(<576px) (>=576px) (>=768px) (>=992px) (>=1200px) (>=1400px)

Class .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-

prefix

Grid Horizontal Collapsed to Collapsed to Collapsed to Collapsed to Collapsed to

behaviour at all times start, start, start, start, horizontal start, horizontal
horizontal horizontal horizontal above above
above above above breakpoints breakpoints
breakpoints breakpoints breakpoints

Container None (auto) 540px 720px 960px 1140px 1320px

width

Suitable Portrait Landscape Tablets Laptops Laptops and Laptops and

for phones phones Desktops Desktops

# of 12 12 12 12 12 12
columns

Gutter 1.5rem 1.5rem 1.5rem 1.5rem 1.5rem (.75rem 1.5rem (.75rem

width (.75rem on (.75rem on (.75rem on (.75rem on on each side of on each side of
each side of each side of each side of a each side of a a column) a column)
a column) a column) column) column)

Nestable Yes Yes Yes Yes Yes Yes

Offsets Yes Yes Yes Yes Yes Yes

Column Yes Yes Yes Yes Yes Yes

ordering
Above table demonstrates one important thing, applying any .col-sm-* class to
an element will not only have an effect on small devices, but also on medium,
large and extra large devices (viewport width ≥768px), if a .col-md-*, .col-lg-*, .col-
xl-*, or .col-xxl-* class is not present.

Similarly, the .col-md-* class will not only have an effect on medium devices, but
also on large and extra large devices if a .col-lg-*, .col-xl-*, or .col-xxl-* class is not
present.
Now the question arises how to create rows and columns using this 12 column
responsive grid system. The answer is pretty simple,
at first create a container that acts as a wrapper for your rows and columns
using any container classes such as .container,
after that create rows inside the container using the .row class,
and to create columns inside any row you can use the .col-*, .col-sm-*, .col-md-
*, .col-lg-*, .col-xl-* and .col-xxl-* classes.

The columns are actual content area where we will place our contents.

Creating Two Column Layouts

The following example will show you how to create two column layouts for medium,
large and extra large devices like tables, laptops and desktops etc. However, on
mobile phones (screen width less than 768px), the columns will automatically
become horizontal (2 rows, 1 column).
Example-
<div class="container">

<!--Row with two equal columns-->

<div class="row">

<div class="col-md-6">Column left</div>

<div class="col-md-6">Column right</div>

</div>

<!--Row with two columns divided in 1:2 ratio-->

<div class="row">

<div class="col-md-4">Column left</div>

 <div class="col-md-8">Column right</div>

</div>

<!--Row with two columns divided in 1:3 ratio-->

<div class="row">

<div class="col-md-3">Column left</div>

<div class="col-md-9">Column right</div>

</div>

</div>

Note: In a grid layout, content must be placed inside the columns (.col and .col-
*) and only columns may be the immediate children of rows (.row). Also, rows
should be placed inside a container (either fixed or fluid) for proper padding
and alignment.
Since the Bootstrap grid system is based on 12 columns, therefore to keep the
columns in a one line (i.e. side by side), the sum of the grid column numbers
within a single row should not be greater than 12. If you go through the above
example code carefully you will find the numbers of grid columns (i.e. col-md-*)
add up to twelve (6+6, 4+8 and 3+9) for every row.

Bootstrap Auto-layout Columns

You can also create equal width columns for all devices (x-small, small,
medium, large, x-large, and xx-large) through simply using the class .col,
without specifying any column number.
Let's try out the following example to understand how it exactly works:
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>

<!--Row with three equal columns-->

<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>
Column Wrapping Behavior
Now we are going to create more flexible layouts that changes the column
orientation based on the viewport size. The following example will create a three
column layout on large devices like laptops and desktops, as well as on tablets (e.g.
Apple iPad) in landscape mode, but on medium devices like tablets in portrait mode
(768px ≤ screen width < 992px), it will change into a two column layout where the
third column moves at the bottom of the first two columns.

Example
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-3">Column one</div>
<div class="col-md-8 col-lg-6">Column two</div>
<div class="col-md-12 col-lg-3">Column three</div>
</div>
</div>
As you can see in the example above the sum of the medium grid column
numbers (i.e. col-md-*) is 3 + 9 + 12 = 24 > 12, therefore the third <div> element with
the class .col-md-12 that is adding the extra columns beyond the maximum 12
columns in a .row, gets wrapped onto a new line as one contiguous unit on the
medium screen size devices.
Similarly, you can create even more adaptable layouts for your websites using
the Bootstrap's grid column wrapping feature.

Row columns
Use the responsive .row-cols-* classes to quickly set the number of columns that best
render your content and layout. Whereas normal .col-* classes apply to the individual
columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a
shortcut. With .row-cols-auto you can give the columns their natural width.

Use these row columns classes to quickly create basic grid layouts or to control your
card layouts.

<div class="container text-center">

<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>

Nesting of Grid Columns

The Bootstrap grid columns are also nestable, that means you can put rows
and columns inside an existing column. However, the formula for placing the
columns will be the same, i.e. the sum of column numbers should be equal to
12 or less within a single row.

Example
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>

Alignment of Grid Columns

You can use the flexbox alignment utilities to vertically and horizontally align
grid columns inside a container. Try out the following examples to understand
how it works:

Vertical Alignment of Grid Columns

You can use the classes .align-items-start, .align-items-center, and .align-items-end to
align the grid columns vertically at the top, middle and bottom of a container,
respectively.
<div class="row align-items-start">
<div class="row align-items-center">

<div class="row align-items-end">

Individual columns inside a row can also be aligned vertically. Here's an

example:

Example
<div class="container">
<div class="row">
<div class="col align-self-start">Column one</div>
<div class="col align-self-center">Column two</div>
<div class="col align-self-end">Column three</div>
</div>
</div>

Horizontal Alignment of Grid Columns

You can use the classes .justify-content-start, .justify-content-center, and .justify-
content-end to align the grid columns horizontally at the left, center and right of a
container, respectively.
<div class="container text-center">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
 </div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>

Reordering of Grid Columns

You can even change the visual order of your grid columns without changing
their order in actual markup. Use the class .order-last to order the column in last,
whereas use the class .order-first to order the column at first place.
You can also use the .order-* classes to order the grid columns depending on
the order numbers. Grid column with higher order number comes after the grid
column with lower order number or grid column with no order classes. It
includes support for 1 through 12 across all five grid tiers.
Offsetting the Grid Columns
You can also move grid columns to the right for alignment purpose using the column
offset classes like .offset-sm-*, .offset-md-*, .offset-lg-*, and so on.
These classes offset the columns by simply increasing its left margin by specified
number of columns. For example, the class .offset-md-4 on column .col-md-8 moves
it to the right over four columns from its original position. Try out the following
example to see how it works:

<div class="container text-center">

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>