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. Qu’est-ce que Bootstrap ?

A Un langage de programmation

B Une bibliothèque JavaScript

C Un outil de gestion de base de données

D Un framework CSS

2. Quel fichier est essentiel pour utiliser Bootstrap dans un projet ?

A bootstrap.css

B bootstrap.js

C bootstrap.min.css

D index.html

3. Quel est l’objectif principal de Bootstrap ?

A Fournir une bibliothèque JavaScript pour l’animation

B Créer un design responsive et mobile-first pour les sites web

C Gérer les bases de données des sites web

D Ajouter des effets de transition CSS aux pages web

4. Dans le système de grille de Bootstrap, quelle est la largeur d’une colonne « col-md-6 » ?

A 4 colonnes

B 6 colonnes

C 12 colonnes

D 50% de la largeur du conteneur

D

Le système de grille de Bootstrap est basé sur 12 colonnes. La classe col-md-6 signifie que la colonne occupe 6 colonnes sur 12, soit 50% de la largeur du conteneur sur les écrans de taille moyenne et plus grande.
 

 

5. Comment créer une grille responsive avec Bootstrap ?

A En utilisant la classe .container

B En utilisant la classe .row et .col-*

C En utilisant la classe .grid

D En utilisant la classe .box

B

Bootstrap utilise un système de grille basé sur des lignes (.row) et des colonnes (.col-*). Les colonnes peuvent être redimensionnées automatiquement en fonction de la taille de l’écran, ce qui rend le design responsive. Par exemple, .col-md-4 définit une colonne qui prend 4 colonnes sur un écran moyen. Exemple:

<div class="container">
  <div class="row">
    <div class="col-md-4" style="background-color: lightblue; padding: 20px;">
      Colonne 1 (4 colonnes)
    </div>
    <div class="col-md-4" style="background-color: lightgreen; padding: 20px;">
      Colonne 2 (4 colonnes)
    </div>
    <div class="col-md-4" style="background-color: lightcoral; padding: 20px;">
      Colonne 3 (4 colonnes)
    </div>
  </div>
</div>

Résultat:

 

6. Quelle classe Bootstrap permet d’ajouter des boutons avec un style ?

A .btn

B .button

C .btn-style

D .btn-class

A

La classe .btn de Bootstrap permet de créer des boutons stylisés. Vous pouvez également ajouter des classes supplémentaires pour modifier la couleur ou le type du bouton, comme .btn-primary, .btn-success, etc. Exemple:

<button class="btn btn-primary">Bouton</button>

 

7. Quelle classe Bootstrap utilise-t-on pour ajouter une marge supérieure (top margin) de 3 unités ?

A mt-3

B ml-3

C m-3

D margin-top-3

A

Bootstrap utilise des classes utilitaires pour ajouter des espacements. La classe mt-3 est utilisée pour ajouter une marge supérieure de taille moyenne. Le préfixe m désigne la marge et t signifie « top ».
 

 

8. Quelle classe Bootstrap permet de créer un bouton avec une couleur primaire ?

B btn-primary

C btn-success

D btn-info

B

La classe btn-primary permet de créer un bouton avec la couleur primaire définie par la palette de Bootstrap (généralement bleu).
 

 

9. Quel composant Bootstrap permet d’afficher un message de notification temporaire ?

B Modal

C Tooltip

D Toast

D

Le composant Toast de Bootstrap permet d’afficher des notifications temporaires et non intrusives sur la page. Les « toasts » disparaissent après un certain temps ou lorsque l’utilisateur interagit avec eux.
 

 

10. Quelle classe Bootstrap est utilisée pour rendre un élément centré verticalement et horizontalement ?

B .text-center

C .d-flex et .justify-content-center

D .center

<div class="d-flex justify-content-center align-items-center">
    <p>Texte centré</p>
</div>

11. Quelle classe permet d’afficher un élément seulement sur les écrans moyens et plus grands ?

A .d-none

B .d-md-block

C .d-lg-none

D .d-md-none

12. Quelle classe Bootstrap permet d’activer le modèle Flexbox pour un élément ?

A d-flex

B flex-item

C flexbox

D display-flex

13. Quelle classe Bootstrap est utilisée pour rendre une barre de navigation (navbar) fixe en haut de la page ?

A navbar-fixed

B navbar-sticky-top

C navbar-fixed-top

D navbar-static-top

C

La classe navbar-fixed-top permet de rendre la barre de navigation fixe en haut de la page. Cela fait en sorte que la navbar reste visible même lorsque l’utilisateur fait défiler la page.
 

 

14. Quelle classe est utilisée pour créer une carte dans Bootstrap ?

A card

B container-card

C box-card

D panel-card

A

La classe card de Bootstrap permet de créer des éléments de type « carte », qui peuvent contenir des images, des titres, du texte, et d’autres composants.
 

 

15. Quelle classe permet de rendre un texte en gras avec Bootstrap ?

A .font-weight-bold

B .text-bold

C .strong-text

D .bold

L’article QCM sur Bootstrap – Partie 1 est apparu en premier sur WayToLearnX.