Bootstrap 5.3 Breakpoints 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5.3 Brekpoints</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <p>This is a responsive column.</p>
      </div>
      <div class="col-sm-6 col-md-8 col-lg-9">
        <p>This is another responsive column.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

Code Output

Bootstrap 5.3 Brekpoints

This is a responsive column.

This is another responsive column.

Breakpoints

Bootstrap 5.3 introduces breakpoints, which are predefined screen sizes that define the responsive behavior of elements in your website. Breakpoints allow you to create a layout that adapts to different screen sizes, such as desktops, tablets, and mobile devices.

    • extra small: < 576px
    • sm (small): 576px to 767px
    • md (medium): 768px to 991px
    • lg (large): 992px to 1199px
    • xl (extra large): 1200px and 1399px
    • xxl (extra extra large): 1400px and above