Margins and Paddings
Margins
Margins in CSS control the space between elements and the outer edges of their containers. In Bootstrap, margins can be easily adjusted using utility classes, eliminating the need for custom CSS.
Margin Classes
Bootstrap provides a set of margin utility classes following a consistent naming convention:
{side} can be:
Meaning | Bootstrap Class |
---|---|
top | t |
bottom | b |
left | l |
right | r |
horizontal | x |
vertical | y |
{size} can be:
Meaning | Bootstrap Class |
---|---|
no margin | 0 |
0.25rem | 1 |
0.5rem | 2 |
1rem | 3 |
1.5rem | 4 |
3rem | 5 |
index.html
index.css
index.js
Paddings
Paddings in CSS determine the space between the content of an element and its borders. In Bootstrap, developers can easily control padding using utility classes, which helps maintain consistent spacing throughout the layout without needing custom CSS.
Padding Classes
Bootstrap provides a set of padding utility classes following a consistent naming convention:
The variations for {side}
and {size}
are identical to those for margin.
index.html
index.css
index.js
Everything was clear?
Course Content
Bootstrap: Building Stylish Websites
1. Understanding Bootstrap
2. Setting Up Environment
4. Advanced Concepts
Bootstrap: Building Stylish Websites
Margins and Paddings
Margins
Margins in CSS control the space between elements and the outer edges of their containers. In Bootstrap, margins can be easily adjusted using utility classes, eliminating the need for custom CSS.
Margin Classes
Bootstrap provides a set of margin utility classes following a consistent naming convention:
{side} can be:
Meaning | Bootstrap Class |
---|---|
top | t |
bottom | b |
left | l |
right | r |
horizontal | x |
vertical | y |
{size} can be:
Meaning | Bootstrap Class |
---|---|
no margin | 0 |
0.25rem | 1 |
0.5rem | 2 |
1rem | 3 |
1.5rem | 4 |
3rem | 5 |
index.html
index.css
index.js
Paddings
Paddings in CSS determine the space between the content of an element and its borders. In Bootstrap, developers can easily control padding using utility classes, which helps maintain consistent spacing throughout the layout without needing custom CSS.
Padding Classes
Bootstrap provides a set of padding utility classes following a consistent naming convention:
The variations for {side}
and {size}
are identical to those for margin.
index.html
index.css
index.js
Everything was clear?