Vous pouvez facilement centrer le contenu de votre page dans un conteneur, en englobant votre page dans un <div class="container"></div> avec la classe container.


Vous pouvez aussi mettre votre contenu en pleine page avec une marge à droite et à gauche de 15px avec la classe container-fluid appliquer à votre <div class="container-fluid"></div>

Pc col-lg-*, portable col-md-*, tablette col-sm-*, mobile col-xs-*

01
02
03
04
05
06
07
08
09
10
11
12
01
02
03
04
05
06
1
2
3
1
2
1

Source

Il est possible de casser la responsivité des colonnes en cumulant la classe clearfix et la classe rendant visible le div visible-*.

col-xs-6 col-sm-6
col-xs-6 col-sm-6
col-xs-6 col-sm-6
col-xs-6 col-sm-6

Source

Pc col-lg-offset-*, portable col-md-offset-*, tablette col-sm-offset-*, mobile col-xs-offset-*

1
2
1
2
1

Source

Si plus de 24 [lg,md,sm] ou 12 [xs] colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires seront, comme une seule unité, et se placerons sur une nouvelle ligne.

col-sm-19 col-xs-6
col-sm-12 col-xs-6
col-sm-8 col-xs-4
col-sm-8 col-xs-4
col-sm-8 col-xs-4

Source

Il est possible de décalé les colonnes de maniére differente suivant les médias avec la classe col-*-offset-0.

1
2
1
2

Source

Il est possible de choisir l'ordre de positionnement des colonnes avec les deux classes col-*-push-* et col-*-pull-*.

1
2
3

Source

Niveau 1
Niveau 2
Niveau 3
Niveau 3
Niveau 2
Niveau 3
Niveau 3

Source

Ligne 1
Ligne 2
Ligne 3
Ligne 4
Ligne 1
Ligne 2
Ligne 3
Ligne 1
Ligne 2
Ligne 1

Source








En haut
Au milieu
En bas

Source

6
6
3
3
3
2
2
1

Source

Balise h1 à h6

h1 small

h2 small

h3 small

h4 small

h5 small
h6 small

Couleur de texte

texte avec la classe text-muted

texte avec la classe text-primary

texte avec la classe text-success

texte avec la classe text-info

texte avec la classe text-warning

texte avec la classe text-danger

texte avec la classe text-purple sp

texte avec la classe text-pink sp

Alignement de texte

text-left

text-center

text-right

text-justify

text-nowrap

Classe lead

Paragraphe spéciale lead.

Balise abbr
Classe initialism

Abréviation
Abréviation

Balise small

Ce texte est en small.

Balise address

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
Tél: (123) 456-7890

Balises spéciales v 3.2.0

Texte surlignement <mark>

Texte supprimé <del> / <s>

Texte inseré <ins> / <u>

Transformation du texte v 3.2.0

Texte en minuscule.

Texte en majuscule.

Premiére lettre de chaque mot en majuscule.

Balise blockquote

Twitter Bootstrap est une collection d'outils utile à la création de sites web et applications web.

Balise blockquote

Twitter Bootstrap est une collection d'outils utile à la création de sites web et applications web.

Extrait de l'article sur Wikipédia

Balise blockquote

Twitter Bootstrap est une collection d'outils utile à la création de sites web et applications web.

Extrait de l'article sur Wikipédia

Liste non ordonnée

  • Lorem ipsum dolor
  • Consectetur adipiscing
    • Integer molestie lorem
      • Facilisis in pretium

Liste ordonnée

  1. Lorem ipsum dolor
  2. Consectetur adipiscing
  3. Integer molestie lorem
  4. Facilisis in pretium

Classe list-unstyled

  • Lorem ipsum dolor
  • Consectetur adipiscing
    • Integer molestie lorem
      • Facilisis in pretium

Classe list-inline

  • Lorem
  • ipsum
  • dolor

Liste de description

Description lists
A description list is perfect for defining.
Euismod
Vestibulum id ligula porta felis euismod

Classe dl-horizontal

Description lists
A description list is perfect for defining.
Euismod
Vestibulum id ligula porta felis
Donec id elit non mi porta gravida at.
Malesuada porta id elit non mi
Etiam porta sem malesuada magna.

hr par défaut


hr-dashed sp


hr-dotted sp


Couleur de fond. sp

bg-primary

bg-success

bg-info

bg-warning

bg-danger

bg-inverse

bg-purple

bg-pink

Classe bg-xs sp

bg-primary bg-xs

bg-success bg-xs

bg-info bg-xs

bg-warning bg-xs

bg-danger bg-xs

bg-inverse bg-xs

bg-purple bg-xs

bg-pink bg-xs

Classe bg-sm sp

bg-primary bg-sm

bg-success bg-sm

bg-info bg-sm

bg-warning bg-sm

bg-danger bg-sm

bg-inverse bg-sm

bg-purple bg-sm

bg-pink bg-sm

Classe bg-lg sp

bg-primary bg-lg

bg-success bg-lg

bg-info bg-lg

bg-warning bg-lg

bg-danger bg-lg

bg-inverse bg-lg

bg-purple bg-lg

bg-pink bg-lg

Code dans un texte

<section></section> est une balise html.

Touche de clavier

Appuyer sur la touche F12.

Bloc de code

<strong>exemple</strong>

Une variable v 3.2.0

y = mx + b

Sortie de programme v 3.2.0

Texte sortie d'un programme informatique.

Classe table

Titre du tableau
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Classe table table-striped

Titre du tableau
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Classe table table-bordered

Titre du tableau
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Classe table table-hover

Titre du tableau
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Classe table table-condensed

Titre du tableau
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Classe table table-expansed sp

Titre du tableau
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Classe table table-radius sp

table + thead + tbody
#NomPrénomUtilisateurTél
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444
table + thead + tfoot + tbody
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444
table + tbody
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444
table + tbody + tbody
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Classe table table-radius table-only-tbody sp

table + tbody
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444
table + tbody + tbody
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Classe de tr, th, td : active, info, success, warning, danger

Titre du tableau
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Cumulées: table-hover + table-expansed + table-radius

Titre du tableau
#NomPrénomUtilisateurTél
Pied du tableau
1MarkOtto@mdo0000
2JacobThornton@fat1111
3LarryBird@twitter2222
4VinceroArthur@bootstrap3333
5UrcobVincent@facebook4444

Source

Tableau responsive

Tableau responsive

Tableau responsive

Tableau responsive

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Source

Formulaire par défaut

Exemple de texte explicatif.

Source

Formulaire en ligne

Source

Formulaire horizontal

Source

Classe form-control

Source

Checkbox et radio avec et sans label

Case à cochée

Bouton radio

Checkbox sans label

Radio sans label

Source

Checkbox et radio en ligne

Source

Champ static avec form-horizontal

email@example.com

Source

Champ static avec form-inline v 3.3.2

email@example.com

Source

Classe de validation de formulaire

Source

Classe de validation de formulaire avec icône

Dans un formulaire classic

(Success)
@
(Success)
(warning)
@
(warning)
(error)
@
(error)

Dans un formulaire horizontal

(Success)
@
(Success)
(warning)
@
(warning)
(error)
@
(error)

Dans un formulaire en ligne


@
(Success)
@
(warning)
@
(error)

Source

Hauteur de champ dans un formulaire horizontal

Source

Hauteur de champ

Source

Largeur de champ

Source

Champ avec bords arrondis sp

Source

Texte d'aide à la saisie

Ceci est un texte d'aide à la saisie

Source

Couleur et taille de bouton

Source

Bouton avec bords arrondis sp

Source

Block de bouton

Source

Différent style d'image

Source

Image responsive

Source

Bouton fermer

Source

La fléche du bouton dropdown

Source

Positionner à gauche ou à droite

pull-left
pull-right

Source

Center un block

center-block

Source

Clearfix

clearfix

Source

Classe .hidden et .show

visible

Source

La classe sr-only

Cacher un élément à tous les utilisateurs, sauf les lecteurs d'écran.

Passer au contenu

Source

La classe text-hide

Custom heading

Source

Les classes pour cacher ou afficher du contenu

Téléphone (<768px) Tablette (≥768px) Portable (≥992px) Grand écran (≥1200px)
.visible-xs-* Visible Cacher Cacher Cacher
.visible-sm-* Cacher Visible Cacher Cacher
.visible-md-* Cacher Cacher Visible Cacher
.visible-lg-* Cacher Cacher Cacher Visible
.hidden-xs Cacher Visible Visible Visible
.hidden-sm Visible Cacher Visible Visible
.hidden-md Visible Visible Cacher Visible
.hidden-lg Visible Visible Visible Cacher

Il est maintenant possible, depuis la v 3.2.0, de choisir l'une des 3 valeurs possibles de la propriété CSS display, pour changer le comportement suivant les médias.

Groupe de classes CSS display
.visible-lg-block
.visible-md-block
.visible-sm-block
.visible-xs-block
display: block;
.visible-lg-inline
.visible-md-inline
.visible-sm-inline
.visible-xs-inline
display: inline;
.visible-lg-inline-block
.visible-md-inline-block
.visible-sm-inline-block
.visible-xs-inline-block
display: inline-block;

Classe responsive pour l'impression

A l'écran Imprimer
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Cacher Visible
.hidden-print Visible Cacher