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

Source

Deprecated: Function create_function() is deprecated in /home/praufkea/bootstrap-doc.prauds.fr/geshi/geshi.php on line 4698

<div class="row text-center">
    <div class="col-sm-1 col-xs-1">01</div>
    <div class="col-sm-1 col-xs-1">02</div>
    <div class="col-sm-1 col-xs-1">03</div>
    <div class="col-sm-1 col-xs-1">04</div>
    <div class="col-sm-1 col-xs-1">05</div>
    <div class="col-sm-1 col-xs-1">06</div>
    <div class="col-sm-1 col-xs-1">07</div>
    <div class="col-sm-1 col-xs-1">08</div>
    <div class="col-sm-1 col-xs-1">09</div>
    <div class="col-sm-1 col-xs-1">10</div>
    <div class="col-sm-1 col-xs-1">11</div>
    <div class="col-sm-1 col-xs-1">12</div>
    <div class="col-sm-1 hidden-xs">13</div>
    <div class="col-sm-1 hidden-xs">14</div>
    <div class="col-sm-1 hidden-xs">15</div>
    <div class="col-sm-1 hidden-xs">16</div>
    <div class="col-sm-1 hidden-xs">17</div>
    <div class="col-sm-1 hidden-xs">18</div>
    <div class="col-sm-1 hidden-xs">19</div>
    <div class="col-sm-1 hidden-xs">20</div>
    <div class="col-sm-1 hidden-xs">21</div>
    <div class="col-sm-1 hidden-xs">22</div>
    <div class="col-sm-1 hidden-xs">23</div>
    <div class="col-sm-1 hidden-xs">24</div>
</div>
<div class="row text-center">
    <div class="col-sm-2 col-xs-2">01</div>
    <div class="col-sm-2 col-xs-2">02</div>
    <div class="col-sm-2 col-xs-2">03</div>
    <div class="col-sm-2 col-xs-2">04</div>
    <div class="col-sm-2 col-xs-2">05</div>
    <div class="col-sm-2 col-xs-2">06</div>
    <div class="col-sm-2 hidden-xs">07</div>
    <div class="col-sm-2 hidden-xs">08</div>
    <div class="col-sm-2 hidden-xs">09</div>
    <div class="col-sm-2 hidden-xs">10</div>
    <div class="col-sm-2 hidden-xs">11</div>
    <div class="col-sm-2 hidden-xs">12</div>
</div>
<div class="row text-center">
    <div class="col-sm-4 col-xs-4">1</div>
    <div class="col-sm-4 col-xs-4">2</div>
    <div class="col-sm-4 col-xs-4">3</div>
    <div class="col-sm-4 hidden-xs">4</div>
    <div class="col-sm-4 hidden-xs">5</div>
    <div class="col-sm-4 hidden-xs">6</div>
</div>
<div class="row text-center">
    <div class="col-sm-6 col-xs-6">1</div>
    <div class="col-sm-6 col-xs-6">2</div>
    <div class="col-sm-6 hidden-xs">3</div>
    <div class="col-sm-6 hidden-xs">4</div>
</div>
    <div class="row text-center">
    <div class="col-sm-12 col-xs-12">1</div>
    <div class="col-sm-12 hidden-xs">2</div>
</div>
    <div class="row text-center">
    <div class="col-sm-24 hidden-xs">1</div>
</div>

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

Source

<div class="row text-center">
    <div class="col-xs-6 col-sm-6">col-xs-6 col-sm-6</div>
    <div class="col-xs-6 col-sm-6">col-xs-6 col-sm-6</div>
 
    <div class="clearfix visible-xs-block"></div>
 
    <div class="col-xs-6 col-sm-6">col-xs-6 col-sm-6</div>
    <div class="col-xs-6 col-sm-6">col-xs-6 col-sm-6</div>
</div>

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

Source

<div class="row">
    <div class="col-sm-8 col-xs-4">1</div>
    <div class="col-sm-8 col-xs-4 col-sm-offset-8 col-xs-offset-4">2</div>
</div>
<div class="row">
    <div class="col-sm-6 col-xs-3 col-sm-offset-6 col-xs-offset-3">1</div>
    <div class="col-sm-6 col-xs-3 col-sm-offset-6 col-xs-offset-3">2</div>
</div>
<div class="row">
    <div class="col-sm-12 col-xs-6 col-sm-offset-6 col-xs-offset-3">1</div>
</div>

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

Source

<div class="row">
    <div class="col-sm-19 col-xs-6">col-sm-19 col-xs-6</div>
    <div class="col-sm-12 col-xs-6">col-sm-12 col-xs-6</div>
    <div class="col-sm-8 col-xs-4">col-sm-8 col-xs-4</div>
    <div class="col-sm-4 col-xs-4">col-sm-8 col-xs-4</div>
    <div class="col-sm-8 col-xs-4">col-sm-8 col-xs-4</div>
</div>

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

Source

<div class="row text-center">
    <div class="col-sm-10 col-md-12">1</div>
    <div class="col-sm-10 col-sm-offset-4 col-md-12 col-md-offset-0">2</div>
</div>
 
<div class="row text-center">
    <div class="col-sm-12 col-md-10 col-lg-12">1</div>
    <div class="col-sm-12 col-md-10 col-md-offset-4 col-lg-12 col-lg-offset-0">2</div>
</div>

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

Source

<div class="row text-center">
    <div class="col-md-10 col-md-push-4">1</div>
    <div class="col-md-4 col-md-pull-10">2</div>
    <div class="col-md-10">3</div>
</div>

Niveau 1

Niveau 2

Niveau 3

Niveau 2

Niveau 3

Source

<div class="row">
    <div class="col-sm-24 col-xs-12">
        Niveau 1
        <div class="row">
            <div class="col-sm-10 col-xs-4 col-sm-offset-1 col-xs-offset-1">
                Niveau 2
                <div class="row">
                    <div class="col-sm-10 col-xs-4 col-sm-offset-1 col-xs-offset-1">Niveau 3</div>
                    <div class="col-sm-10 col-xs-4 col-sm-offset-2 col-xs-offset-2">Niveau 3</div>
                </div>
            </div>
            <div class="col-sm-10 col-xs-4 col-sm-offset-2 col-xs-offset-2">
                Niveau 2
                <div class="row">
                    <div class="col-sm-10 col-xs-4 col-sm-offset-1 col-xs-offset-1">Niveau 3</div>
                    <div class="col-sm-10 col-xs-4 col-sm-offset-2 col-xs-offset-2">Niveau 3</div>
                </div>
            </div>
        </div>
    </div>
</div>

Ligne 1
Ligne 2
Ligne 3
Ligne 4

Ligne 1
Ligne 2
Ligne 3

Ligne 1
Ligne 2

Ligne 1

Source

<div class="row">
    <div class="row-same-height row-full-height">
        <div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content">Ligne 1<br />Ligne 2<br />Ligne 3<br />Ligne 4</div></div></div>
        <div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content">Ligne 1<br />Ligne 2<br />Ligne 3</div></div></div>
        <div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content">Ligne 1<br />Ligne 2</div></div></div>
        <div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content">Ligne 1</div></div></div>
    </div>
</div>

En haut

Au milieu

En bas

Source

<div class="row">
    <div class="row-same-height">
        <div class="col-xs-3 col-xs-height"><div class="item"><div class="content"><br><br><br><br><br><br><br></div></div></div>
        <div class="col-xs-3 col-xs-height col-top"><div class="item"><div class="content">En haut</div></div></div>
        <div class="col-xs-3 col-xs-height col-middle"><div class="item"><div class="content">Au milieu</div></div></div>
        <div class="col-xs-3 col-xs-height col-bottom"><div class="item"><div class="content">En bas</div></div></div>
    </div>
</div>

Source

<div class="row">
    <div class="row-same-height">
        <div class="col-xs-3 col-xs-height"><div class="item"><div class="content"><br><br><br><br><br><br><br></div></div></div>
        <div class="col-xs-3 col-xs-height col-top"><div class="item"><div class="content">En haut</div></div></div>
        <div class="col-xs-3 col-xs-height col-middle"><div class="item"><div class="content">Au milieu</div></div></div>
        <div class="col-xs-3 col-xs-height col-bottom"><div class="item"><div class="content">En bas</div></div></div>
    </div>
</div>

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

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

Lorem ipsum dolor
Consectetur adipiscing
Integer molestie lorem
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
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>

Classe table table-striped

Titre du tableau
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-striped">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>

Classe table table-bordered

Titre du tableau
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-bordered">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>

Classe table table-hover

Titre du tableau
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-hover">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>

Classe table table-condensed

Titre du tableau
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-condensed">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>

Classe table table-expansed sp

Titre du tableau
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-expansed">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>

Classe table table-radius sp

table + thead + tbody
#	Nom	Prénom	Utilisateur	Tél
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

table + thead + tfoot + tbody
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

table + tbody
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

table + tbody + tbody
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-radius">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>
 
<table class="table table-radius">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>

Classe table table-radius table-only-tbody sp

table + tbody
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

table + tbody + tbody
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-radius table-only-tbody">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
            ...
        </tr>
        ...
    </tbody>
</table>

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

Titre du tableau
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-radius">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th class="active">#</th>
            <th class="info">Nom</th>
            <th class="success">Prénom</th>
            <th class="warning">Utilisateur</th>
            <th class="danger">Tél</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="active">
            <th>...</th>
            ...
        </tr>
        <tr class="info">
            <th>...</th>
            ...
        </tr>
        <tr class="success">
            <th>...</th>
            ...
        </tr>
        <tr class="warning">
            <th>...</th>
            ...
        </tr>
        <tr class="danger">
            <th>...</th>
            ...
        </tr>
    </tbody>
</table>

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

Titre du tableau
#	Nom	Prénom	Utilisateur	Tél
Pied du tableau
1	Mark	Otto	@mdo	0000
2	Jacob	Thornton	@fat	1111
3	Larry	Bird	@twitter	2222
4	Vincero	Arthur	@bootstrap	3333
5	Urcob	Vincent	@facebook	4444

Source

<table class="table table-hover table-expansed table-radius">
    <caption class="text-center">Titre du tableau</caption>
    <thead>
        <tr>
            <th class="active">#</th>
            <th class="info">Nom</th>
            <th class="success">Prénom</th>
            <th class="warning">Utilisateur</th>
            <th class="danger">Tél</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td class="text-center" colspan="5">Pied du tableau</td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="active">
            <th>...</th>
            ...
        </tr>
        <tr class="info">
            <th>...</th>
            ...
        </tr>
        <tr class="success">
            <th>...</th>
            ...
        </tr>
        <tr class="warning">
            <th>...</th>
            ...
        </tr>
        <tr class="danger">
            <th>...</th>
            ...
        </tr>
    </tbody>
</table>

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

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                ...
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                ...
            </tr>
            <tr>
                <td>2</td>
                ...
            </tr>
            <tr>
                <td>3</td>
                ...
            </tr>
        </tbody>
    </table>
</div>

Couleur et taille de bouton

Source

<p>
    <button type="button" class="btn btn-lg btn-default">Default</button>
    <button type="button" class="btn btn-lg btn-primary">Primary</button>
    <button type="button" class="btn btn-lg btn-success">Success</button>
    <button type="button" class="btn btn-lg btn-info">Info</button>
    <button type="button" class="btn btn-lg btn-warning">Warning</button>
    <button type="button" class="btn btn-lg btn-danger">Danger</button>
    <button type="button" class="btn btn-lg btn-inverse">Inverse</button>
    <button type="button" class="btn btn-lg btn-purple">Purple</button>
    <button type="button" class="btn btn-lg btn-pink">Pink</button>
    <button type="button" class="btn btn-lg btn-link">Link</button>
</p>
<p>
    <button type="button" class="btn  btn-default">Default</button>
    <button type="button" class="btn  btn-primary">Primary</button>
    <button type="button" class="btn  btn-success">Success</button>
    <button type="button" class="btn  btn-info">Info</button>
    <button type="button" class="btn  btn-warning">Warning</button>
    <button type="button" class="btn  btn-danger">Danger</button>
    <button type="button" class="btn  btn-inverse">Inverse</button>
    <button type="button" class="btn  btn-purple">Purple</button>
    <button type="button" class="btn  btn-pink">Pink</button>
    <button type="button" class="btn  btn-link">Link</button>
</p>
<p>
    <button type="button" class="btn btn-sm btn-default">Default</button>
    <button type="button" class="btn btn-sm btn-primary">Primary</button>
    <button type="button" class="btn btn-sm btn-success">Success</button>
    <button type="button" class="btn btn-sm btn-info">Info</button>
    <button type="button" class="btn btn-sm btn-warning">Warning</button>
    <button type="button" class="btn btn-sm btn-danger">Danger</button>
    <button type="button" class="btn btn-sm btn-inverse">Inverse</button>
    <button type="button" class="btn btn-sm btn-purple">Purple</button>
    <button type="button" class="btn btn-sm btn-pink">Pink</button>
    <button type="button" class="btn btn-sm btn-link">Link</button>
</p>

Bouton avec bords arrondis sp

Source

<p>
    <button type="button" class="btn btn-lg btn-primary left-rounded">Default</button>
    <button type="button" class="btn btn-lg btn-primary rounded">Default</button>
    <button type="button" class="btn btn-lg btn-primary right-rounded">Default</button>
<p>
    <button type="button" class="btn btn-success left-rounded">Default</button>
    <button type="button" class="btn btn-success rounded">Default</button>
    <button type="button" class="btn btn-success right-rounded">Default</button>
</p>
<p>
    <button type="button" class="btn btn-sm btn-warning left-rounded">Default</button>
    <button type="button" class="btn btn-sm btn-warning rounded">Default</button>
    <button type="button" class="btn btn-sm btn-warning right-rounded">Default</button>
</p>
<p>
    <button type="button" class="btn btn-xs btn-danger left-rounded">Default</button>
    <button type="button" class="btn btn-xs btn-danger rounded">Default</button>
    <button type="button" class="btn btn-xs btn-danger right-rounded">Default</button>
</p>

Block de bouton

Source

<div style="max-width: 400px; margin: 0 auto 10px;" class="well">
    <button class="btn btn-primary btn-lg btn-block" type="button">Block level button</button>
    <button class="btn btn-default btn-lg btn-block" type="button">Block level button</button>
</div>

Différent style d'image

Source

<img src="http://placehold.it/150x150&text=img-rounded" alt="" class="img-rounded">
<img src="http://placehold.it/150x150&text=img-circle" alt="" class="img-circle">
<img src="http://placehold.it/150x150&text=img-thumbnail" alt="" class="img-thumbnail">

Image responsive

Source

<img src="http://placehold.it/1200x300&text=img-responsive" alt="" class="img-responsive">

Bouton fermer

Source

<button type="button" class="close" aria-hidden="true">&times;</button>

La fléche du bouton dropdown

Source

<span class="caret"></span>

Positionner à gauche ou à droite

pull-left

pull-right

Source

<div class="pull-left">pull-left</div>
<div class="pull-right">pull-right</div>

Center un block

center-block

Source

<div class="center-block">center-block</div>

Clearfix

clearfix

Source

<div class="clearfix">clearfix</div>

Classe .hidden et .show

visible

Source

<div class="show">visible</div>
<div class="hidden">cacher</div>

La classe sr-only

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

Source

<p>Cacher un élément à tous les utilisateurs, sauf les lecteurs d'écran.</p>
<a class="sr-only sr-only-focusable" href="#content">Passer au contenu</a>

La classe text-hide

Custom heading

Source

<h1 class="text-hide">Custom heading</h1>

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

Conteneur

Conteneur

Conteneur

Conteneur

Grille 24 ≥ 1200px

Grille 24 ≥ 992px

Grille 24 ≥ 768px

Grille 12 < 768px

Source

Casser la responsivité des colonnes ≥ 1200px

Casser la responsivité des colonnes ≥ 992px

Casser la responsivité des colonnes ≥ 768px

Casser la responsivité des colonnes < 768px

Source

Décalage ≥ 1200px

Décalage ≥ 992px

Décalage ≥ 768px

Décalage < 768px

Source

Retour à la ligne automatique v 3.2.0 ≥ 1200px

Retour à la ligne automatique v 3.2.0 ≥ 992px

Retour à la ligne automatique v 3.2.0 ≥ 768px

Retour à la ligne automatique v 3.2.0 < 768px

Source

Reset décalage ≥ 1200px

Reset décalage ≥ 992px

Reset décalage ≥ 768px

Reset décalage < 768px

Source

Ordre des colonnes ≥ 1200px

Ordre des colonnes ≥ 992px

Ordre des colonnes ≥ 768px

Ordre des colonnes < 768px

Source

Imbrication de colonnes ≥ 1200px

Imbrication de colonnes ≥ 992px

Imbrication de colonnes ≥ 768px

Imbrication de colonnes < 768px

Source

Colonnes de même hauteur sp ≥ 1200px

Colonnes de même hauteur sp ≥ 992px

Colonnes de même hauteur sp ≥ 768px

Colonnes de même hauteur sp < 768px

Source

Positionnement des colonnes sp ≥ 1200px

Positionnement des colonnes sp ≥ 992px

Positionnement des colonnes sp ≥ 768px

Positionnement des colonnes sp < 768px

Source

Centrer des colonnes sp ≥ 1200px

Centrer des colonnes sp ≥ 992px

Centrer des colonnes sp ≥ 768px

Centrer des colonnes sp < 768px

Source

Typographie

Typographie

Typographie

Typographie

Balise h1 à h6

h1 small

h2 small

h3 small

h4 small

h5 small

h6 small

Couleur de texte

Alignement de texte

Classe lead

Balise abbr Classe initialism

Balise small

Balise address

Balises spéciales v 3.2.0

Transformation du texte v 3.2.0

Balise blockquote

Balise blockquote

Balise blockquote

Liste non ordonnée

Liste ordonnée

Classe list-unstyled

Classe list-inline

Balise abbr

Classe initialism

Classe `bg-xs` sp

Classe `bg-sm` sp

Classe `bg-lg` sp