Standard-Layout in Bootstrap

Standard-Layout in Bootstrap zum Ausprobieren und Weiterverwenden

Im folgenden Beispiel wird ein einfaches 2-spaltiges mit Bootstrap dargestellt.

Es wird zunächst ein Container erzeugt und daran eine Zeile angelegt. Daran werden dann 2 Div-Boxen über 2 bzw. 8 Spalten aufgespannt.

Ideal geeignet, um einen Contentbereich und eine Navigationsbox darzustellen.

Frage stellen
Hast du eine Frage zu dieser Seite?
Fragen anderer Besucher zum Thema "Standard-Layout in Bootstrap..."

gromheisei fragt

hallo, wie bekomm ich einen inhalt in die rasterzeile, ? danke.

Antwort von BootstrapWorld.de

Hallo gromheisi,

du benötigst zunächst einmal ein div-Element mit container Klasse, dort hinein kommt dann ein div-Element mit Klasse row, welches für die Rasterzeile zuständig ist (row = Zeile).
Jetzt hast du schon dein Grundgerüst für das Raster und musst lediglich noch festlegen, wie breit deine Rasterzeile sein soll. Das machsts du mit den Klassen col-md-XXX, wobei XXX eine Zahl zwischen 1- 12 sein kann, denn das Raster ist in 12 gleich große Spalten ausgeteilt.

Möchtest du also eine Rasterzeile über die komplette Breite habe, gibst du als Klasse col-md-12 an.
Eine halbe Rasterzeile erreichst du mit col-md-6.

Am Beispiel sieht das so aus:

<div  class="container">  

    <div  class="row">      
        <div  class="col-md-12">Hier ist die erste Rasterzeile über die komplette Breite.</div>  
    </div>

    <div  class="row">     
        <div  class="col-md-6">Diese Rasterzeile geht nur bis zur Hälfte.</div>   
        <div  class="col-md-6">Diese Rasterzeile geht nur bis zur Hälfte.</div>
    </div>

</div>

Ich hoffe, ich konnte dir damit helfen :-)

Wenn noch etwas unklar ist, bitte fragen.

Viele Grüße

Andreas

Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK