Responsive grid layout
Responsive grid – My favorite responsive grid layout with Bootstrap4
html
<div class="container text-center">
<h2 class="w300"><span class="w900 text-primary">My favorite</span> <span>responsive grid layout</span> </h2>
<div class="row">
<div class="col-lg-6 col-md-6 bg-info p-5">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content text-left" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Velit euismod in pellentesque massa placerat duis ultricies lacus sed.</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">At auctor urna nunc id cursus metus aliquam eleifend.</div>
</div>
</div>
<div class="col-lg-3 col-md-6 bg-secondary text-light row align-items-center mx-0 p-3">
<div class="container">
<h5 class="rounded-pill bg-success py-2">Contact us</h5>
<p class="mb-0">jessica416901@gmail.com</p>
</div>
</div>
<div class="col-lg-3 col-md-12 bg-success text-light">
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-2">
<div class="col bg-dark">
<i class="fas fa-battery-empty fa-2x bg-primary p-3 m-3 rounded-lg "></i>
<p>lorem</p>
</div>
<div class="col bg-success">
<i class="fas fa-battery-quarter fa-2x bg-primary p-3 m-3 rounded-lg "></i>
<p>lorem</p>
</div>
<div class="col bg-warning">
<i class="fas fa-battery-half fa-2x bg-primary p-3 m-3 rounded-lg "></i>
<p>lorem</p>
</div>
<div class="col bg-info">
<i class="fas fa-battery-three-quarters fa-2x bg-primary p-3 m-3 rounded-lg "></i>
<p class="text-dark">lorem</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container text-center">
<h2 class="w300"><span class="w900 text-primary">My favorite</span> <span>responsive grid layout</span> </h2>
<div class="row">
<div class="col-lg-6 col-md-6 bg-primary p-5">1</div>
<div class="col-lg-3 col-md-6 bg-secondary p-5">2</div>
<div class="col-lg-3 col-md-12 bg-success">
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-2">
<div class="col bg-dark"><h1 class="display-3">3</h1></div>
<div class="col bg-success"><h1 class="display-3">4</h1></div>
<div class="col bg-warning"><h1 class="display-3">5</h1></div>
<div class="col bg-info"><h1 class="display-3">6</h1></div>
</div>
</div>
</div>
</div>
<hr>