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 (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">

Responsive images in Bootstrap: Add class="img-fluid" inside the IMG tag, and the image will adapt (resize) to screens of any size.

Google Fonts with Bootstrap: Add Google fonts to your Bootstrap pages, replacing the default Bootstrap fonts.

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.