'rem' stands for 'root-element' size
Bootstrap 4 uses a default font-size
of 16px, and its line-height
is 1.5.
The default font-family
is "Helvetica Neue", Helvetica, Arial, sans-serif.
In addition, all <p>
elements have margin-top: 0
and margin-bottom: 1rem
(16px by default).
Containers
There are 2 types of Containers
- container : class provides a responsive fixed width container
- container-fluid : class provides a full width container, spanning the entire width of the view port
Shorthand Classes
Assign responsive-friendly margin
or padding
values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem
to 3rem
.
property is one of:
m
- for classes that setmargin
p
- for classes that setpadding
sides is one of:
t
- for classes that setmargin-top
orpadding-top
b
- for classes that setmargin-bottom
orpadding-bottom
l
- for classes that setmargin-left
orpadding-left
r
- for classes that setmargin-right
orpadding-right
x
- for classes that set both*-left
and*-right
y
- for classes that set both*-top
and*-bottom
- blank - for classes that set a
margin
orpadding
on all 4 sides of the elemen
size is one of:
0
- for classes that eliminate themargin
orpadding
by setting it to0
1
- (by default) for classes that set themargin
orpadding
to$spacer * .25
2
- (by default) for classes that set themargin
orpadding
to$spacer * .5
3
- (by default) for classes that set themargin
orpadding
to$spacer
4
- (by default) for classes that set themargin
orpadding
to$spacer * 1.5
5
- (by default) for classes that set themargin
orpadding
to$spacer * 3
auto
- for classes that set themargin
to auto
Container Padding
By default, containers have 15px left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-3
means "add a top padding of 16px": (note that .pt-3 is equivalent to $spacer and $spacer is equal to rem, ie 16px. see table above)
|
|