Each grid must be in a class=container. You can have an unlimited number of rows (class=row), but the col widths sould not exceed 12 per row as shown below. Background colors added below to help columns stand out from each other. Row height will adjust to hold content.
col col-md-12 bg-primary
col col-md-6 bg-success
col col-md-3 bg-warning
col col-md-3 bg-info
col col-md-4 bg-secondary
col col-md-2 bg-danger
col col-md-2 bg-muted
col col-md-1 bg-primary
col col-md-1 bg-success
col col-md-1 bg-warning
col col-md-1 bg-info
CONTEXTUAL BUTTONS
class=btn
All of the above buttons have an outlined variation like the following:
BUTTON SIZES
class=btn
Note: Button color provided by additional class.
FORMS
class on each control: form-control
This makes all controls inline: form class=form-inline
Tables
class=table
First Name
Last Name
Age
Jill
Smith
50
Eve
Jackson
24
John
Doe
34
Class=table table-striped
First Name
Last Name
Age
Jill
Smith
50
Eve
Jackson
24
John
Doe
34
Class=table table-hover
Also shown: tr class=table-warning and tr class=table-danger
First Name
Last Name
Age
Jill
Smith
50
Eve
Jackson
24
John
Doe
34
Class=table table-primary
First Name
Last Name
Age
Jill
Smith
50
Eve
Jackson
24
John
Doe
34
Menu Sample/List Groups
CARD (DIVS)
div class=card. div contains div for header and body.