Kort om Bootstraps rader och kolumner

En kortfattad beskrivning om varför och hur man använder sig av Bootstraps rader och kolumner för grafisk struktur

Vad är Bootstrap?

Bootstrap är kort och gott ett trevligt ramverk som gör det enkelt för dig som webbutvecklare att skapa grafisk struktur på din hemsida. Det finns några enkla knep att ta till för att du snabbt skall få en struktur på din hemsida som även är responsiv och anpassar sig efter bredden på din hemsida, dvs. vilken enhet användaren har.

Kom igång med Bootstrap

De flesta hemsidor innehåller kort och gott en header, body och footer i övergripande struktur. För att du skall komma igång med Bootstrap så skall jag beskriva hur du enkelt kan börja.

Börja med att inkludera det senaste Bootstrap-biblioteket från https://www.bootstrapcdn.com vilket du för version 4.3.1 gör enklast genom att klistra in följande text mellan din hemsidas head-taggar:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>

När dessa är inkluderade på din hemsida så kan du enkelt skapa responsiva div:ar på din sida genom t.ex. följande kod:
<div class="row">
    <div class="col-12">
        Denna div täcker en hel rad
    </div>
    <div class="col-4">
        Denna div täcker 1/3 av en rad
    </div>
    <div class="col-8">
        Denna div täcker 2/3 av en rad
    </div>
</div>

Här nedanför ser du ett färgkodat exempel på hur kodan ovan ser ut.

Denna div täcker en hel rad
Denna div täcker 1/3 av en rad
Denna div täcker 2/3 av en rad

Som du ser så sätts klasserna row, col-12, col-4 samt col-8. För att hålla det kort så delar man upp bredden av en div som har klassen row i tolftedelar, därav betyder det att om en div i rad-div:en har klassen col-12 angiven så skall den täcka hela bredden av raden. På liknande sätt så betyder det att om en div i raden har bredden col-4 så kommer den att täcka 4 tolftedelar av raden, dvs. en tredjedel, osv. Vad betyder då col-8? Kanske kan du gissa det. Säg att du vill ha samma storlek på div:arna som i exemplet ovan men om skärmstorleken är liten (t.ex. att hemsidan visas på en mobiltelefon) så skall alla div:ar täcka en hel rad så gör du detta enkelt genom att lägga till följande i div:arnas klasser:

<div class="row">
    <div class="col-12">
        Denna div täcker en hel rad
   </div>
   <div class="col-12 col-sm-4">
        Denna div täcker 1/3 av en rad om skärmen än stor, annars en hel rad
   </div>
   <div class="col-12 col-sm-8">
        Denna div täcker 2/3 av en rad om skärmen än stor, annars en hel rad
   </div>
</div>

Du ser exemplets betéende här nedan enklast genom att minska och förstora webbläsarens fönster:

Denna div täcker en hel rad
Denna div täcker 1/3 av en rad om skärmen än stor, annars en hel rad
Denna div täcker 2/3 av en rad om skärmen än stor, annars en hel rad

Om du gillade inlägget, dela gärna!

Adress till artikeln

https://www.autokod.net/blog/kort-om-bootstraps-rader-och-kolumner

2019-07-23