Bootstrap 5 Responsive Screen Sizes

Bootstrap 5 provides a powerful, flexible grid system and responsive utilities to adapt web layouts across various screen sizes. It includes six default breakpoints to handle different screen sizes.

Screen Sizes and Breakpoints

Breakpoint	Class Prefix	Screen Width Range
Small (sm)	.col-sm-	576px to 767px
Medium (md)	.col-md-	768px to 991px
Large (lg)	.col-lg-	≥992px

These breakpoints are used to control the layout based on the screen size.

---

Responsive Grid System

The grid system is based on 12 columns, with each screen size using a specific prefix (e.g., col-sm, col-md, col-lg). This allows for different layouts based on the screen width.

Example: Responsive Columns

Below is an example of a responsive layout that changes based on the screen size.

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
      <!-- Content for Column 1 -->
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
      <!-- Content for Column 2 -->
    </div>
    <div class="col-sm-12 col-lg-4">
      <!-- Content for Column 3 -->
    </div>
  </div>
</div>

Explanation: - Small Screens (576px - 767px): Each column takes the full width (col-sm-12). - Medium Screens (768px - 991px): Each row has two columns side by side (col-md-6). - Large Screens (≥992px): Each row has three columns (col-lg-4).

---

Responsive Utilities

Display Classes

Bootstrap includes classes to show or hide elements based on screen size. Use d-* classes to control visibility:

<div class="d-none d-sm-block d-md-none">Visible only on small screens</div>
<div class="d-md-block d-lg-none">Visible only on medium screens</div>
<div class="d-lg-block">Visible on large screens and above</div>

Margin and Padding

Responsive margins and padding adjust spacing based on screen size:

<div class="p-2 p-md-4">Padding increases on medium and larger screens</div>
<div class="m-1 m-lg-3">Margin increases on large screens and up</div>

---

Responsive Text Alignment

Text alignment can be adjusted for different screen sizes:

<p class="text-start text-md-center text-lg-end">Aligned differently for each screen size</p>

---

Code Reference

Refer to the Bootstrap 5 Responsive Screen Sizes

Refer to the BS5 Responsive Screen Work