Specify the grids on all devices with just classes
The custom responsive grids can be used standalone or in combination with the autoresponsive grids. The idea is to use the same col system classes that have the autogrids but that will work only in custom devices. The name of the class is the same but including an acronym of the device. Check the following examples:
Device | Acronym | Class example |
---|---|---|
Mobile | s | .col-s-12 |
Phablet (Big mobile) | m | .col-m-12 |
Tablet | l | .col-l-12 |
Regular desktop | xl | .col-xl-12 |
Large desktop | xxl | .col-xxl-12 |
Wide screen desktop | xxxl | .col-xxxl-12 |
Check the following example to a better understanding:
<div class="row">
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
1
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
2
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
3
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
4
</div>
</div>
</div>
<div class="row _start">
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
1
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
2
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
3
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
4
</div>
</div>
</div>
<div class="row _end">
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
1
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
2
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
3
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
4
</div>
</div>
</div>
<div class="row _around">
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
1
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
2
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
3
</div>
</div>
<div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
<div class="box">
4
</div>
</div>
</div>