V4 grid classes

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;
}