Hackforge Academy

Explanation

Bootstrap follows a mobile-first approach, allowing layouts to adapt from small screens to larger screens.

Code:

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
  Responsive Card
</div>

Explanation

Responsive utility classes can show or hide elements at specific Bootstrap breakpoints.

Code:

<div class="d-block d-md-none">
  Mobile Menu
</div>

Explanation

Responsive images can scale automatically using the img-fluid class.

Code:

<img src="photo.jpg"
     class="img-fluid"
     alt="Photo">

Explanation

Responsive tables can scroll horizontally on smaller screens using table-responsive.

Code:

<div class="table-responsive">
  <table class="table">
    <tr><td>Large Data</td></tr>
  </table>
</div>

Explanation

Bootstrap's responsive grid can transform a multi-column desktop layout into a single-column mobile layout.

Code:

<div class="row">
  <div class="col-12 col-md-6 col-lg-3">1</div>
  <div class="col-12 col-md-6 col-lg-3">2</div>
  <div class="col-12 col-md-6 col-lg-3">3</div>
  <div class="col-12 col-md-6 col-lg-3">4</div>
</div>