Bootstrap Spacing Utility Classes – Margin & Padding | Tutorial – 12
In this tutorial we will understand the bootstrap 4 frameworks spacing utilities which are the responsive padding and margin classes and how we can use them in our website.
How it works
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
.
Notation
Spacing utilities that apply to all breakpoints, from xs
to xl
, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0
and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size}
for xs
and {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, and xl
.
Where property is one of:
m
– for classes that setmargin
p
– for classes that setpadding
Where 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 element
Where 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
(You can add more sizes by adding entries to the $spacers
Sass map variable.)
This information is taken from the official bootstrap documentation. For for more information check here – https://getbootstrap.com/docs/4.1/utilities/spacing/
Setting up everything Library into our Project Offline –
Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE
The folder hierarchy should look like this –
- test code
- bootstrap
- css
- bootstrap.min.css
- js
- bootstrap.min.js
- jquery-3.3.1.slim.min.js
- popper.min.js
- css
- css
- style.css (our custom css file)
- fontawesome-free-5.6.3-web
- css
- all.css (the only one we need to link in our project for font awesome icons)
- js
- etc
- etc
- css
- default.html
- bootstrap