Responsiveness
Learn how to adapt the layout to different screen sizes.
Breakpoints
You can add some properties that are only applied if a screen width is more than a certain size (aka breakpoint).
| Breakpoint | Min Screen Width |
|---|---|
| Small (sm) | 520px |
| Medium (md) | 680px |
| Large (lg) | 880px |
| Extra Large (xl) | 1180px |
The following properties can be responsive:
- margins
- paddings
- text alignment
- alignment and ordering of items in flex containers
- flex layout (row/colum)
- visibility of elements
Visibility
You can hide elements on certain breakpoints.
| CSS Class | Result |
|---|---|
.hidden
|
Hides elements on all screen sizes. |
.hidden-xs-up
|
Same as .hidden. Hides elements on all screen sizes. |
.hidden-sm-up
|
Hides elements on screens with a width of 520px or more. |
.hidden-md-up
|
Hides elements on screens with a width of 680px or more. |
.hidden-lg-up
|
Hides elements on screens with a width of 880px or more. |
.hidden-xl-up
|
Hides elements on screens with a width of 1180px or more. |
.hidden-xs-down
|
Hides elements on screens with a width of 520px or less. |
.hidden-sm-down
|
Hides elements on screens with a width of 680px or less. |
.hidden-md-down
|
Hides elements on screens with a width of 880px or less. |
.hidden-lg-down
|
Hides elements on screens with a width of 1180px or less. |
Text Alignment
Text elements can have different alignments depending on a screen size.
Example #1: h1.text-center.text-sm-left.text-md-right.text-lg-center.text-xl-left
- On screens up to 519px the text will be center-aligned
- On screens 520px-679px the text will be left-aligned
- On screens 680px-879px the text will be right-aligned
- On screens 880px-1179px the text will be center-aligned
- On screens 1180px and larger the text will be left-aligned
Example #2: h1.text-md-center
- On screens up to 679px the text will be left-aligned (by default)
- On screens 680px and larger the text will be center-aligned
| CSS Class | Result |
|---|---|
.text-sm-{alignment}
|
Applied on screens with a width of 520px and larger |
.text-md-{alignment}
|
Applied on screens with a width of 680px and larger |
.text-lg-{alignment}
|
Applied on screens with a width of 880px and larger |
.text-xl-{alignment}
|
Applied on screens with a width of 1180px and larger |
Note, that classes with a larger breakpoint have a higher specificity. This means that if you have two classes (e.g. .text-sm-center and .text-lg-left) the latter will be applied on screens 880px and larger.
Margins & Paddings
In the following example the horizontal margins on a text element gradually increase from 0px to 24px as the screen size increases.
Example: h1.mx-sm-8.mx-md-16.mx-lg-24.mx-xl-40
- On screens up to 519px the horizontal margins will be 0px
- On screens 520px-679px the horizontal margins will be 8px
- On screens 680px-879px the horizontal margins will be 16px
- On screens 880px-1179px the horizontal margins will be 24px
- On screens 1180px and larger the horizontal margins will be 40px
The same rules can be applied to paddings.
Flex Layout
In the following example the flex layout changes from column to row.
Example #1: .d-flex.flex-column.flex-md-row
- On screens up to 679px the column layout is applied
- On screens 680px and larger the row layout is applied
In the following example the items are spread equally on small screens, and justified to the left side on larger screens.
Example #2: .d-flex.justify-content-around.justify-content-sm-start
- On screens up to 519px the items are spread equally
- On screens 520px and larger the items are justified to the left