QCM sur Bootstrap – Partie 3

Vous souhaitez évaluer vos compétences en Bootstrap, le framework CSS le plus utilisé pour créer des sites web réactifs et modernes ? Dans cet article, nous vous proposons un QCM sur Bootstrap pour tester vos connaissances et vous perfectionner dans l’utilisation de ce puissant outil. Que vous soyez débutant ou développeur expérimenté, ce quiz vous aidera à mieux comprendre les concepts clés de Bootstrap, de la grille responsive aux composants avancés. Préparez-vous à améliorer vos compétences en développement web et à maîtriser Bootstrap grâce à ce QCM interactif !
 
 

1. Quelle classe Bootstrap est utilisée pour centrer un élément verticalement ?

B

C

D

A

La classe

.align-items-center

.align-items-center fait partie du système de flexbox de Bootstrap. Elle permet de centrer verticalement les éléments dans un conteneur en utilisant la propriété

align-items: center

align-items: center. Cela fonctionne sur les éléments enfants d’un conteneur avec la classe

.d-flex

.d-flex.
 

 

2. Quelle classe Bootstrap est utilisée pour masquer un élément uniquement sur les écrans larges ?

A

B

C

D

3. Quelle classe Bootstrap est utilisée pour appliquer une bordure arrondie à un élément ?

B

C

D

D

La classe

.rounded

.rounded de Bootstrap permet d’appliquer une bordure arrondie à un élément. Vous pouvez l’utiliser pour des éléments comme des images, des boutons ou des cartes. Il existe aussi des variantes comme

.rounded-circle

.rounded-circle pour des bordures complètement circulaires ou

.rounded-pill

.rounded-pill pour des bords très arrondis. Exemple:

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

<div class="container mt-5">

<div class="p-3 border rounded">

<h2>Exemple avec bordure arrondie</h2>

<p>Ceci est un exemple d'un élément avec une bordure arrondie appliquée à l'aide de la classe .rounded.</p>

</div>

</div>

<div class="container mt-5"> <div class="p-3 border rounded"> <h2>Exemple avec bordure arrondie</h2> <p>Ceci est un exemple d'un élément avec une bordure arrondie appliquée à l'aide de la classe .rounded.</p> </div> </div>

<div class="container mt-5">  
  <div class="p-3 border rounded">    
    <h2>Exemple avec bordure arrondie</h2>    
    <p>Ceci est un exemple d'un élément avec une bordure arrondie appliquée à l'aide de la classe .rounded.</p>  
  </div>
</div>

Résultat:

 

4. Quelle classe Bootstrap est utilisée pour rendre un élément invisible sans le retirer du flux de la page ?

A

B

C

D

5. Quelle classe Bootstrap est utilisée pour définir une largeur de 100% sur un élément ?

A

B

C

D

6. Quelle classe Bootstrap est utilisée pour ajouter une ombre portée à un élément ?

B

C

D

C

La classe

.shadow

.shadow est utilisée pour ajouter une ombre portée légère à un élément. Bootstrap offre également d’autres variantes comme

.shadow-sm

.shadow-sm (ombre plus petite) et

.shadow-lg

.shadow-lg (ombre plus grande) pour personnaliser l’effet Exemple:

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

<div class="container mt-5">

<div class="p-5 bg-light border shadow">

<h2>Exemple avec une ombre portée</h2>

<p>Cette boîte a une ombre portée grâce à la classe .shadow de Bootstrap.</p>

</div>

</div>

<div class="container mt-5"> <div class="p-5 bg-light border shadow"> <h2>Exemple avec une ombre portée</h2> <p>Cette boîte a une ombre portée grâce à la classe .shadow de Bootstrap.</p> </div> </div>

<div class="container mt-5">   
  <div class="p-5 bg-light border shadow">     
    <h2>Exemple avec une ombre portée</h2>     
    <p>Cette boîte a une ombre portée grâce à la classe .shadow de Bootstrap.</p>   
  </div> 
</div>

Résultat:

 

7. Quelle classe Bootstrap est utilisée pour créer un bouton qui change de couleur lorsque l’on survole ?

B

C

D

8. Quelle est la classe Bootstrap utilisée pour définir la hauteur d’un élément à 100vh (la hauteur de la fenêtre) ?

A

B

C

D

9. Quel composant de Bootstrap permet de créer un carrousel d’images ?

B

C

D

10. Quelle classe Bootstrap est utilisée pour appliquer un espacement à gauche d’un élément ?

A

B

C

D