Concepts of Bootstrap-4

📄 Table of contents

Bootstrap

How to Get Started with Bootstrap.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!-- Bootstrap CSS -->
<!-- jQuery first -->
<!-- Popper.js -->
<!-- Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></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>
</div>

<div class=”row”>
<div class=”col”>Happy :-) This is the right way.</div>
</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-

Mobile-first!

<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>

Img-responsive

.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.