Bootstrap 5: Getting Started
Bootstrap is a free, open source HTML, CSS, and JavaScript framework. It is the world's most popular framework for building responsive, mobile-first sites.
In this course, we will be learning Bootstrap 5 (released 2021) which is the newest version of Bootstrap (released 2013)
We will only be discussing the basics on this course. For an exhaustive guide and full documentaion, go to Bootstrap's official site.
How to add Bootstrap
Bootstrap is very easyo install. All you need to do is copy the following codes into your html file
Add this line of code inside your
<head> element:
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">/
And then add this Javascript link just before the closing tag of
you </body>:
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Note: add the tag <meta name="viewport> to
ensure proper rendering and touch zooming
Supported Browsers
Bootstrap supports the latest, stable releases of all major browsers and platforms. Generally speaking, Bootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
Mobile devices
| Chrome | Firefox | Safari | Android Browser & WebView | |
|---|---|---|---|---|
| Android | Supported | Supported | — | v6.0+ |
| Windows | Supported | Supported | Supported | — |
Desktop browsers
| Chrome | Firefox | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|
| Mac | Supported | Supported | Supported | Supported | Supported |
| Windows | Supported | Supported | Supported | Supported | — |
Breakpoints
In Bootstrap, breakpoints are adjustable widths that control how your responsive layout functions on various devices or viewport sizes.
- The fundamental components of responsive design are breakpoints.
- To design your CSS by breakpoint, use media queries.
- The objective is to use responsive, mobile-first design.
| 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 |
Containers
Containers are the most fundamental Bootstrap layout component and are necessary when using its built-in grid system. The purpose of containers is to contain, center, and occasionally pad the content they contain. Although containers can be nested, most layouts don't require for them.
There are 3 types of bootstrap containers:
-
.container- provides a responsive fixed width container -
.container-{breakpoint}- provides a responsive fixed width container depending on the specified breakpoint -
.container-fluid- provides a full width container, spanning the entire width of the viewport