GitHub
Basic Bootstrap Examples
These are live versions of pages in a GitHub repo called bootstrap5-beginners. Open that repo to get the code.
The purpose of these examples is to provide starter code for people new to Bootstrap, or new to Bootstrap 5.
Basic pages
- Basic page 1: A copy of the Bootstrap “getting started” example using CDN links. Addition: One DIV element with the Bootstrap `container` class applied to it. This is an easy template to copy and use when you start a new page using Bootstrap.
- Basic page 2: Same as the previous example, but with a background color added to the container element so it’s easier to see how it changes at different browser widths.
Rows and columns for layout
- Rows and columns (1): Use of the simple
col
class (not responsive).
- Rows and columns (2): Shows how use of the simple
col
class breaks the page on small screens.
- Rows and columns (3): The alternative is to use responsive column classes, such as
col-md-3
, to adapt to screens of any size.
- Rows and columns (4): Shows more specifically how to use responsive column classes correctly. Also shows how version 5 now makes it easy to omit columns and use new flexbox styles to control spacing of elements across a row — these classes are added to the element that has the
row
class. Example: <div class="row mt-4 justify-content-center">
Images
Google fonts
Buttons
- Bootstrap Buttons: How to style buttons; how to use buttons to open new pages or add interactivity to your pages.
This site was created by Mindy McAdams and is free to use under an MIT License.