Concepts of Bootstrap-4

📄 Table of contents


How to Get Started with Bootstrap.

<link rel="stylesheet" href="">
<!-- Bootstrap CSS -->
<!-- jQuery first -->
<!-- Popper.js -->
<!-- Bootstrap JS -->
<script src=""></script><script src=""></script>

How to Use Bootstrap CSS.

Difference between Bootstrap 3 & 4.0 version:

display: flex


The Rules of the Grid:

The Rules of the Nested-Grid:

clear the floats:

Without Clearfix

With Clearfix

How to Use the Bootstrap Grid __The Right Way.

<div class="container">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid!</div>

<div class=”row”>
<div class=”col”>Happy :-) This is the right way.</div>

Grid Options

xs => Extra small devices (<576px)  => .col-sm => Small devices (≥576px) => .col-sm-md => Medium devices (≥768px) => .col-md-lg => Large devices (≥992px) => .col-lg-xl => Extra Large devices (≥1200px) => .col-xl-


<div class="col-12 col-sm-6">Column</div>
<div class="col-sm-6">Column</div>

Larger breakpoints, override Smaller breakpoints.

<div class="col-sm-3 col-md-4">..</div>


.responsive {
width: 100%;
height: auto;
.responsive {
max-width: 100%;
height: auto;
.center {
display: block;
margin: auto;
width: 50%;
1 rem = 16px
3 rem = 48px

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.