To assign margin related properties using the classes:

.mt-3

- margin-top

.mr-3

- margin-right

.mb-3

- margin-bottom

.ml-3

- margin-left

.mx-3

- margin-left, margin-right

.my-3

- margin-top, margin-bottom

.m-3

- margin-top, margin-bottom, margin-left, margin-right The same for padding properties:

.pt-3

- padding-top

.pr-3

- padding-right

.pb-3

- padding-bottom

.pl-3

- padding-left

.px-3

- padding-left, padding-right

.py-3

- padding-top, padding-bottom

.p-3

- padding-top, padding-bottom, padding-left, padding-right

There are five grid breakpoints to make the grid responsive: Extra small -

xs

Small -

sm

Medium -

md

Large -

lg

Extra large -

xl

xs

Extra small

<576px

sm

Small

≥576px

md

Medium

≥768px

lg

Large

≥992px

xl

Extra large

≥1200px

Two columns with equal width on all devices and viewport (from

xs

to

xl

)

<div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>

Three equal width columns

<div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>

we can create block level buttons - those that span the full width of a parent by adding

.btn-block

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

The grid system that starts out stacked and becomes horizontal at the small breakpoint (sm)

<div class="container">
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

100%

Extra small <576px

540px

Small ≥576px

720px

Medium ≥768px

960px

Large ≥992px

1140px

Extra large ≥1200px

Creates three equal-width columns on small, medium, large, and extra large devices

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Outlined button types with examples

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Outline button Classes:

btn-outline-primary

btn-outline-secondary

btn-outline-success

btn-outline-danger

btn-outline-warning

btn-outline-info

btn-outline-light

btn-outline-dark

Input group example

<div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>