Sommaire

Les blocs décalés GRILLE ADAPTATIVE:Blocs décalés

1. La syntaxe pour une boîte

Bootstrap vous permet de décaler des blocs sur la grille. Pour ce faire, utilisez le suffixe de classe .offset.

Nous voulons placer un bloc sur trois colonnes avec un décalage de quatre colonnes :

images/C09-023.png

Pour cette boîte, voilà la syntaxe à utiliser : <div class="col-md-3 col-md-offset-3"><p>...</p></div>.

L’affichage obtenu :

images/C09-024.png

2. La syntaxe pour plusieurs boîtes

Voyons maintenant un exemple avec plusieurs blocs.

images/C09-025.png

Voici le code à utiliser :

<!DOCTYPE html> 
<html lang="fr"> 
<head> 
   <title>Mon site avec Bootstrap</title> 
   <meta charset="UTF-8" /> 
   <meta name="viewport" content="width=device-width, 
initial-scale=1.0"> 
   <!-- Liaisons aux fichiers css de Bootstrap --> 
   <link href="dist/css/bootstrap.min.css" rel="stylesheet" /> 
   <link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" /> 
   <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and
media queries --> 
   <!--[if lt IE 9]> 
     <script src="assets/js/html5shiv.js"></script> 
     <script src="assets/js/respond.min.js"></script> 
   <![endif]--> 
   <style> 
   ...