What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web
development
Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many
other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs
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.
Why Use Bootstrap?
Advantages of Bootstrap:
Easy to use: Anybody with just basic knowledge of HTML and CSS can
start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones,
tablets, and desktops
Mobile-first approach: In Bootstrap, mobile-first styles are part of the
core framework
Browser compatibility: Bootstrap 5 is compatible with all modern
browsers (Chrome, Firefox, Edge, Safari, and Opera). Note that if you
need support for IE11 and down, you must use either BS4 or BS3.
Bootstrap 5 Containers
You learned from the previous chapter that Bootstrap requires a containing
element to wrap site contents.
Containers are used to pad the content inside of them, and there are two
container classes available:
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
Fixed Container
Use the .container class to create a responsive, fixed-width container.
Note that its width (max-width) will change on different screen sizes:
Extra small Small Medium Large Extra Large XXL
<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
max- 100% 540px 720px 960px 1140px 1320px
width
Open the example below and resize the browser window to see that the
container width will change at different breakpoints:
Example
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
The XXL breakpoint (≥1400px) is new in Bootstrap 5, while the largest
breakpoint in Bootstrap 4 is Extra large (≥1200px).
Fluid Container
Use the .container-fluid class to create a full width container, that will always
span the entire width of the screen (width is always 100%):
Example
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Container Padding
By default, containers have left and right padding, with no top or bottom
padding. Therefore, we often use spacing utilities, such as extra padding and
margins to make them look even better. For example, .pt-5 means "add a
large top padding":
Example
<div class="container pt-5"></div>
Container Border and Color
Other utilities, such as borders and colors, are also often used together with
containers:
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
Responsive Containers
You can also use the .container-sm|md|lg|xl classes to determine when the
container should be responsive.
The max-width of the container will change on different screen sizes/viewports:
Class Extra small Small Medium Large Extra large XXL
<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
.container- 100% 540px 720px 960px 1140px 1320px
sm
.container- 100% 100% 720px 960px 1140px 1320px
md
.container- 100% 100% 100% 960px 1140px 1320px
lg
.container- 100% 100% 100% 100% 1140px 1320px
xl
.container- 100% 100% 100% 100% 100% 1320px
xxl
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
