Bootstrap 4 Basic Example Pages

→ GitHub repo (contains all files)

This is a set of examples for students to use. See the Bootstrap site for latest versions of all files.

My Bootstrap 4 Introduction is suitable for students approaching an intermediate level of competency with HTML and CSS. The goal of that document is to cut through the myriad possibilities offered by the Bootstrap framework and get students to start using it correctly as quickly as possible.

The example pages

starter_with_CDNs.html
A bare-bones file containing all the Bootstrap CSS and JavaScript files as external links (links to CDNs).You must be online for this file to work. The HTML has one container DIV, but no rows and columns.
starter_with_local_files.html
The exact same bare-bones file, but with LOCAL links to all the Bootstrap CSS and JavaScript files (not CDNs). The Bootstrap files are in the /css/ and /js/ folders in this repo. This file works offline. The HTML has one container DIV, but no rows and columns.
starter_with_row_and_columns.html
This page demonstrates the Bootstrap grid, which provides flexible options for page layouts that adapt to any screen size. The HTML has one container DIV, two rows, and several columns. It uses Bootstrap CSS but no JavaScript.
grid_example_one_row.html
Demo of the full 12-column grid, breaking at each one of the five Bootstrap breakpoints (xs, sm, md, lg, xl) to reformat from 12 to 6 to 4 to 3 to 1 column(s) as you resize the window. It uses Bootstrap CSS but no JavaScript.
example_with_added_fonts.html
This page uses Google fonts to override the Bootstrap 4 defaults. It also uses responsive images with Bootstrap 4 styles, and flexible column styles as well. The page has an added style sheet that changes only a few things, including all the fonts on the page. Font size using rems is explained in the added_styles.css file. This page uses Bootstrap CSS, plus added_styles.css, but no JavaScript.