Composants

Badges

Déclinaisons  
Défaut <span class="badge">Défaut</span>
Info <span class="badge bg-info">Défaut</span>
Succès <span class="badge bg-success">Succès</span>
Attention <span class="badge bg-warning">Attention</span>
Erreur <span class="badge bg-error">Erreur</span>
Facebook <span class="badge bg-facebook">Défaut</span>
Google plus <span class="badge bg-google-plus">Attention</span>
Instagram <span class="badge bg-instagram">Erreur</span>
Pinterest <span class="badge bg-pinterest">Erreur</span>
Twitter <span class="badge bg-twitter">Succès</span>
Youtube <span class="badge bg-youtube">Succès</span>

Dans un élément texte

Fusce dapibus tellus ac cursus commodo 10

<p>Fusce dapibus tellus ac cursus commodo <span class="badge">10</span></p>

Dans un élément de navigation

<ul class="nav">
	<li><a href="#">Accueil</a></li>
	<li class="subnav">
	    <a data-toggle="subnav" href="#">Boutique <span class="badge">10</span></a>
	    <ul class="nav subnav-menu">
	        ...
	    </ul>
	</li>
	<li><a href="#">Compte <span class="badge">20</span></a></li>
</ul>

Barre de progression

60%
<div class="progress">
	   <div class="progress-bar" style="width:60%">60%</div>
</div>

Variantes

20%
<div class="progress">
	<div class="progress-bar bg-info" style="width:20%">20%</div>
</div>
40%
<div class="progress">
	<div class="progress-bar bg-success" style="width:40%">40%</div>
</div>
60%
<div class="progress">
	<div class="progress-bar bg-warning" style="width:60%">60%</div>
</div>
80%
<div class="progress">
	<div class="progress-bar bg-error" style="width:80%">80%</div>
</div>

Alertes

Primaire Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-primary">
	<strong>Primaire </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Info Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-info">
	<strong>Info </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Succès Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-success">
	<strong>Succès </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Attention Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-warning">
	<strong>Attention </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Erreur Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-error">
	<strong>Erreur </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>

Réseaux sociaux

Facebook Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-facebook">
	<strong>facebook </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Google plus  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-google-plus">
	<strong>Google plus </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Instagram  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-instagram">
	<strong>Instagram </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Pinterest  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-pinterest">
	<strong>Pinterest </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Twitter Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-twitter">
    <strong>Twitter </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Youtube Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-youtube">
    <strong>Twitter </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>

Panel

Mise en forme d'un contenu dans une boîte.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="panel">
	<div class="panel-body">...</div>
</div>

Boîte avec entête.

Nulla vel metus scelerisque ante sollicitudin commodo

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="panel">
	<div class="panel-heading">...</div>
	<div class="panel-body">...</div>
</div>

Media

Facilite la mise en page de contenu disposant d'une image, d'un titre et d'un contenu, tel un billet de blog ou un listing de produits.

Insérer l'élément dans un conteneur .media-list.

<ul class="media-list">
	<li class="media">
	    <div class="media-object">
	        <img src="..." width="140" height="140">
        </div>
	    <div class="media-body">
    	    <p class="h4 media-heading">Titre de l'élément</p>
    	    <ul class="media-infos">
                <li>Publié le 10/04/2016</li>
                <li>Dans Voyages</li>
            </ul>
    	    <div class="media-content">
    	        ...
            </div>
        </div>
    </li>
	...
</ul>

Mode liste

Ajouter la classe .media-stacked à une liste d'éléments.

  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul class="media-list media-stacked">
	<li class="media">...</li>
	...
</ul>

Liste imbriquée

  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    • Img

      Titre de l'élément

      • Publié le 10/04/2016
      • Dans Voyages
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul class="media-list media-stacked">
	<li class="media">
	    ...
	    <div class="media-body">
	        <ul class="media-list media-stacked">
	            ...
	        </ul>
	    </div>
	</li>
	...
</ul>

Mode vignettes

Ajouter la classe .media-thumbnails à une liste d'éléments.

  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
<ul class="media-list media-thumbnails">
	<li class="media">...</li>
	...
</ul>

Mode Masonry

Ajouter la classe .media-masonry à une liste d'éléments. Les éléments s'affichent verticalement et sur deux colonnes dès 768px de large.

  • Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Integer sit amet rutrum sapien. Duis fermentum quam varius erat elementum venenatis. Vestibulum vel mollis erat. Integer interdum accumsan ante, vel semper libero eleifend sit amet. Ut massa velit, viverra vel interdum eu, aliquet sed quam. Aliquam porttitor elementum risus ut sollicitudin.
  • Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Integer sit amet rutrum sapien. Duis fermentum quam varius erat elementum venenatis. Vestibulum vel mollis erat.
  • Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Titre de l'élément

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus pretium scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer sit amet rutrum sapien. Duis fermentum quam varius erat elementum venenatis. Vestibulum vel mollis erat. Integer interdum accumsan ante, vel semper libero eleifend sit amet. Ut massa velit, viverra vel interdum eu, aliquet sed quam. Aliquam porttitor elementum risus ut sollicitudin. Curabitur pretium euismod diam a congue.
  • Titre de l'élément

    Cras scelerisque nunc eu consequat sodales. Etiam ut rutrum quam. Maecenas non nisl id ipsum pretium ullamcorper. Donec ut est in ligula porta efficitur sed et eros. Duis et lacinia velit. Suspendisse in ante elementum, dignissim dui eget, iaculis mi. Vestibulum eleifend tempus venenatis.
  • Titre de l'élément

    Duis congue sodales nibh, vel egestas ante ornare ornare. Aenean elit mauris, dignissim sed eros egestas, sagittis accumsan diam. Praesent viverra dui quis justo imperdiet maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim dolor molestie consectetur aliquam.
<ul class="media-list media-masonry">
	<li class="media">...</li>
	...
</ul>

Vidéo

Tout élément <iframe>, <embed>, <video> ou <object> placé dans un conteneur .video-container sera redimensionné proportionnellement

<div class="video-container">
    <iframe src="..." frameborder="0" allowfullscreen></iframe>
</div>

Divers

Classes utiles

.pull-left

Insérer un élément flottant à gauche.

<span class="pull-left">...</span>

.pull-right

Insérer un élément flottant à droite.

<span class="pull-right">...</span>

.clearfix

Annuler l'éventuel dépassement vertical d'un élément flottant.

<div class="clearfix">
	<span class="pull-left">...</span>
</div>

.hide

Cacher un élément via display:none.

<span class="hide">...</span>