In this write-up, we will learn about Bootstrap 4 utility classes or Helper classes. This is the third part of this article series of Bootstrap 4 utility classes. In this part, we will discuss spacing, position, and Background Color utility classes. Utility classes are useful to add style quickly without writing any CSS classes.
Bootstrap spacing classes
Bootstrap 4 provides classes to set the responsive padding and margin.
Syntax
{property}{sides} – {breakpoint} – {sides}
- Property: padding or margin
- Sides:Top,botton,left,right
- t - margin-top or padding-top
- b - margin-bottom or padding-bottom
- l - margin-left or padding-left
- r - margin-right or padding-right
- x – margin *-left and *-right or padding *-left and *-right
- Breakpoint:Xs,sm,md,lg,xl
- xs <=576px
- sm>=576px
- md>=768px
- lg>=992px
- xl>=1200px
- Size:size may be 0,1,2 etc.
- 0 - margin or padding to 0
- 1 - margin or padding to .25rem
- 2 - sets margin or padding to .5rem
- 3 - sets margin or padding to 1rem
- auto - sets margin to auto
Open Visual Studio and create a new project. Rename it as Bootstrap4 and add the reference of the Bootstrap 4 files into the page's head section.
Now, add 3 Divs and their acting classes.