5 slopců pomocí bootstrapu

V tomto případě rozdělení řádku do 5-ti stejných sloupců. Tedy velmi jednoduchý úkon, ale s tím bootstrap úplně nepočítal. Tedy lze to udělat pomocí odsazení:

<div class="row">
    <div class="col-md-2 col-md-offset-1">20%</div>
    <div class="col-md-2">20%</div>
    <div class="col-md-2">20%</div>
    <div class="col-md-2">20%</div>
    <div class="col-md-2">20%</div>
</div>

Při tomto řešení se ale nevyužije 100% šířka, tedy se vlastně nejedná o rozložení po 20%, ale nějakých 17%.

Pokud chceme využít opravdu 100% stránky, tak je třeba upravit css styly bootstrapu.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

I toto řešení má své nevýhody. Jelikož pracujete s responsibilním designem, tak lichý počet prostě nikdy neposkládáte jinak než do řádku, což může být problém u mobilních zařízení.