Bootstrap 5 Breakpoints Available Breakpoints
Bootstrap 5 provides a predefined set of different available breakpoints to build the responsive utilities which help in quickly creating responsive layouts, along with defining the range of screen size or viewport size. There are 6 default breakpoints that are facilitated by Bootstrap, which are known as grid tiers. Every range has a class infix and it can be used to add custom responsiveness in layouts like in a grid layout, for instance, col-md-5 which means the col will take up 5 sections when the screen size is or exceeds md. The breakpoints, class infixes, and dimensions with respect to each other are given in the table below:
Breakpoint
|
Class infix
|
Dimensions
|
extra-small |
none |
<576px |
small |
sm |
>=576px |
medium |
md |
>=768px |
large |
lg |
>=992px |
extra large |
xl |
>=1200px |
extra extra large |
xxl |
>=1400px |
These breakpoints are designed to specifically contain 12 sections perfectly and the dimensions can be changed in the Sass map of the _variable.scss stylesheet.
Bootstrap 5 Breakpoints Available breakpoints classes: There are no used classes we just need to use the class infixes wherever required.
Example 1: The code example below displays how the available breakpoints can be applied in making a responsive nested grid.
HTML
<!doctype html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
</ head >
< body >
< h1 class = "ms-4 mt-3 text-success" >
GeeksforGeeks
</ h1 >
< h4 class = "ms-4" >
Bootstrap 5 Breakpoints Available breakpoints
</ h4 >
< pre class = "m-4" >
Responsive Nested Grid
</ pre >
< div class = "container" >
< div class = "row" >
< div class="col-md-2
bg-light border
border-warning">
Outer: .col-md-2
</ div >
< div class="col-md-10
bg-light
text-light
border border-warning">
< div class = "row" >
< div class="col-6 col-md-4
bg-secondary
border border-warning">
Nested: .col-6 .col-md-4
</ div >
< div class="col-6 col-md-8
bg-secondary
border border-warning">
nested: .col-6 .col-md-8
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The code below demonstrates the usage of the available breakpoints in a grid and implementing it inside a modal.
HTML
<!doctype html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< h1 class = "ms-4 mt-3 text-success" >
GeeksforGeeks
</ h1 >
< h4 class = "ms-4" >
Bootstrap 5 Breakpoints Available breakpoints
</ h4 >
< div class = "container" >
< button type = "button"
class = "btn btn-success mt-4"
data-bs-toggle = "modal"
data-bs-target = "#cardModal" >
Launch Modal to show grid
</ button >
< div class = "modal fade"
id = "cardModal"
tabindex = "-1"
aria-labelledby = "cardModalLabel"
aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title"
id = "cardModalLabel" >
This Modal Contains a Grid implemented with
Available breakpoints
</ h5 >
< button type = "button"
class = "btn-close"
data-bs-dismiss = "modal"
aria-label = "Close" >
</ button >
</ div >
< div class = "modal-body" >
< div class = "container mt-4 p-4" >
< div class = "row text-light mb-3" >
< div class = "col-sm-6 bg-secondary border" >
col-sm-6
</ div >
< div class = "col-lg-6 bg-secondary border" >
col-lg-6
</ div >
</ div >
< div class = "row text-light mb-3" >
< div class = "col-lg-7 bg-success border" >
col-lg-7
</ div >
< div class = "col-md-5 bg-success border" >
col-md-5
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints
Last Updated :
14 Feb, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...