Découpez et intégrez une maquette

La grille de Bootstrap est, comme nous l’avons vu précédemment, composée de 12 colonnes. Les colonnes sont contenues dans des rangées (row) qui elles-mêmes sont encadrées par une grande <div class=”container”>. Chaque colonne ayant une largeur relative, exprimée en pourcentage, il est primordial de les englober dans une div qui ait une largeur fixe exprimée en pixels.

 En reprenant notre maquette, nous pouvons voir que la largeur de la grille est de 1230 px. Or le container de Bootstrap a une largeur de 1170 px en version Ordinateur (desktop).

Notre première mission va être de changer la largeur du container pour qu’il soit en adéquation avec notre maquette. Les colonnes s’adapteront automatiquement.

La première étape est de cibler le sélecteur dont nous voulons changer la valeur. Nous allons utiliser l’inspecteur de notre navigateur pour trouver le sélecteur à changer. Pas besoin de connaître toutes les classes de Bootstrap par coeur ! Il vous suffit de bien savoir utiliser votre inspecteur.

Cliquez-droit sur une des colonnes de votre page puis cliquez sur Inspecter l’élément. A gauche, sélectionnez la div qui a la classe “container”. Puis regardez, dans la colonne de droite dédiée au CSS, quelle valeur fait référence à la largeur de l’élément.

La règle qui nous intéresse est “max-width”. Cette règle donne une largeur maximale à l’élément mais lui permet également d’avoir une largeur inférieure si l’écran le demande, elle est donc assez flexible. 

Nous allons donc copier le sélecteur et la règle pour en changer uniquement la valeur.

/*##################################*/
/*############# GRILLE #############*/
/*#################################*/

 .container {
   width: 1230px;
 }

En lisant bien, vous remarquerez que des tailles d’écran apparaissent dans votre inspecteur. Elles sont identiques aux breaking-points utilisés par Bootstrap pour changer l’affichage de la grille.

Vous remarquerez aussi que la règle “max-width” se répète en dessous et adopte une valeur différente en fonction des tailles d’écran. Ces valeurs sont d’ailleurs barrées, la seule en vigueur étant celle qui se trouve tout en haut.

C’est normal. Votre navigateur a reconnu que sa largeur était supérieure à 1200px. Il a donc appliqué la règle qui s’applique à cette taille d’écran et écarté celles qui correspondent à d’autres largeurs.

Etant donné que nous voulons que le container ait une largeur de 1230px uniquement en version desktop, il va nous falloir cibler tous les écrans qui ont une largeur égale ou supérieure à 1200 px. Comment ferons-nous ?

Nous allons utiliser une media-query. Si le terme ne vous évoque rien c’est le moment de le découvrir !

La définition de Mozilla est assez parlante :

“Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même.”

Mozilla lab

Concrètement, une media query fonctionne de cette manière :

• Le navigateur détecte la largeur de la page,

• il cherche les media-queries qui correspondent à cette largeur,

• il exécute les règles contenues dans les media-queries correspondantes.

Exemple de media-query :

/*##################################*/
/*############# GRILLE #############*/
/*#################################*/

@media (min-width: 1200px) {
 .container {
   width: 1230px;
 }
}

Sauvez le document et rechargez votre page. Vous devriez constater que la largeur du container est plus grande. Bravo !

.pink {
    background-color: #f5989d;
}

.blue {
    background-color: #615f7d;
}

.green {
    background-color: #09a298;
}

       <div class="container">

         <div class="row">

           <div class="col-md-4 pink">

             <h1>Design quality</h1>

             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

             <a href="">Find Out More   <i class="fa fa-long-arrow-right"></i></a>

           </div>

           <div class="col-md-7">

             <img src="img/phone.svg">

           </div>

         </div>

       </div>