Breakpoint fluid min to max width
Modifiers to use with the container class to add fluidity (width 100%) between each grid breakpoint's min and max widths only.
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--only-sm |
Fluid container sm only. 0px to 599.98px |
container-fluid--only-md |
Fluid container md only. 600px to 767.98px |
container-fluid--only-lg |
Fluid container lg only. 768px to 1022.98px |
container-fluid--only-xl |
Fluid container xl only. 1023px to 1198.98px |
Non fluid container content
Fluid container content sm only. 0px to 599.98px
Fluid container content md only. 600px to 767.98px
Fluid container content lg only. 768px to 1022.98px
Fluid container content xl only. 1023px to 1198.98px
grid\grid-breakpoint-min-max-only.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--only-sm">
<div class="row">
<div class="col-12">
<div class="inner">Fluid container content sm only. 0px to 599.98px</div>
</div>
</div>
</div>
<br>
<div class="container container-fluid--only-md">
<div class="row">
<div class="col-12">
<div class="inner">Fluid container content md only. 600px to 767.98px</div>
</div>
</div>
</div>
<br>
<div class="container container-fluid--only-lg">
<div class="row">
<div class="col-12">
<div class="inner">Fluid container content lg only. 768px to 1022.98px</div>
</div>
</div>
</div>
<br>
<div class="container container-fluid--only-xl">
<div class="row">
<div class="col-12">
<div class="inner">Fluid container content xl only. 1023px to 1198.98px</div>
</div>
</div>
</div>
</section>
Source:
components/_layout.scss