Passer au contenu principal















Nouveau! Prise en charge sans fin de Bootstrap

Créez des sites rapides et réactifs avec Bootstrap

Boîte à outils frontale puissante, extensible et riche en fonctionnalités. Créez et personnalisez
avec Sass, utilisez un système de grille et des composants prédéfinis et donnez vie à vos
projets avec de puissants plugins JavaScript.

npm i bootstrap@5.3.3
Lire la documentation

Actuellement v5.3.3 · Télécharger · Toutes les versions

I've spent 2 years learning DNS while building NSLookup.io. Now, I'm teaching
everything I know.ads via Carbon

Commencez comme vous le souhaitez

Lancez-vous directement dans la création avec Bootstrap : utilisez le CDN, installez-le via le
gestionnaire de packages ou téléchargez le code source.

Lire les documents d'installation

Installer via le gestionnaire de paquets

Installez les fichiers sources Sass et JavaScript de Bootstrap via npm, RubyGems, Composer
ou Meteor. Les installations gérées par package n’incluent pas de documentation ni nos
scripts de build complets. Vous pouvez également utiliser n'importe quelle démo de notre
référentiel Exemples pour démarrer rapidement des projets Bootstrap.

npm install bootstrap@5.3.3

gem install bootstrap -v 5.3.3
Lisez nos documents d'installation pour plus d'informations et des gestionnaires de packages
supplémentaires.

Inclure via CDN

Lorsque vous devez uniquement inclure le CSS ou le JS compilé par Bootstrap, vous pouvez
utiliser jsDelivr . Voyez-le en action avec notre simple démarrage rapide ou parcourez les
exemples pour démarrer votre prochain projet. Vous pouvez également choisir d'inclure
Popper et notre JS séparément .

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
Lisez nos guides de démarrage
Lancez-vous dans l'inclusion des fichiers sources de Bootstrap dans un nouveau projet avec
nos guides officiels.

Pack Web Colis Vite

Personnalisez tout avec Sass

Bootstrap utilise Sass pour une architecture modulaire et personnalisable. Importez
uniquement les composants dont vous avez besoin, activez les options globales telles que les
dégradés et les ombres et écrivez votre propre CSS avec nos variables, cartes, fonctions et
mixins.

En savoir plus sur la personnalisation

Inclure tout le Sass de Bootstrap

Importez une feuille de style et c'est parti pour la course avec toutes les fonctionnalités de
notre CSS.

// Variable overrides first

$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
Apprenez-en davantage sur nos options Sass mondiales .
Incluez ce dont vous avez besoin
Le moyen le plus simple de personnaliser Bootstrap : incluez uniquement le CSS dont vous
avez besoin.

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second

$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
En savoir plus sur l'utilisation de Bootstrap avec Sass .

Créez et étendez en temps réel avec des variables CSS

Bootstrap 5 évolue à chaque version pour mieux utiliser les variables CSS pour les styles de
thème globaux, les composants individuels et même les utilitaires. Nous fournissons des
dizaines de variables pour les couleurs, les styles de police et bien plus encore, à
un :rootniveau pouvant être utilisé n'importe où. Sur les composants et les utilitaires, les
variables CSS sont limitées à la classe concernée et peuvent facilement être modifiées.

En savoir plus sur les variables CSS

Utiliser des variables CSS
Use any of our global :root variables to write new styles. CSS variables use the var(--bs-
variableName) syntax and can be inherited by children elements.

.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}

.component-header {
color: var(--bs-purple);
}
Customizing via CSS variables
Override global, component, or utility class variables to customize Bootstrap just how you
like. No need to redeclare each rule, just a new variable value.

body {
 --bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}

.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}

Components, meet the Utility API

New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a
feature-packed Sass map that can be quickly and easily customized. It's never been easier to
add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class
variants, and give them custom names.

Quickly customize components

Apply any of our included utility classes to our components to customize their appearance,
like the navigation example below. There are hundreds of classes available—
from positioning and sizing to colors and effects. Mix them with CSS variable overrides for
even more control.

 Home
 Profile
 Contact

 Home
 Profile
 Contact

<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist"
style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-
link-active-bg: var(--bs-white);">
<li class="nav-item" role="presentation">
<button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab"
aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-
selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-
selected="false">Contact</button>
</li>
</ul>
Explore customized components

Create and extend utilities

Use Bootstrap's utility API to modify any of our included utilities or create your own custom
utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or
remove utilities.
@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Explore the utility API

Powerful JavaScript plugins without jQuery

Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so
much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins
are added with data attributes in your HTML. Need more control? Include individual plugins
programmatically.

Learn more about Bootstrap JavaScript

Data attribute API

Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript
plugins feature a first-class data API, allowing you to use JavaScript just by
adding data attributes.

Dropdown
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-
expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
</ul>
</div>
Learn more about our JavaScript as modules and using the programmatic API.

Comprehensive set of plugins

Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at
once, or choose just the ones you need.

Alert
Show and hide alert messages to your users.
Button
Programmatically control the active state for buttons.

Carousel
Add slideshows to any page, including support for crossfade.

Collapse
Expand and collapse areas of content, or create accordions.

Dropdown
Create menus of links, actions, forms, and more.

Modal
Add flexible and responsive dialogs to your project.

Offcanvas
Build and toggle hidden sidebars into any page.

Popover
Create custom overlays. Built on Popper.

Scrollspy
Mettez automatiquement à jour les liens de navigation actifs en fonction du défilement des pages.

Languette
Autoriser les composants de navigation Bootstrap à basculer le contenu.

Griller
Affichez et masquez les notifications à vos visiteurs.

Info-bulle
Remplacez les info-bulles du navigateur par des info-bulles personnalisées. Construit sur Popper.

Personnalisez-le avec les icônes Bootstrap

Bootstrap Icons est une bibliothèque d'icônes SVG open source contenant plus de 1 800
glyphes, et d'autres sont ajoutés à chaque version. Ils sont conçus pour fonctionner dans
n'importe quel projet, que vous utilisiez Bootstrap lui-même ou non. Utilisez-les comme SVG
ou polices d'icônes : les deux options vous offrent une mise à l'échelle vectorielle et une
personnalisation facile via CSS.
Obtenir des icônes Bootstrap

Personnalisez-le avec les thèmes Bootstrap officiels

Faites passer Bootstrap au niveau supérieur avec des thèmes premium du marché officiel des
thèmes Bootstrap . Les thèmes sont construits sur Bootstrap en tant que leurs propres
frameworks étendus, riches en nouveaux composants et plugins, en documentation et en outils
de construction puissants.

Parcourir les thèmes Bootstrap

Amorcer

 Conçu et construit avec tout l'amour du monde par l' équipe Bootstrap avec l'aide de nos
contributeurs .
 Code sous licence MIT , docs CC BY 3.0 .
 Actuellement v5.3.3.

Liens

 Maison
 Documents
 Exemples
 Icônes
 Thèmes
 Blog
 Magasin de cadeaux

Guides

 Commencer
 Modèle de démarrage
 Pack Web
 Colis
  Vite

Projets

 Amorçage 5
 Amorçage 4
 Icônes
 RFS
 Exemples de dépôt

Communauté

 Problèmes
 Discussions
 Commanditaires corporatifs
 Collectif Ouvert
 Débordement de pile