While Bootstrap uses ems or rems to define most sizes, px is used for grid breakpoints and container widths. This is because the width of the viewport is in pixels and does not change with font size.
See how aspects of the Bootstrap Grid System work on multiple devices with a handy table :
Extra small
Max container width
Class prefix
# of columns
<576px Small
None (auto)
.col-
12
≥576px Medium
540px
.col-sm-
12
≥768px Large
720px
.col-md-
12
≥992px Extra large
960px
.col-lg-
12
≥1200px
1140px
.col-xl-
12
Here is the example for the responsive grid columns :
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Bootstrap CSS -->
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
<title>Hello, world!</title>
</head>
<body>
<div class='container pt-4 d-flex align-content-center justify-content-center'>
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class='row'>
<div class='col-12 col-md-8'>.col-12 .col-md-8</div>
<div class='col-6 col-md-4'>.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class='row'>
<div class='col-6 col-md-4'>.col-6 .col-md-4</div>
<div class='col-6 col-md-4'>.col-6 .col-md-4</div>
<div class='col-6 col-md-4'>.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class='row'>
<div class='col-6'>.col-6</div>
<div class='col-6'>.col-6</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>
-->
</body>
</html>
Hope this will help you.
Happy Coding!
Markdown for AI
A clean, structured version of this page for AI assistants and LLMs.
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
Privacy Policy.
While Bootstrap uses ems or rems to define most sizes, px is used for grid breakpoints and container widths. This is because the width of the viewport is in pixels and does not change with font size.
See how aspects of the Bootstrap Grid System work on multiple devices with a handy table :
Here is the example for the responsive grid columns :
Hope this will help you.
Happy Coding!