Responsive Grid System (Breakpoints)

Bootstrap allows defining different column sizes for different screen sizes. The breakpoints are:

Example: Responsive Columns

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 bg-info text-white">Responsive Column</div>
    <div class="col-sm-12 col-md-6 col-lg-8 bg-success text-white">Another Column</div>
  </div>
</div>

Output:

On Large Screen:

On Medium Screen:

On Small Screen:

Explanation:

• Small Screens (<768px) → Both columns take full width.
• Medium Screens (≥768px) → Each column takes half width.
• Large Screens (≥992px) → One column takes 4/12, the other 8/12.