Richard's Bootstrap 5 (2023) Framework Page

Richard Ricardo's example page of creating responsive, mobile first webpages using Bootstrap (HTML, CSS and JS) framework.

Set up programming environment

Before you learn bootstrap framework, you MUST know html and css. If you have no html / css background, please learn them at this page.

Go to getbootstrap.com.
Click on Download Bootstrap twice "Compiled CSS and JS"
Unzip the download, save it into your website folder.
1. Rename the folder to "bootstrap_dist", to work with examples below.
Download a template file from getbootstrap.com example page. OR download any example file below.
Update the bootstrap links (links to mostly .css file) in the example, to match the folder names in your website folder.

Resources

I used the following learning resources:

First file, Grid system

File	Description
eg001.htm video_19_001 bootstrap 5 setup	the bootstrap v5 first page, download it to finish setting up the environment `.containter` = responsive, fixed-width `.container-fluid` = full width, 100% of screen width Containers explained in getbootstrap.com `.row` = each row So... `.container`, then `.row`, then `.col-`.
eg002.htm eg002_style.css	w3schools.com notes on grid for Bootstrap 5 bootstrap grid system = 12 columns, nestable, number rows MUST be wrapped within a `.container` or `.container-fluid` respectively for fixed-width and full-width. Then wrapped within a `.row`. `.col-` (xs extra small: <576px) `.col-sm-` (small: >=576px) `.col-md-` (medium: >=768px) `.col-lg-` (large: >=992px) `.col-xl-` (xlarge: >=1200px) `.col-xxl-` (xxlarge: >=1400px) Gutter (padding) width = 1.5rem (0.75rem on each side of a column), check out the explanation here max .container content width 1170 px for BS3 1140 px for BS4 1320 px for BS 5 col must sum to 12 check out gutter explanation here media queries in Bootstrap allow you to move, show and hide content based on the viewport size.
Bootstrap 5 grid system	Bootstrap 5 grid system is a bit different from Bootstrap 4 grid system.
eg003.htm eg003_style.css	multiple device support and nested columns (need to double check if this one works)
eg005.htm similar to eg002.htm	`.container-fluid` Compare with eg002.htm to see the differences

Text/Typography, Table, Image

File	Description
eg006.htm skipped some examples	Bootstrap 5 uses a default `font-size` of `1rem` (`16px` by default), and its `line-height` is 1.5. `<p>` elements have `margin-top: 0` and `margin-bottom: 1rem` (`16px` by default). `<small>` `<mark>` etc... link to ... a lot more typography classes
eg007.htm eg007_style.css	bootstrap basic table `.table` class default: light padding, horizontal dividers `.table-stripped` class add zebra-stripes to table
eg008.htm	bootstrap images
	Spacing explanation

Alert, Button

Grouping	Description
jumbotron	No longer supported in Bootstrap 5
alerts	`.alert` Success! Info! Warning! Danger! Primary! Secondary! Dark! Light!
button	`.btn` different button styles

Pagination

Grouping	Description
pagination	Previous 1 2 3 Next

Dropdowns, Navbar

Grouping	Description
eg009.htm	Dropdown Button - different types - lastly put it in a Navbar
eg010.htm	Navs and tabs Navbar - Navigation bar

Forms, Inputs

File	Description
coming soon...	skip for now...

Carousel

File	Description
eg014.htm	basic carousel
eg015.htm	carousel and slide captions