12-kolonneoppsett

Bootstraps rutenettsystem deler siden inn i 12 kolonner, noe som gir en fleksibel og responsiv oppsettstruktur. Dette gjør det mulig for utviklere å lage visuelt tiltalende og velstrukturerte design som tilpasser seg sømløst til ulike skjermstørrelser og enheter.

Rutenettklasser

• container: Klassen container omslutter og sentrerer innholdet innenfor en container med fast bredde. Den gir polstring, marg og sikrer korrekt justering av innholdet;
• row: Klassen row oppretter en horisontal gruppe med kolonner. Den fungerer som en beholder for kolonner og sikrer korrekt justering og avstand mellom dem;
• col: Kolonner innenfor en rad defineres ved å bruke klassen col. Utviklere angir bredden på kolonnene ved å bruke col-klasser som col-6, col-md-4 eller col-lg-3.

Responsivt design

Bootstraps rutenettsystem er utformet for å være responsivt, slik at innholdet tilpasser seg dynamisk basert på visningsstørrelse og enhetstype. Utviklere kan bruke responsive rutenettklasser som col-md-6 eller col-lg-4 for å angi kolonnebredder for ulike skjermstørrelser, som mellomstore eller store enheter.

Merk

I Bootstrap representerer klassene sm, md, lg og xl ulike skjermstørrelser

Eksempler

Eksempel 1: Grunnleggende rutenettoppsett

I dette eksemplet har vi en beholder med én rad som inneholder tre kolonner med lik bredde. Hver kolonne tar opp en lik del av radens bredde, noe som gir et horisontalt oppsett med tre kolonner.

Eksempel 2: Responsivt rutenettoppsett

I dette eksemplet har en beholder én rad med tre kolonner. De to første kolonnene (col-md-6) er satt til å oppta halvparten av radens bredde på mellomstore skjermer og større. Den tredje kolonnen (col-md-12) er satt til å oppta hele radens bredde på mellomstore skjermer og større. Dette sikrer at den tredje kolonnen opptar hele radens bredde.

Resultatet av den responsive gridens oppførsel