Bootstrap framework for creating responsive sites.
By Angela C
October 3, 2021
Reading time: 3 minutes.
Just some reference notes on using Bootstrap based on official documentation1 and other resources including https://www.w3schools.com2.
There are various ways to use Bootstrap in your project:
- using a CDN such as jsDelivr which is a free open-source CDN.
- using a package manager
- download the source files from https://getbootstrap.com
Bootstrap 5 Utilities
padding spacing utilities to control how elements and components are spaced and sized.
Other utility classes:
borderclasses for adding or removing borders from an element
border-5to change the width of the border
contextual border colour classes
roundedto add rounded corners (border radius) to an element
mx-autoto centre-align Bootstrap includes an
.mx-autoclass for horizontally centering fixed-width block level content. Use
mx-autoto center an element. It adds
<div class="mx-auto" style="width: 200px;"> Centered element </div>
w-*classes to set the width of an element
h-*classes to set the height of an element
By default containers have left and right padding, with no top or bottom padding. Spacing utlities such as extra padding and margins can be used to make them look better.
Bootstrap 5 has a wide range of responsive margin and padding utility classes that work for all breakpoints:
xl (>=1200px) or
The classes are used in the format:
xleft and right;
ytop and bottom.
5to set margin or padding from 0 to 3 rem. (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem)
autoto set margins to
pb-3 set to padding top to size 3 (which is 1 rem).
pt-4 sets top padding to 1.5rem,
p-5 sets padding on all sides to 3 rem.
m-5 pb-5 sets margin on all sides to 3.5 rem and bottom padding to 3 rem.
ms-3 to set margin left to size 3.
mx-3 to set left and right margin to size 3
Responsive padding or margin examples:
pb-sm-5 to set padding bottom size 5 on small screens;
ms-md-5 margin left to size 5 on medium screens;
mx-lg-5 to set left and right margin to size 5 on large screens.
Other Utility classes
shadow_classes to add shadows to an element
align_classes to change the alignment of elements (baseline, top, middle, bottom, text-top, text-bottom)
Gutter classes are available across all breakpoints with the same sizes as the margin and padding spacing classes.
Change horizontal gutters with
.gx-* classes, vertical gutters with
.gy-*, or all gutters with
g-0 xis also available to remove gutters.