XSmall | Small | Medium | Large | Extra Large | XXL | |
---|---|---|---|---|---|---|
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Screen width | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
Supposons que nous ayons une mise en page simple avec deux colonnes. Nous souhaitons que les colonnes soient divisées à 25 %/75 % pour TOUS les appareils.
Nous ajouterons les classes suivantes à nos deux colonnes :
<div class="col-3">....</div>
<div class="col-9">....</div>
L'exemple suivant entraînera une répartition de 25 %/75 % sur tous les appareils (très petit, petit, moyen, grand, xlarge et xxlarge).
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Extra Small Grid (Auto Layout)</h1>
<p>The following example will result in a 25%/75% split on all devices.</p>
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary text-white p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-9 bg-dark text-white p-3">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</div>
</body>
</html>
Remarque : Assurez-vous que la somme totalise 12 ou moins (il n'est pas obligatoire d'utiliser les 12 colonnes disponibles) :
Pour une répartition de 33,3 %/66,6 %, vous utiliseriez .col-4
et .col-8
( et pour une répartition 50 %/50 %, vous utiliserez .col-6
et .col-6
) :
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Extra Small Grid</h1>
<p>The following example will result in a 33.3%/66.6% split on all devices.</p>
<p>Resize the browser window to see the effect.</p>
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary text-white p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-8 bg-dark text-white p-3">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
<br>
<p>This example will result in a 50%/50% split on all devices.</p>
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-primary text-white p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-6 bg-dark text-white p-3">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</div>
</body>
</html>
Dans Bootstrap 5, il existe un moyen simple de créer des colonnes de largeur égale pour tous les appareils : supprimez simplement le numéro de .col-*
et uniquement utilisez la classe .col
sur un nombre spécifié d'éléments col. Bootstrap reconnaîtra le nombre de colonnes et chaque colonne aura la même largeur :
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four columns: 25% width-->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Auto Layout Columns</h1>
<p>In Bootstrap 5, there is an easy way to create equal width columns for all devices: just use the <code>.col</code> class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.</p>
<div class="container-fluid">
<div class="row">
<div class="col bg-primary text-white p-3">1 of 2</div>
<div class="col bg-dark text-white p-3">2 of 2</div>
</div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col bg-primary text-white p-3">1 of 4</div>
<div class="col bg-dark text-white p-3">2 of 4</div>
<div class="col bg-primary text-white p-3">3 of 4</div>
<div class="col bg-dark text-white p-3">4 of 4</div>
</div>
</div>
</div>
</body>
</html>
Le chapitre suivant montre comment ajouter un pourcentage de répartition différent pour les petits appareils.