Breakpoint fluid 0px to max width
Modifiers to use with the container class to add fluidity (width 100%) to each breakpoint starting from 0px to the breakpoint's max-width
Usage
To view functionality of the utility classes, open the examples below in a new window and adjust the browser view between the breakpoints.
Modifiers
| Modifier selector | Description |
|---|---|
container-fluid--sm |
Fluid container sm. 0px to 599.98px |
container-fluid--md |
Fluid container md. 0px to 767.98px |
container-fluid--lg |
Fluid container lg. 0px to 1022.98px |
container-fluid--xl |
Fluid container xl. 0px to 1198.98px |
Non fluid container content
Fluid container content sm. 0px to 599.98px
Fluid container content md. 0px to 767.98px
Fluid container content lg. 0px to 1022.98px
Fluid container content xl. 0px to 1198.98px
grid\grid-max-width-breakpoints.hbs
<section class="grid-example">
<div class="container">
<div class="row">
<div class="col-12">
<div class="inner">Non fluid container content</div>
</div>
</div>
</div>
<br>
<div class="container container-fluid--sm">
<div class="row">
<div class="col-12">
<div class="inner">Fluid container content sm. 0px to 599.98px</div>
</div>
</div>
</div>
<br>
<div class="container container-fluid--md">
<div class="row">
<div class="col-12">
<div class="inner">Fluid container content md. 0px to 767.98px</div>
</div>
</div>
</div>
<br>
<div class="container container-fluid--lg">
<div class="row">
<div class="col-12">
<div class="inner">Fluid container content lg. 0px to 1022.98px</div>
</div>
</div>
</div>
<br>
<div class="container container-fluid--xl">
<div class="row">
<div class="col-12">
<div class="inner">Fluid container content xl. 0px to 1198.98px</div>
</div>
</div>
</div>
</section>
Source:
components/_layout.scss