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

 

 

 

Categories: web designing bootstrap

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo