❌

Vue normale

Reçu avant avant-hier

QCM sur Bootstrap – Partie 1

✇WayToLearnX
Par :Thomas
6 mars 2025 à 18:12

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

D
Bootstrap est un framework CSS populaire qui permet de concevoir des sites web responsives (adaptables aux écrans de différentes tailles). Il offre des styles et des composants prêts à l’emploi pour simplifier la création de sites web modernes.

 

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

A bootstrap.css

B bootstrap.js

C bootstrap.min.css

D index.html

C
Le fichier bootstrap.min.css contient toutes les règles CSS minimisées et est utilisé pour appliquer le style de Bootstrap à votre projet. Vous pouvez également utiliser la version non minimisée (bootstrap.css), mais la version minifiée est plus légère et donc plus rapide à charger.

 

 
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

B
Bootstrap est un framework CSS populaire, utilisé pour développer des sites web responsive. Il propose des outils et des composants pour créer des interfaces utilisateur adaptées à différentes tailles d’écran.

 

 
 
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 ?


A btn-default

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 ?


A Alert

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 ?


A .align-center

B .text-center

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

D .center

C
Pour centrer un élément à la fois verticalement et horizontalement avec Bootstrap, vous pouvez utiliser la classe .d-flex pour activer le mode flexbox, puis utiliser .justify-content-center pour centrer horizontalement et .align-items-center pour centrer verticalement. Exemple : 
<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

B
La classe .d-md-block permet d’afficher un élément seulement sur les écrans moyens (≥ 768px) et plus grands. Les classes d-*-none et d-*-block sont utilisées pour contrôler la visibilité en fonction de la taille de l’écran.

 

 
 
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

A
La classe d-flex de Bootstrap applique le modèle Flexbox à un élément, permettant un agencement flexible de ses enfants.

 

 
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

A
La classe .font-weight-bold est utilisée pour rendre le texte en gras. C’est une classe de Bootstrap qui modifie le poids de la police.

 

 

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

QCM sur Bootstrap – Partie 2

✇WayToLearnX
Par :Thomas
6 mars 2025 à 22:59

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 définir une couleur de fond ?

A .bg-primary

B .bg-color

C .background-color

D .color-bg

A
Dans Bootstrap, les classes de couleur de fond sont préfixées par .bg-. Par exemple, .bg-primary applique la couleur de fond primaire définie dans le thème Bootstrap. D’autres classes similaires existent pour d’autres couleurs, comme .bg-success ou .bg-danger.
 

 

 
2. Quelle classe Bootstrap est utilisée pour ajouter un espacement à droite d’un élément ?

A .mr-1

B .padding-right-1

C .space-right-1

D .pr-1

D
La classe .pr-1 applique un padding à droite de l’élément avec une taille correspondant à la valeur 1 de l’échelle de Bootstrap. L’abréviation « pr » signifie « padding-right », et les valeurs de l’échelle vont de 0 à 5, en augmentant de 0.25 rem à chaque fois.

 

 
3. Quelle est la classe Bootstrap utilisée pour aligner du texte au centre ?


A .text-align-center

B .text-center

C .center-text

D .align-text-center

B
La classe .text-center de Bootstrap est utilisée pour centrer le texte horizontalement à l’intérieur de son conteneur. Cette classe fait partie des utilitaires de typographie fournis par Bootstrap pour la gestion de l’alignement du texte.

 

 
 
4. Quel composant de Bootstrap permet de créer des menus déroulants ?

A .nav-dropdown

B .dropdown

C .menu

D .list-dropdown

B
Le composant .dropdown est utilisé pour créer un menu déroulant en Bootstrap. Il peut contenir des liens ou des boutons et s’affiche lorsque l’utilisateur interagit avec le composant (par exemple, en cliquant sur un bouton). Ce composant nécessite également l’utilisation de JavaScript pour afficher correctement le menu lorsqu’il est activé. Exemple: 
<div class="dropdown">       
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">         
    Dropdown bouton       
  </button>       
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">         
    <li><a class="dropdown-item" href="#">Action</a></li>         
    <li><a class="dropdown-item" href="#">Autre action</a></li>         
    <li><a class="dropdown-item" href="#">Quelque chose d'autre ici</a></li>       
  </ul>     
</div>

Résultat:

 

 
5. Quelle classe Bootstrap est utilisée pour créer un bouton de taille petite ?

A .btn-lg

B .btn-xs

C .btn-sm

D .btn-small

C
La classe .btn-sm est utilisée pour appliquer une taille petite à un bouton dans Bootstrap. Il existe également d’autres classes pour définir la taille des boutons, comme .btn-lg pour les boutons grands et .btn pour les boutons de taille par défaut.
 

 

 
6. Quelle classe Bootstrap est utilisée pour cacher un élément uniquement sur les écrans de petite taille ?

A .d-none

B .d-sm-none

C .hidden-sm

D .display-none-sm

B
La classe .d-sm-none cache un élément lorsque l’écran est de taille « small » (SM) ou inférieure (telles que les tablettes ou les téléphones mobiles). Les classes de visibilité en Bootstrap sont basées sur les tailles d’écran (par exemple, .d-md-none pour cacher un élément à partir de la taille « medium »).

 

 
 
7. Quelle classe Bootstrap permet de rendre un élément responsive en adaptant sa taille à l’écran ?

A .img-fluid

B .responsive-img

C .resize

D .img-responsive

A
La classe .img-fluid est utilisée pour rendre une image responsive, c’est-à-dire qu’elle s’ajuste automatiquement à la largeur de son conteneur tout en maintenant ses proportions. Cela permet à l’image de bien s’adapter aux différents types d’écrans.

 

 
8. Quelle classe Bootstrap est utilisée pour créer une barre de navigation horizontale ?

A .navbar

B .nav-horizontal

C .nav-bar

D .navigation-bar

A
La classe .navbar est utilisée pour créer une barre de navigation. Pour en faire une barre de navigation horizontale, vous pouvez également ajouter des classes supplémentaires comme .navbar-expand-lg pour qu’elle s’adapte à la taille de l’écran, ou .navbar-light pour les couleurs de fond et du texte.
 

 

 
9. Quelle classe Bootstrap est utilisée pour rendre une grille de colonnes ?

A .row

B .columns

C .grid

D .column

A
Dans le système de grille de Bootstrap, la classe .row est utilisée pour définir une ligne de colonnes. Ensuite, vous pouvez utiliser des classes comme .col- pour définir la taille des colonnes dans cette ligneExemple: 
<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:

 

 
 
10. Quelle est la classe Bootstrap utilisée pour créer un tableau avec des bordures ?

A .table-bordered

B .table-border

C .table-bordered-style

D .table-border-all

A
La classe .table-bordered est utilisée pour ajouter des bordures à un tableau dans Bootstrap. Elle applique des bordures autour de chaque cellule du tableau, ce qui améliore la lisibilité et la présentation des données. Exemple: 
<table class="table table-bordered">...</table>

Résultat:

 

 

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

QCM sur Bootstrap – Partie 3

✇WayToLearnX
Par :Thomas
7 mars 2025 à 03:07

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 ?


A .align-items-center

B .vertical-center

C .center-vertically

D .v-center

A
La classe .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. Cela fonctionne sur les éléments enfants d’un conteneur avec la classe .d-flex.
 

 

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

A .d-lg-none

B .d-xl-none

C .d-md-none

D .d-sm-none

A
La classe .d-lg-none permet de masquer un élément sur les écrans de taille large et au-delà (large, extra large). Elle utilise le système de classes de visibilité de Bootstrap, où vous pouvez masquer ou afficher un élément en fonction de la taille de l’écran.

 

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


A .round-border

B .border-radius

C .border-round

D .rounded

D
La classe .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 pour des bordures complètement circulaires ou .rounded-pill pour des bords très arrondis. Exemple: 
<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 .invisible

B .hidden

C .d-none

D .visibility-hidden

A
La classe .invisible rend un élément invisible, mais il reste dans le flux du document, ce qui signifie qu’il occupe toujours de l’espace. La classe .d-none (qui cache complètement l’élément et le retire du flux) est différente de celle-ci.

 

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

A .full-width

B .w-100

C .width-100

D .width-full

B
La classe .w-100 permet de définir la largeur d’un élément à 100 % de la largeur de son conteneur parent. C’est une classe utilitaire très pratique pour créer des éléments réactifs.

 

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


A .shadow-lg

B .box-shadow

C .shadow

D .drop-shadow

C
La classe .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 (ombre plus petite) et .shadow-lg (ombre plus grande) pour personnaliser l’effet Exemple: 
<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 ?


A .btn-hover

B .btn-outline-primary

C .btn-primary

D .btn-active

B
La classe .btn-outline-primary est un type de bouton qui n’a pas de fond par défaut. Lorsqu’on survole ce bouton, sa couleur de fond change en fonction du thème de couleur primaire (généralement défini dans le CSS de Bootstrap).

 

 
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 .h-100

B .vh-100

C .height-100

D .full-height

B
La classe .vh-100 définit la hauteur d’un élément à 100 % de la hauteur de la fenêtre d’affichage (viewport). C’est une unité pratique pour rendre des éléments qui couvrent toute la hauteur de l’écran.

 

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


A .carousel

B .image-slider

C .image-carousel

D .slider

A
Le composant .carousel est utilisé pour créer un carrousel d’images ou de contenu en Bootstrap. Il permet de faire défiler des éléments, généralement des images, automatiquement ou manuellement.

 

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

A .ml-1

B .pl-1

C .space-left-1

D .ml-1px

A
La classe .ml-1 applique un margin à gauche de l’élément avec une valeur correspondant à la première unité de l’échelle de marges de Bootstrap. La classe .ml est l’abréviation de « margin-left ». Il existe également des variantes comme .ml-2, .ml-3, etc., pour ajuster l’espacement.

 

 

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

QCM sur Bootstrap – Partie 4

✇WayToLearnX
Par :Thomas
7 mars 2025 à 04:09

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 permet d’empêcher un élément de se redimensionner ?

A .resize-none

B .resize-off

C .no-resize

D .resize

A
La classe .resize-none est utilisée pour empêcher un élément de se redimensionner, notamment les éléments de type textarea. Cela désactive la fonctionnalité de redimensionnement par l’utilisateur.
 

 

 
2. Quelle classe Bootstrap permet de définir une couleur de texte blanche ?

A .text-light

B .white-text

C .text-white

D .color-white

C
La classe .text-white est utilisée pour définir la couleur du texte en blanc. Bootstrap fournit de nombreuses classes utilitaires pour modifier la couleur du texte (par exemple, .text-primary, .text-success, etc.).
 

 

 
3. Quelle classe Bootstrap est utilisée pour appliquer un padding sur tous les côtés d’un élément ?

A .p-3

B .padding-all-3

C .pad-3

D .padding-3

A
La classe .p-3 applique un padding de taille 3 sur tous les côtés de l’élément (haut, droite, bas, gauche). Il existe des classes similaires pour définir des padding spécifiques pour chaque côté (par exemple, .pt-3 pour le padding en haut(top)).

 

 
 
4. Quelle classe Bootstrap permet de faire un alignement horizontal de contenu ?


A .align-center

B .center-align

C .justify-content-center

D .horizontal-align

C
La classe .justify-content-center fait partie du système Flexbox de Bootstrap et permet de centrer horizontalement les éléments à l’intérieur d’un conteneur. Elle est souvent utilisée avec la classe .d-flex pour activer le modèle de disposition Flexbox.

 

 
5. Quelle classe Bootstrap permet de définir un tableau avec des rangées alternées colorées ?


A .table-alternate

B .table-striped

C .table-hover

D .table-color

B
La classe .table-striped est utilisée pour ajouter des bandes de couleur alternées sur les lignes d’un tableau, ce qui améliore la lisibilité. Vous pouvez l’ajouter à un tableau en utilisant class="table table-striped".

 

 
6. Quelle classe Bootstrap est utilisée pour créer une barre de progression ?


A .progress-bar

B .progress

C .progress-bar-striped

D .bar-progress

B
La classe .progress est utilisée pour créer une barre de progression de base. Vous pouvez également ajouter des classes comme .progress-bar pour représenter la progression réelle et .progress-bar-striped pour ajouter des bandes animées à la barre.

 

 
 
7. Quelle classe Bootstrap est utilisée pour créer une carte avec une bordure ?


A .card-bordered

B .card

C .card-border

D .border-card

B
La classe .card est utilisée pour créer des cartes en Bootstrap, qui sont des conteneurs avec une bordure, des ombres, et éventuellement un en-tête et un pied de page. La bordure est généralement incluse par défaut. Exemple: 
<div class="card border-primary" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Titre de la carte</h5>
    <p class="card-text">Ceci est un exemple de carte avec une bordure. Vous pouvez ajouter du contenu personnalisé à l'intérieur.</p>
    <a href="#" class="btn btn-primary">Lire plus</a>
  </div>
</div>

 

 
8. Quelle classe Bootstrap permet d’agrandir une image tout en maintenant son ratio d’aspect ?

A .img-responsive

B .img-fluid

C .img-ratio

D .img-scale

B
La classe .img-fluid rend une image responsive, c’est-à-dire qu’elle s’ajuste automatiquement à la largeur de son conteneur tout en maintenant ses proportions d’origine.

 

 
9. Quelle classe Bootstrap permet de créer une grille de 12 colonnes ?

A .row-12

B .col-12

C .container-12

D .col-md-12

B
La classe .col-12 permet de créer une colonne qui prend toute la largeur du conteneur dans un système de grille de 12 colonnes. Le système de grille de Bootstrap est basé sur 12 colonnes, et .col-12 occupe toute la largeur de la ligne.
 

 

 
 
10. Quelle classe Bootstrap est utilisée pour aligner un élément à droite ?


A .text-right

B .align-right

C .d-right

D .float-end

D
La classe .float-end aligne un élément à droite du conteneur. Elle est utilisée dans Bootstrap pour positionner un élément en utilisant la propriété float: right. Notez que .text-right était utilisé dans les anciennes versions de Bootstrap pour aligner le texte à droite.

 

 

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

QCM sur Bootstrap – Partie 5

✇WayToLearnX
Par :Thomas
7 mars 2025 à 04:45

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 permet de définir un fond de couleur rouge pour un élément ?


A .bg-danger

B .bg-red

C .background-danger

D .danger-bg

A
La classe .bg-danger définit un fond rouge pour l’élément, en utilisant la couleur associée à l’état « danger » dans Bootstrap, souvent utilisée pour signaler des erreurs ou des avertissements.

 

 
2. Quelle classe Bootstrap permet de rendre une barre de navigation transparente ?


A .navbar-light

B .navbar-transparent

C .navbar

D .navbar-bg-transparent

B
La classe .navbar-transparent est utilisée pour rendre une barre de navigation transparente. Cela permet de personnaliser l’apparence de la barre de navigation en la rendant invisible ou en lui appliquant un fond transparent.

 

 
3. Quelle classe Bootstrap permet de masquer un élément à partir d’un certain point d’écran (par exemple, au-dessus de 768px) ?

A .d-none d-md-block

B .hidden-md

C .d-md-none

D .hidden-lg

A
La classe .d-none d-md-block cache un élément sur les écrans de petite taille et l’affiche à partir de la taille « medium » (≥ 768px). Le système de classes de Bootstrap permet de contrôler la visibilité des éléments en fonction des tailles d’écran.

 

 
 
4. Quelle classe Bootstrap permet de définir un fond de couleur verte pour un élément ?


A .background-success

B .bg-green

C .bg-vert

D .bg-success

D
La classe .bg-success est utilisée pour donner un fond de couleur verte à un élément, généralement pour signaler une action réussie, comme une confirmation ou une réussite.

 

 
5. Quelle classe Bootstrap permet de créer une zone de texte avec une bordure arrondie ?

A .input-rounded

B .form-control-rounded

C .rounded

D .form-control

B
La classe .form-control-rounded est utilisée pour donner une bordure arrondie à des éléments de formulaire comme les zones de texte ou les champs de saisie. Cette classe est une variante de la classe .form-control.
 

 

 
6. Quelle classe Bootstrap permet de créer un bouton de type « outline » (bordure) ?


A .btn-outline

B .btn-outline-primary

C .outline-btn

D .btn-border

B
La classe .btn-outline-primary crée un bouton avec une bordure de couleur primaire, mais sans fond. Lorsqu’on survole ce bouton, il prend la couleur de fond primaire définie dans le thème de Bootstrap. Il existe d’autres variantes pour différentes couleurs (par exemple, .btn-outline-danger).

 

 
 
7. Quelle classe Bootstrap permet d’afficher une image sous forme de cercle ?


A .rounded-circle

B .circle-img

C .img-circle

D .round-img

A
La classe .rounded-circle est utilisée pour rendre une image circulaire en appliquant une bordure arrondie à l’image, de manière à ce que ses bords soient complètement arrondis.

 

 
8. Quelle classe Bootstrap permet d’appliquer un fond de couleur bleu clair ?


A .bg-light

B .bg-primary

C .bg-info

D .bg-soft-blue

C
La classe .bg-info applique un fond de couleur bleu clair (souvent utilisé pour indiquer des informations générales ou des messages informatifs dans une interface utilisateur).

 

 
9. Quelle classe Bootstrap permet d’afficher un élément sous forme de « badge » ?


A .badge

B .label

C .tag

D .badge-item

A
La classe .badge est utilisée pour créer des badges dans Bootstrap. Les badges sont souvent utilisés pour afficher des nombres ou des informations contextuelles dans une interface utilisateur.

 

 
 
10. Quelle classe Bootstrap permet de créer un tableau avec une barre de défilement horizontale si le contenu est trop large ?

A .table-responsive

B .table-scroll

C .scroll-table

D .table-overflow

A
La classe .table-responsive est utilisée pour rendre un tableau responsive. Elle ajoute une barre de défilement horizontale lorsque le contenu du tableau est trop large pour l’écran. Cela permet au tableau de s’adapter à des tailles d’écran plus petites sans perdre en lisibilité.
 

 

 

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

QCM sur Bootstrap – Partie 6

✇WayToLearnX
Par :Thomas
7 mars 2025 à 05:10

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 créer un fond sombre avec une couleur de texte claire ?

A .bg-dark .text-light

B .bg-dark .text-white

C .dark-bg .light-text

D .dark-text .bg-light

B
La classe .bg-dark applique un fond sombre à un élément, et la classe .text-white applique une couleur de texte blanche. Ensemble, ces classes créent un contraste élevé, ce qui est utile pour la lisibilité.

 

 
2. Quelle classe Bootstrap permet de créer une icône de chargement animée ?

A .spinner

B .spinner-grow

C .loading-icon

D .icon-loading

B
La classe .spinner-grow est utilisée pour créer un indicateur de chargement animé en forme de cercle qui grandit et rétrécit. Il peut être utilisé pour montrer qu’un processus de chargement est en cours.

 

 
3. Quelle classe Bootstrap est utilisée pour définir une colonne qui occupe une largeur de 4/12 de la grille ?

A .col-4

B .col-md-4

C .col-lg-4

D .col-3

A
La classe .col-4 fait partie du système de grille de Bootstrap et définit une colonne qui occupe 4 unités sur 12 dans une ligne, soit un tiers de la largeur totale. Bootstrap divise la largeur en 12 unités égales.

 

 
 
4. Quelle classe Bootstrap permet de créer un conteneur qui se redimensionne automatiquement selon la taille de l’écran ?

A .container-fluid

B .container-auto

C .responsive-container

D .container-expand

A
La classe .container-fluid crée un conteneur qui occupe toute la largeur de l’écran, peu importe la taille de l’écran. Contrairement à .container, qui a une largeur fixe selon les points de rupture du responsive design, .container-fluid est toujours fluide.

 

 
5. Quelle classe Bootstrap permet de définir une police de texte en gras ?

A .font-bold

B .fw-bold

C .bold-text

D .text-bold

B
La classe .fw-bold permet de définir un texte en gras. Cela fait partie des utilitaires typographiques de Bootstrap, qui incluent des classes comme .fw-light pour un texte plus léger ou .fw-normal pour un poids de police normal.

 

 
6. Quelle classe Bootstrap permet d’empêcher le défilement horizontal d’une page ?

A .overflow-hidden

B .no-scroll

C .scroll-x-none

D .overflow-auto

A
La classe .overflow-hidden empêche l’affichage de la barre de défilement horizontale ou verticale lorsque le contenu déborde de l’élément. C’est utile pour éviter des barres de défilement non souhaitées dans certaines zones de la page.

 

 
 
7. Quelle classe Bootstrap est utilisée pour ajouter un fond gris clair à un élément ?

A .bg-soft

B .bg-gray

C .bg-light

D .bg-muted

C
La classe .bg-light est utilisée pour appliquer un fond gris clair (clairement visible dans le thème Bootstrap) à un élément. Elle est couramment utilisée pour les éléments qui nécessitent un fond neutre mais visible.

 

 
8. Quelle classe Bootstrap permet de rendre un bouton plus large ?

A .btn-lg

B .btn-expand

C .btn-wide

D .btn-block

A
La classe .btn-lg est utilisée pour agrandir un bouton. Elle est souvent utilisée pour rendre un bouton plus visible et plus accessible sur les pages ou les formulaires. Il existe aussi .btn-sm pour un bouton plus petit.

 

 
9. Quelle classe Bootstrap permet de créer une liste de liens horizontaux ?

A .list-links

B .horizontal-list

C .inline-list

D .list-inline

D
La classe .list-inline permet d’afficher une liste d’éléments (comme des liens) horizontalement au lieu de la disposition verticale par défaut. Elle est très utile pour créer des menus de navigation simples.

 

 
 
10. Quelle classe Bootstrap permet de créer un formulaire avec un alignement en ligne ?

A .form-inline

B .form-horizontal

C .form-row

D .inline-form

A
La classe .form-inline permet de disposer les éléments d’un formulaire (comme les champs de saisie, les boutons, etc.) sur la même ligne, plutôt que sur plusieurs lignes. Elle est souvent utilisée pour créer des formulaires compacts.

 

 

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

QCM sur Bootstrap – Partie 7

✇WayToLearnX
Par :Thomas
7 mars 2025 à 06:03

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 permet de définir un tableau avec des lignes qui changent de couleur lors du survol ?

A .table-hover

B .table-active

C .table-striped

D .table-focus

A
La classe .table-hover est utilisée pour appliquer un effet de survol sur les lignes d’un tableau. Lorsque l’utilisateur passe la souris sur une ligne, celle-ci change de couleur, ce qui permet d’améliorer l’interactivité du tableau.

 

 
2. Quelle classe Bootstrap permet de cacher un élément uniquement sur les petits écrans ?

A .d-none d-sm-block

B .d-sm-none

C .hide-sm

D .hidden-small

B
La classe .d-sm-none permet de cacher un élément uniquement sur les petits écrans (inférieurs à 576px de large). Elle fait partie des classes de visibilité de Bootstrap qui permettent de contrôler l’affichage en fonction des tailles d’écran.

 

 
3. Quelle classe Bootstrap permet de définir une couleur de texte rouge ?

A .text-danger

B .text-red

C .text-warning

D .text-error

A
La classe .text-danger est utilisée pour définir une couleur de texte rouge, souvent utilisée pour indiquer des erreurs, des avertissements ou des alertes dans une interface utilisateur.

 

 
 
4. Quelle classe Bootstrap permet de créer un élément avec une bordure visible et arrondie ?

A .border-radius-3

B .border-radius

C .rounded-border

D .border

D
La classe .border est utilisée pour ajouter une bordure autour d’un élément. Pour avoir une bordure arrondie, vous pouvez combiner cette classe avec .rounded.

 

 
5. Quelle classe Bootstrap permet de définir un espacement à droite d’un élément de taille 5 ?

A .mr-5

B .ml-5

C .pr-5

D .m-right-5

A
La classe .mr-5 applique un espacement à droite (margin-right) de taille 5. Bootstrap propose un système de classes utilitaires qui permet de gérer facilement l’espacement autour des éléments.

 

 
6. Quelle classe Bootstrap permet de mettre en évidence un texte (comme pour les citations) ?

A .highlight

B .text-italic

C .text-emphasized

D .text-warning

D
La classe .text-warning est utilisée pour colorier un texte dans une teinte jaune/orange pour attirer l’attention, souvent utilisée pour les messages d’avertissement ou d’importance.

 

 
 
7. Quelle classe Bootstrap permet de rendre un élément invisible tout en conservant son espace dans le flux de la page ?

A .invisible

B .hidden

C .d-none

D .opacity-0

A
La classe .invisible permet de rendre un élément invisible tout en conservant son espace dans le flux du document. À l’inverse, .d-none retire complètement l’élément du flux et ne laisse pas d’espace.

 

 
8. Quelle classe Bootstrap permet de créer un menu déroulant avec un bouton ?

A .dropdown-button

B .dropdown-toggle

C .dropdown-list

D .dropdown-menu

B
La classe .dropdown-toggle est utilisée pour créer un bouton qui déclenche l’affichage du menu déroulant. Cette classe est combinée avec d’autres classes comme .dropdown-menu pour créer un menu complet.

 

 
9. Quelle classe Bootstrap est utilisée pour centrer un élément horizontalement dans un conteneur avec une largeur fixe ?

A .mx-auto

B .ml-auto

C .center-block

D .align-center

A
La classe .mx-auto est utilisée pour centrer un élément horizontalement avec des marges automatiques à gauche et à droite. Elle est souvent utilisée pour les éléments à largeur fixe dans un conteneur.

 

 
 
10. Quelle classe Bootstrap permet de définir un padding uniquement en bas d’un élément ?

A .pl-3

B .pt-3

C .pb-3

D .padding-bottom-3

C
La classe .pb-3 applique un padding (espacement interne) uniquement en bas de l’élément. Il existe également des classes similaires comme .pt-3 pour le padding en haut, .pl-3 pour le padding à gauche, et .pr-3 pour le padding à droite.

 

 

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

❌