Container

Preview:

Configuration:

Output:

Vue component

            
<Grid>
    <GridItem v-bind:size="{ xs: ?, sm: ?, md: ?, lg: ?, xl: ? }"></GridItem>
    <GridItem v-bind:size="{ xs: ?, sm: ?, md: ?, lg: ?, xl: ? }"></GridItem>
</Grid>
            
        

Raw HTML

            
<div class="row">
    <div class="col-xs-? col-sm-? col-md-? col-lg-? col-xl-?"></div>
    <div class="col-xs-? col-sm-? col-md-? col-lg-? col-xl-?"></div>
</div>
            
        

Comments

We usually use a 12-column-grid, but this can be changed in the "_variables-sass.scss"

$grid-size: 12;
$grid-gutter-width: 2rem;

If you choose to use a 24-column-grid, just change the $grid-size to 24 - and you can now use fx. "col-sm-18".