Starter code for using Bootstrap 5. Links and code are specific to version 5.2.0.
Live versions of these pages are here.
Here are descriptions of the files in this repo:
-
basic_page.html – 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_page2.html – 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_columns1.html – Use of the
row
class and the simplecol
class (not responsive). -
rows_columns2.html – Shows how use of the simple
col
class breaks the page on small screens. -
rows_columns3.html – The alternative is to use responsive column classes, such as
col-md-3
, to adapt to screens of any size. Compare this page in a narrow browser window or on a mobile device to example 2 (above) to see why it‘s important to use the responsive column classes instead of the simplecol
class. -
rows_columns4.html – 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.
— Responsive column classes have this format:col-md-2
— More than one responsive column class can be applied to one HTML element in this way:class="col-xl-1 col-md-2"
NOTE that rows (elements that have the row
class) are essential when you use columns. Group the column elements inside a row element. Use as many separate row elements as you need. Rows are independent of one another and can be styled quite differently from one another.
row 1
column column column
row 2
column column
row 3
column column column column column
Columns can be wide or narrow. The maximum number of columns in any one row is 12. rows_columns4.html shows a row with 12 columns.
-
goog_fonts.html — How to add Google fonts to your Bootstrap pages, replacing the default Bootstrap fonts.
-
images.html — Responsive images in Bootstrap are easy, adding one class inside the IMG tag.
-
buttons.html — How to use the Bootstrap button styles. How to use buttons to open new pages or add interactivity to your pages.
.