Grids

<!-- 50%/50% split på extra små enheter och 75%/25% split på större enheter -->
<div class="row">
    <!-- Denna kolumn tar upp 50% av bredden på extra små enheter och 75% på större enheter -->
    <div class="col-6 col-sm-9 bg-success=">col-6 col-sm-9 bg</div>
    <!-- Denna kolumn tar upp 50% av bredden på extra små enheter och 25% på större enheter -->
    <div class="col-6 col-sm-3 bg-warning">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split på extra små, små och medelstora enheter och 66.3%/33.3% split på stora och extra stora enheter -->
<div class="row">
    <!-- Denna kolumn tar upp 58% av bredden på extra små, små och medelstora enheter och 66.3% på stora och extra stora enheter -->
    <div class="col-7 col-lg-8 bg-success">col-7 col-lg-8</div>
    <!-- Denna kolumn tar upp 42% av bredden på extra små, små och medelstora enheter och 33.3% på stora och extra stora enheter -->
    <div class="col-5 col-lg-4 bg-warning">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split på små enheter, 50%/50% split på medelstora enheter och 33%/66% split på stora och extra stora enheter. På extra små enheter staplas kolumnerna automatiskt (100%) -->
<div class="row">
    <!-- Denna kolumn tar upp 25% av bredden på små enheter, 50% på medelstora enheter och 33% på stora och extra stora enheter -->
    <div class="col-sm-3 col-md-6 col-lg-4 bg-success">col-sm-3 col-md-6 col-lg-4</div>
    <!-- Denna kolumn tar upp 75% av bredden på små enheter, 50% på medelstora enheter och 66% på stora och extra stora enheter -->
    <div class="col-sm-9 col-md-6 col-lg-8 bg-warning">col-sm-9 col-md-6 col-lg-8</div>
</div>

Grids exempel

Bootstrap's grid system is built with flexbox, uses a series rows, and columns to layout and align content. Allows up to 12 columns across the page. Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

col-6 col-sm-9 bg

col-6 col-sm-3

col-7 col-lg-8

col-5 col-lg-4

col-sm-3 col-md-6 col-lg-4

col-sm-9 col-md-6 col-lg-8