Imbriquer des lignes

On a vu qu'il est possible d'imbriquer des lignes pour enrichier la mise en page. Il ets très facile de réaliser cela :

Premier niveau avec 12 colonnes

.col-md-12

Second niveau avec 6 colonnes

.col-md-6

Second niveau avec 6 colonnes

.col-md-6

Le code correspondant est celui-ci :

<div class="row">
  <div class="col-md-12"> ...
	<div class="row">
	  <div class="col-md-6"> ... </div>
	  <div class="col-md-6"> ... </div>
	</div>
  </div>
</div>

Les imbrications peuvent s'enchaîner :

Premier niveau avec 12 colonnes

.col-md-12

Second niveau avec 8 colonnes

.col-md-8

Troisième niveau avec 4 colonnes

.col-md-4

Troisième niveau avec 6 colonnes

.col-md-6

Quatrième niveau avec 3 colonnes

.col-md-3

offset-1

Quatrième niveau avec 5 colonnes

.col-md-5

offset-1

Second niveau avec 4 colonnes

.col-md-4

Le code correspondant est celui-ci :

<div class="row">
  <div class="col-md-12"> ...
	<div class="row">
	  <div class="col-md-8"> ...
		<div class="row">
		  <div class="col-md-4"> ... </div>
		  <div class="col-md-6 col-md-offset-2"> ...
			<div class="row">
			  <div class="col-md-3 col-md-offset-1"> ... </div>
			  <div class="col-md-5 col-md-offset-1"> ... </div>
			</div>
		  </div>
		</div>
	  </div>
	  <div class="col-md-4"> ... </div>
	</div>
  </div>
</div>

Bootstrap mise en page

Imbriquer des lignes

.col-md-12

.col-md-6

.col-md-6

.col-md-12

.col-md-8

.col-md-4

.col-md-6

.col-md-3

offset-1

.col-md-5

offset-1

.col-md-4