Bootstrap 4 for Beginners
This is a repo for students to use. See the Bootstrap site for latest versions of all files.
Current versions in repo:
- Bootstrap 4.5.3
- jQuery 3.5.1
- Popper JS 2.5.4
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 Files
Live pages → here
A brief description of each example file in this repo:
-
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.
There are many more complex examples at the Bootstrap site.