Demo using Bootstrap!
This is a demonstration of some of the basics of the Bootstrap CSS library
Containers..
Containers are the most basic element in Bootstrap and everything should be inside them. They are required when using the default grid system. Containers are used to contain, pad and sometimes center the content. This block is in a basic container only.
Breakpoints
sm, md, lg, xl, xxl, fluid. For example container, container-md, container-fluid
Grid System
This is the first of three columns. First we start (as always) with a
div class="container"
Then we create a div class="row"
And then 3 div class="col" for each of these three columns
These are three more col in a row. This is col-6 for half the space.
This is col-2
And this is col-1
And this is just col, so it uses the remaining space.
Heading and Display types
Using code like:
<p class="h1">
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Using code like:
<h1 class="display-1">
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Tables
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Colours
This is text with bg-info set as the class
bg-primary text-danger
bg-secondary text-info
bg-success text-white
bg-danger text-white
bg-warning text-dark
bg-info text-dark
bg-light text-muted
bg-dark text-white
bg-white text-dark
Text Alignment
text-center
text-end
text-start (sames as default)