Created by: voltel
I suggest a feature that I'm unaware of in bootstrap but I found useful working with w3.css. It's a grid class .w3-rest which helps a column take the remaining space in a row.
For example instead of class="col-sm-9 col-lg-10" as in:
<div class="row container">
<figure class="col-sm-3 col-lg-2">
<a href="index.php"><img src="../img/image.png" </a>
</figure>
<div class="col-sm-9 col-lg-10">
<h1><span>Big Heading</span></h1>
</div><!-- .col-*-* -->
</div><!-- .row -->
one could write a bit simpler version of class="col-rest" as in:
<div class="row container">
<figure class="col-sm-3 col-lg-2">
<a href="index.php"><img src="../img/image.png" </a>
</figure>
<div class="col-rest">
<h1><span>Big Heading</span></h1>
</div><!-- .col-rest -->
</div><!-- .row -->
with .col-rest css rules is my_styles.scss file:
/* location of mixin after installation with Composer */
@import "../vendor/twbs/bootstrap/scss/mixins/_grid.scss";
/* w3 hack for containers with floating elements *inside* OR/AND to the *left/right* */
.col-rest {
overflow: hidden;
@include make-container(); /* provide the same padding as in col-*-* classes */
}
which after compilation resulted in:
col-rest::after {
clear: both;
content: "";
display: table;
}
.col-rest {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-left: 15px;
padding-right: 15px;
}