Bootstrap4 Most Important CSS Classes
In this blog, we will learn about Bootstrap4's most important classes that are mostly used in a project. Bootstrap4 has a number of classes that are useful for our project such as spacing classes, display classes, colors, form classes, etc.
Let’s see the most important Bootstrap4 Classes which every web designer should know:
1. Spacing Classes: Bootstrap4 provides spacing classes that are very useful for our project. In spacing classes It uses some of the following syntaxes:
m: stands for margin.
p: stands for padding.
Directions:
t: stands for top
b: stands for bottom
l: stands for left
r: stands for right
y: stands for the y-axis (top and bottom)
x: stands for the x-axis (right and left)
Values:
0: 0px
1: 4px
2: 8px
3: 16px
4: 24px
5: 48px
|
Class
|
Description |
|
.m-# / m-*-# |
Margin all sides
|
|
.mt-# / mt-*-#
|
Margin top |
|
.mb-# / mb-*-#
|
Margin bottom |
|
.ml-# / ml-*-#
|
Margin left |
|
.mr-# / mr-*-#
|
Margin right |
|
.mx-# / mx-*-#
|
Margin right and left
|
|
.my-# / my-*-#
|
Margin top and bottom |
|
.p-# / p-*-#
|
Padding all sides |
|
.pt-# / pt-*-#
|
Padding top |
|
.pb-# / pb-*-#
|
Padding bottom |
|
.pr-# / pr-*-#
|
Padding right |
|
.pl-# / pl-*-#
|
Padding left |
|
.py-# / py-*-#
|
Padding top and bottom |
|
.px-# / px-*-#
|
Padding right and left |
In above table we have used symobles:
# : it is used for values like mt-3,py-4,pb-5 etc.
* : It is used for device like mt-sm-4 , mb-md-4 etc.
Example:
<div class=”my-2”></div>
In this example we used my-2 means margin top and bottom 8px.
<div class=”pt-5”></div>
In this example we used pt-5 means padding-top 48px.
You can use these spacing classes to reduce unnecessary CSS code. If you want to give margin or padding more than 48px then you can use your own CSS class.
2. form classes: Bootstrap4 provides form classes to style our form elements. Which are the following;
|
Class
|
Description |
|
.form-control
|
It is used to design our input element with the following property:
display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
.form-group
|
It is used as a parent element of label and input. It uses margin-bottom: 1rem. This class is used on the div element.
|
|
.form-inline
|
This class is used to style our form inline . it uses following property:
display: flex; flex-flow: row wrap; align-items: center;
|
3. Display Classes: Bootstrap4 Provides Display classes to hide and show elements on a particular device.
|
Class |
Description |
|
.d-none
|
This class is used to hide elements on all devices. |
|
.d-none .d-sm-block
|
Hidden only on Xtra small device and show on small and above devices.
|
|
.d-sm-none .d-md-block
|
Hidden only on small devices and shown on the medium device and above devices.
|
|
.d-md-none .d-lg-block
|
Hidden only on the medium device. |
|
.d-lg-none .d-xl-block
|
Hidden only on large devices. |
|
.d-xl-none
|
Hidden only on the extra-large devices. |
|
.d-block
|
Display block on all devices. |
|
.d-block .d-sm-none
|
Visible only on Xtra small device. |
|
.d-none .d-sm-block .d-md-none
|
Visible only on a small device. |
|
.d-none .d-md-block .d-lg-none
|
Visible only on medium devices. |
|
.d-none .d-lg-block .d-xl-none
|
Visible only on large devices. |
|
.d-none .d-xl-block
|
Visible only on extra-large devices. |
4. Color Classes: Bootstrap provides a color class that helps to color our buttons, background, and text.
|
Classes
|
|
.bg-primary
|
|
.bg-warning
|
|
.bg-success
|
|
.bg-info
|
|
.bg-danger
|
|
.bg-dark
|
|
.bg-light
|
|
.text-primary
|
|
.text-scuccess
|
|
.text-info
|
|
.text-danger
|
|
.text-light
|
|
.text-dark
|
|
.text-white
|
5. table classes: Bootstrap Provides table classes to style an HTML table.
|
Classes
|
|
.table
|
|
.table-bordered
|
|
.table-responsive
|
|
.table-striped
|
|
.table-dark
|
|
.table-hover
|
|
.table-(any color name like primary, success)
|
6. Button Classes: Button Classes is used to style button.
|
Classes
|
|
.btn
|
|
.btn-(any color class name like primary, success, info, etc.)
|
|
.btn-outline-(any color class name like primary, success, info, etc.)
|
|
.btn-group
|
|
.btn-sm
|
|
.btn-lg
|
7. Image Classes: Bootstrap provides a class for images to be responsive, round, and circle.
|
Classes
|
|
.img-fluid
|
|
.img-circle
|
|
.img-rounded
|
.svg)
