Style Guide Documentation
about
Comments and documentation about your style guide. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis enim labore facilis consequuntur! Veritatis neque est suscipit tenetur temporibus enim
Foundation
colors
Couleurs principales
PRIMAIRE
SECONDAIRE
Couleurs Alertes
INFO
SUCCESS
DANGER
WARNING
typography
Font Stacks
Roboto Condensed, "Open Sans", Helvetica, Arial, sans-serif;
Raleway, "Segoe UI", Tahoma, sans-serif;
Content Styles
address
Example
Twitter, Inc.795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@example.com
Copy Source
<address>
<strong>Twitter, Inc.</strong><br />
795 Folsom Ave, Suite 600<br />
San Francisco, CA 94107<br />
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br />
<a href="mailto:#">first.last@example.com</a>
</address>
blockquote
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Encarts article
En un clic vous aurez ainsi la déclinaison du salaire en brut horaire, mensuel et annuel. On ne dit pas 2500 euros net par mois mais 30 KE brut annuel.
En un clic vous aurez ainsi la déclinaison du salaire en brut horaire, mensuel et annuel. On ne dit pas 2500 euros net par mois mais 30 KE brut annuel.
Copy Source
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.
</p>
</blockquote>
<!-- <h3>Blockquote with a source</h3>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<h3>Alignment</h3>
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote text-end">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> -->
<br /><br /><br />
<h5>Encarts article</h5>
<br />
<p class="article-quote article-quote-right">
En un clic vous aurez ainsi la déclinaison du salaire en brut horaire, mensuel
et annuel. On ne dit pas 2500 euros net par mois mais 30 KE brut annuel.
</p>
<p class="article-quote">
En un clic vous aurez ainsi la déclinaison du salaire en brut horaire, mensuel
et annuel. On ne dit pas 2500 euros net par mois mais 30 KE brut annuel.
</p>
code
Example
Inline code
For example,<section> should be wrapped as inline.
Code blocks
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
Variables
y = mx + bUser input
To switch directories, type cd followed by the name of the directory.To edit settings, press ctrl + ,
Sample output
This text is meant to be treated as sample output from a computer program.Copy Source
<h3>Inline code</h3>
For example, <code><section></code> should be wrapped as inline.
<h3 class="mt-5">Code blocks</h3>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
<h3 class="mt-5">Variables</h3>
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<h3 class="mt-5">User input</h3>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<h3 class="mt-5">Sample output</h3>
<samp>This text is meant to be treated as sample output from a computer program.</samp>
definition lists
Example
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Horizontal
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Copy Source
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec
elit.
</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<h3>Horizontal</h3>
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec
elit.
</dd>
</dl>
form controls
Example
Inline checkboxes
Copy Source
<input type="text" class="form-control" placeholder="Text input" />
<input
class="form-control"
id="disabledInput"
type="text"
placeholder="Disabled input here..."
disabled
/>
<input class="form-control input-lg" type="text" placeholder=".input-lg" />
<input class="form-control" type="text" placeholder="Default input" />
<input class="form-control input-sm" type="text" placeholder=".input-sm" />
<div class="row">
<div class="col-2">
<input type="text" class="form-control" placeholder=".col-2" />
</div>
<div class="col-3">
<input type="text" class="form-control" placeholder=".col-3" />
</div>
<div class="col-4">
<input type="text" class="form-control" placeholder=".col-4" />
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" />
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" />
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<textarea class="form-control" rows="3"></textarea>
<div class="checkbox">
<label>
<input type="checkbox" value="" />
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input
type="radio"
name="optionsRadios"
id="optionsRadios1"
value="option1"
checked
/>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input
type="radio"
name="optionsRadios"
id="optionsRadios2"
value="option2"
/>
Option two can be something else and selecting it will deselect option one
</label>
</div>
<h3>Inline checkboxes</h3>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1" /> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2" /> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3" /> 3
</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
headings display
Example
Copy Source
<!-- <h6 style="color: gray;">Display 1</h6>
<h1 class="display-1">L'essentiel de la culture au pays des paradoxes</h1>
<h6 style="color: gray;">Display 2</h6>
<h1 class="display-2">L'essentiel de la culture au pays des paradoxes</h1>
<h6 style="color: gray;">Display 3</h6>
<h1 class="display-3">L'essentiel de la culture au pays des paradoxes</h1>
<h6 style="color: gray;">Display 4</h6>
<h1 class="display-4">L'essentiel de la culture au pays des paradoxes</h1> -->
headings
Example
H1
L'essentiel de la culture au pays des paradoxes
H2
L'essentiel de la culture au pays des paradoxes
H3
L'essentiel de la culture au pays des paradoxes
H4
L'essentiel de la culture au pays des paradoxes
H5
L'essentiel de la culture au pays des paradoxes
H6
L'essentiel de la culture au pays des paradoxes
Copy Source
<h6 style="color: gray;">H1</h6>
<h1 class="h1">L'essentiel de la culture au pays des paradoxes</h1>
<h6 style="color: gray;">H2</h6>
<h2 class="h2 text-secondary">
L'essentiel de la culture au pays des paradoxes
</h2>
<h6 style="color: gray;">H3</h6>
<h3 class="h3">L'essentiel de la culture au pays des paradoxes</h3>
<h6 style="color: gray;">H4</h6>
<h4 class="h4">L'essentiel de la culture au pays des paradoxes</h4>
<h6 style="color: gray;">H5</h6>
<h5 class="h5">L'essentiel de la culture au pays des paradoxes</h5>
<h6 style="color: gray;">H6</h6>
<h6 class="h6">L'essentiel de la culture au pays des paradoxes</h6>
images
Example
Avatar carré
Les vignettes des offres d'emplois
Avatar rond
Essentiellement les vignettes du cadre "auteur"(plus grand) et "commentaires"(plus petit)
Copy Source
<!-- <p>
<img src="//placehold.it/120x100" class="rounded" />
<img src="//placehold.it/120x100" class="rounded-circle" />
<img src="//placehold.it/120x100" class="img-thumbnail" />
</p>
<p>
<img src="//placehold.it/1200x300" class="img-fluid" />
</p>
<p>
<img src="//placehold.it/120x100" class="rounded float-left" alt="..." />
<img src="//placehold.it/120x100" class="rounded float-right" alt="..." />
</p>
<p>
<img src="//placehold.it/120x100" class="rounded mx-auto d-block" />
</p>
<p class="text-center">
<img src="//placehold.it/120x100" class="img-fluid" />
</p>
<h3 class="mt-5">Responsive images </h3>
<img src="//placehold.it/1200x300" class="img-fluid" alt="Responsive image">
<h3 class="mt-5">Figures </h3>
<figure class="figure">
<img src="//placehold.it/400x300" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<figure class="figure">
<img src="//placehold.it/400x300" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>
-->
<h4 style="color: gray;">Avatar carré</h4>
<p>Les vignettes des offres d'emplois</p>
<img src="//placehold.it/150x110" class="img-fluid" alt="A" />
<!-- <img src="//placehold.it/48x48" class="img-fluid" alt="B" />
<img src="//placehold.it/32x32" class="img-fluid" alt="C" /> -->
<h4 style="color: gray;">Avatar rond</h4>
<p>
Essentiellement les vignettes du cadre "auteur"(plus grand) et
"commentaires"(plus petit)
</p>
<img src="//placehold.it/164x164" class="rounded-circle" alt="A" />
<img src="//placehold.it/87x87" class="rounded-circle" alt="B" />
<img src="//placehold.it/64x64" class="rounded-circle" alt="C" />
tables
Example
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Dark tables
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Striped rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table head options
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Copy Source
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3 class="mt-5">Dark tables</h3>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3 class="mt-5">Striped rows</h3>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3 class="mt-5">Table head options </h3>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>text elements
Example
Body
L'essentiel de la culture au pays des paradoxes
L'essentiel de la culture au pays des paradoxes
L'essentiel de la culture au pays des paradoxes
Paragraphes
Display 1 / Body / Infos
L'essentiel de la culture au pays des paradoxes
Nullam quis risus eget vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Vel augue laoreet rutrum faucibus dolor auctor.
Vivamus sagittis lacus vel augue laoreet rutrum.
Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.
Warning: Etiam porta sem malesuada magna mollis euismod.
Danger: Donec ullamcorper nulla non metus auctor fringilla.
Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Info: Maecenas sed diam eget risus varius blandit sit amet non magna.
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Copy Source
<h6 style="color: gray;">Body</h6>
<p>L'essentiel de la culture au pays des paradoxes </p>
<p>L'essentiel de la culture au pays des paradoxes </p>
<p>L'essentiel de la culture au pays des paradoxes </p>
<!-- <h6 style="color: gray;">Body2</h6>
<p class="p2bold">L'essentiel de la culture au pays des paradoxes </p>
<p class="p2500">L'essentiel de la culture au pays des paradoxes </p>
<p class="p2normal">L'essentiel de la culture au pays des paradoxes </p>
<h6 style="color: gray;">Légende</h6>
<p class="legendebold">L'essentiel de la culture au pays des paradoxes </p>
<p class="legende">L'essentiel de la culture au pays des paradoxes </p>
<h6 style="color: gray;">Infos</h6>
<p class="infobold">L'essentiel de la culture au pays des paradoxes </p>
<p class="info">L'essentiel de la culture au pays des paradoxes </p> -->
<h4>Paragraphes</h4>
<h6 style="color: gray;">Display 1 / Body / Infos</h6>
<h1 class="">L'essentiel de la culture au pays des paradoxes</h1>
<p class="">Nullam quis risus eget vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p class="">Vel augue laoreet rutrum faucibus dolor auctor.<p class="info">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
</p>
<p class="lead">Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-muted">Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-warning">Warning: Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Danger: Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Info: Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<h3 class="mt-5">Inline text elements</h3>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Patterns - Design and mark-up components unique to your site.
alerts
Example
Neutral info displayed
here. Carry on.
A successful message
appears to those who did well.
An error message
displayed when something went wrong.
Warning text
here so you can be more careful.
Copy Source
<!-- Sample pattern, your site's patterns will be different -->
<div class="alert alert-info" role="alert">
<i class="bi bi-info-circle-fill text-info mr-10"></i> Neutral info displayed
here. Carry on.
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success" role="alert">
<i class="bi bi-check-circle-fill text-success mr-10"></i>A successful message
appears to those who did well.<button
type="button"
class="close"
data-bs-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-danger" role="alert">
<i class="bi bi-x-circle-fill text-danger mr-10"></i> An error message
displayed when something went wrong.<button
type="button"
class="close"
data-bs-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-warning" role="alert">
<i class="bi bi-exclamation-triangle-fill text-warning mr-10"></i>Warning text
here so you can be more careful.<button
type="button"
class="close"
data-bs-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<!-- <div class="alert alert-warning" role="alert">
<strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-danger" role="alert">
<strong>Danger Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam.
</div>
<div class="alert alert-success" role="alert">
<strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>
<div class="alert alert-info" role="alert">
<strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>
<div class="alert alert-light" role="alert">
<strong>Light Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>
<div class="alert alert-dark" role="alert">
<strong>Dark Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div> -->
<!-- <h3 class="mt-5">Link color </h3>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div> -->
<!-- <h3 class="mt-5">Additional content </h3>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<h3 class="mt-5">Dismissing </h3>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
-->
badges
Example
Badges de couleurs
Primary Secondary Success Danger Warning Info Light DarkBadge catégories articles
Trouver sa voie Se former Évaluer ses collaborateursCopy Source
<h6>Badges de couleurs</h6>
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
<br />
<br />
<h6>Badge catégories articles</h6>
<span class="badge badge-category">Trouver sa voie</span>
<span class="badge badge-category">Se former</span>
<span class="badge badge-category">Évaluer ses collaborateurs</span>
breadcrumbs
Example
Copy Source
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>buttons advanced
Example
Button Groups
With Dropdown
Vertical
Justified
Copy Source
<h4>Button Groups</h4>
<!--sizes-->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<h4>With Dropdown</h4>
<div class="btn-group" role="group" aria-label="Button group with dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button
id="btnGroupDrop1"
type="button"
class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<h4>Vertical</h4>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group">
<button
id="btnGroupVerticalDrop1"
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
>
Dropdown
</button>
<div
class="dropdown-menu"
role="menu"
aria-labelledby="btnGroupVerticalDrop1"
>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<button type="button" class="btn btn-primary">Button</button>
</div>
<!--justified-->
<h4>Justified</h4>
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
buttons
Example
Large buttons
Medium
Texte
Copy Source
<h4>Large buttons</h4>
<p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-primary" disabled>Inactif</button>
</p>
<p>
<button type="button" class="btn btn-outline-primary">Primary outline</button>
<button type="button" class="btn btn-outline-secondary">
Secondary outline
</button>
<button type="button" class="btn btn-outline-primary disabled">
Inactif
</button>
</p>
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
</div>
<div class="mt-2">
<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>
</div>
<h4>Medium</h4>
<p>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-secondary btn-sm">Secondary</button>
<button type="button" class="btn btn-primary btn-sm" disabled>Inactif</button>
</p>
<p>
<button type="button" class="btn btn-outline-primary btn-sm">
Primary outline
</button>
<button type="button" class="btn btn-outline-secondary btn-sm">
Secondary outline
</button>
<button type="button" class="btn btn-outline-primary btn-sm disabled">
Inactif
</button>
</p>
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
</div>
<div class="mt-2">
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
</div>
<!-- <h4>Autre</h4> -->
<!-- <p>
<button class="btn btn-primary btn-spinner" type="button" disabled>
Primary
<span
class="spinner-border spinner-border"
role="status"
aria-hidden="true"
></span>
</button>
</p> -->
<!-- <p>
<button class="btn btn-primary btn-sm-spinner" type="button" disabled>
<span class="spinner-dots" role="status" aria-hidden="true"></span>
</button>
</p>
<h4>Float</h4>
<p>
<button type="button" class="btn btn-primary btn-circle bg-primary">
<span class="fas fa-times" style="color: white; font-size: 1rem;"></span>
</button>
<button type="button" class="btn btn-primary btn-circle bg-black">
<span class="fas fa-times" style="color: white; font-size: 1rem;"></span>
</button>
<button type="button" class="btn btn-primary btn-circle bg-alternative">
<span class="fas fa-times" style="color: black; font-size: 1rem;"></span>
</button>
<button type="button" class="btn btn-primary btn-circle bg-alternative">
<span
class="fas fa-chevron-right"
style="color: black; font-size: 1rem;"
></span>
</button>
</p>
<p>
<button
type="button"
class="btn btn-primary btn-circle btn-circle-sm btn-menu bg-primary"
></button>
<button
type="button"
class="btn btn-primary btn-circle btn-circle-sm btn-menu bg-black"
></button>
<button
type="button"
class="btn btn-primary btn-circle btn-circle-sm btn-menu bg-alternative"
></button>
<button
type="button"
class="btn btn-primary btn-circle btn-circle-sm bg-alternative"
>
<span
class="fas fa-chevron-right"
style="color: black; font-size: 0.75rem;"
></span>
</button>
</p> -->
<h4>Texte</h4>
<button type="button" class="btn btn-link">Default</button>
<button type="button" class="btn btn-link">
<div class="icon icon-settings mr-1"></div>
Default
</button>
<button type="button" class="btn btn-link">
Default
<div class="icon icon-arrow ml-1"></div>
</button>
card
Example
Grid cards
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Copy Source
<!-- <h2> Body </h2>
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<h2 class="mt-5"> List Groups </h2>
<div class="card" style="width: 18rem;">
<div class="card-header">
Card title
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<h2 class="mt-5"> Titles, text and links </h2>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<h2 class="mt-5">Images </h2>
<div class="card" style="width: 18rem;">
<img src="//placehold.it/120x100" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<h3> Image caps </h3>
<div class="card mb-3">
<img src="//placehold.it/300x100" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="//placehold.it/300x100" class="card-img-top" alt="...">
</div>
<h3> Image overlays </h3>
<div class="card bg-dark text-white">
<img src="//placehold.it/600x300" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
<h3> Horizontal</h3>
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="//placehold.it/100x150" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<h2 class="mt-5">Kitchen sink </h2>
<div class="card" style="width: 18rem;">
<img src="//placehold.it/120x100" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<h2 class="mt-5"> Card styles </h2>
<h3> Background and color </h3>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<h3> Border and colors </h3>
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div> -->
<h2 class="mt-5">Grid cards</h2>
<div class="row">
<div class="col mb-3">
<div class="card">
<img src="//placehold.it/420x250" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title text-secondary">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in
to additional content.
</p>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card">
<img src="//placehold.it/420x250" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title text-secondary">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in
to additional content. This content is a little bit longer.
</p>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card">
<img src="//placehold.it/420x250" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title text-secondary">Card title</h5>
<p class="card-text">
This is a longer card with supporting text below as a natural lead-in
to additional content.
</p>
</div>
</div>
</div>
</div>
carousel
Example
Copy Source
<!-- <h3> Slides only </h3>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
</div>
</div>
<h3> With controls and indicators </h3>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<h3> With captions </h3>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<h3> Crossfade </h3>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div> -->
collapse
Example
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Copy Source
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>dropdowns
Example
Copy Source
<header class="banner sticky-top">
<div class="container d-flex py-2 justify-content-between align-items-center">
<a class="navbar-brand brand" href="/"> LOGO </a>
<style type="text/css">
.logo {
max-width: 240px;
}
</style>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Accueil</a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Que faisons-nous
</a>
<ul
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<li><a class="dropdown-item" href="#">Palettisation</a></li>
<li><a class="dropdown-item" href="#">Convoyage</a></li>
<li>
<a class="dropdown-item" href="#">Dosage</a>
</li>
<li>
<a class="dropdown-item" href="#">Divers</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Références</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- <nav
id="nav-primary"
class="position-md-static nav-primary py-5 py-md-0 d-md-block h-md-100 w-100 w-md-auto ml-auto position-absolute start-0 top-100"
style="height: 330.531px;"
>
<ul
id="menu-menu-1"
class="nav flex-nowrap d-md-flex align-items-md-center container pe-0 align-items-start flex-column flex-md-row"
itemscope=""
itemtype="http://www.schema.org/SiteNavigationElement"
>
<li
id="menu-item-27"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27 nav-item"
>
<a itemprop="url" href="//10.8.0.6:3000/le-cabinet/" class="nav-link"
><span itemprop="name">Accueil</span></a
>
</li>
<li
id="menu-item-29"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-29 nav-item"
>
<a
href="#"
aria-haspopup="true"
aria-expanded="false"
class="dropdown-toggle nav-link"
id="menu-item-dropdown-29"
data-bs-toggle="dropdown"
><span itemprop="name">Que faisons nous</span></a
>
<ul class="dropdown-menu">
<ul class="">
<li class="px-3">
<a class="dropdown-item" href="#">Palettisation</a>
</li>
<li class="px-3">
<a class="dropdown-item" href="#">Convoyage</a>
</li>
<li class="px-3">
<a class="dropdown-item" href="#">Dosage</a>
</li>
<li class="px-3">
<a class="dropdown-item" href="#">Divers</a>
</li>
</ul>
</ul>
</li>
<li
id="menu-item-28"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28 nav-item"
>
<a
itemprop="url"
href="//10.8.0.6:3000/offres-demploi/"
class="nav-link"
><span itemprop="name">Références</span></a
>
</li>
<li
id="menu-item-24"
class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-24 nav-item"
>
<a itemprop="url" href="//10.8.0.6:3000/articles/" class="nav-link"
><span itemprop="name">Contact</span></a
>
</li>
</ul>
</nav> -->
<button
class="hamburger hamburger--slider d-flex align-items-center d-md-none"
type="button"
aria-label="Menu"
aria-controls="nav-primary"
>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</header>
<!-- dfs -->
forms
Example
INPUT LABELS
Please provide a valid value.
Looks good!
INPUT LABELS WITH CHECKBOXES
Copy Source
<h4 style="color: gray;"> INPUT LABELS </h4>
<div class="form-group">
<label for="exampleInputEmail">LABEL</label>
<input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Placeholder">
</div>
<fieldset disabled>
<div class="form-group">
<label for="DisabledInputEmail">LABEL</label>
<input type="email" class="form-control" id="DisabledInputEmail" aria-describedby="emailHelp" placeholder="Inactif">
</div>
</fieldset>
<div class="form-group">
<label for="validationServer03">MESSAGE ERREUR</label>
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="Value" required>
<div class="invalid-feedback">
Please provide a valid value.
</div>
<div class="form-group">
<label for="validationServer01">MESSAGE VALIDATION</label>
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="Value" value="Value" required>
<div class="valid-feedback">
Looks good!
</div>
<h4 style="color: gray;"> INPUT LABELS WITH CHECKBOXES </h4>
<div class="form-group">
<label for="exampleInputEmail">LABEL</label>
<input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Placeholder">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1"> Se souvenir de moi</label>
</div>
<fieldset disabled>
<div class="form-group">
<label for="exampleInputEmail">LABEL</label>
<input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Placeholder">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1"> Se souvenir de moi</label>
</div>
</fieldset>
<h4 style="color: gray;"> TEXT AREA </h4>
<div class="form-group">
<label for="exampleFormControlTextarea1">LABEL</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Placeholder"></textarea>
</div>
<fieldset disabled>
<div class="form-group">
<label for="exampleFormControlTextarea1">LABEL</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Placeholder"></textarea>
</div>
</fieldset>
<h4 style="color: gray;"> DROPDOWNS </h4>
<div class="form-group">
<label for="inputState">LABEL</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>Valeur 1</option>
<option>Valeur 2</option>
<option>Valeur 3</option>
</select>
</div>
<h4 style="color: gray;"> MULTIPLE CHOICES </h4>
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<!-- //Calendrier
-->
<h4 style="color: gray;"> calendar </h4>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<a href="#">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
<h4 style="color: gray;"> CHECKBOXES </h4>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<h4 style="color: gray;"> boutons radio </h4>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
<!-- <h4 style="color: gray;"> toggle buttons </h4>
<div class="toggle btn btn-primary" data-bs-toggle="toggle" role="button">
<input type="checkbox" checked data-bs-toggle="toggle" data-onstyle="primary">
<div class="toggle-group">
<label class="btn btn-primary toggle-on">
On
</label>
<label class="btn btn-alternative togle-off">
Off
</label>
<span class="toggle-handle btn btn-alternative"> </span>
</div>
</div> -->
<!-- <form>
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile">
<small id="emailHelp" class="form-text text-muted"> Help text : Photos, videos, ...</small>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1"> Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<hr>
<form><div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail14"> Email </label>
<input type="email" class="form-control" id="inputEmail14">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div></div>
<div class="form-group"><div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1"> Remember me</label>
</div></div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<hr>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" >Email</label>
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group has-warning">
<label for="inputEmail" >Email</label>
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group has-error">
<label for="inputEmail" >Email</label>
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group has-success">
<label for="inputEmail" >Email</label>
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword" >Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1"> Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form> -->
input group
Example
@
Sizing
Small
Default
Large
Multiple addons
$
0.00
$
0.00
Button addons
Buttons with dropdowns
Custom forms
Custom file input
Upload
Upload
Copy Source
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">@</span>
</div>
<input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
/>
</div>
<h3 class="mt-5">Sizing</h3>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input
type="text"
class="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input
type="text"
class="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default"
/>
</div>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input
type="text"
class="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-lg"
/>
</div>
<h3 class="mt-5">Multiple addons</h3>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<input
type="text"
class="form-control"
aria-label="Dollar amount (with dot and two decimal places)"
/>
</div>
<div class="input-group">
<input
type="text"
class="form-control"
aria-label="Dollar amount (with dot and two decimal places)"
/>
<div class="input-group-append">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
<h3 class="mt-5">Button addons</h3>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">
Button
</button>
</div>
<input
type="text"
class="form-control"
placeholder=""
aria-label="Example text with button addon"
aria-describedby="button-addon1"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">
Button
</button>
</div>
</div>
<h3 class="mt-5">Buttons with dropdowns</h3>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button
class="btn btn-outline-secondary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input
type="text"
class="form-control"
aria-label="Text input with dropdown button"
/>
</div>
<div class="input-group">
<input
type="text"
class="form-control"
aria-label="Text input with dropdown button"
/>
<div class="input-group-append">
<button
class="btn btn-outline-secondary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<h3 class="mt-5">Custom forms</h3>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect02">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<select
class="custom-select"
id="inputGroupSelect03"
aria-label="Example select with button addon"
>
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group">
<select
class="custom-select"
id="inputGroupSelect04"
aria-label="Example select with button addon"
>
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<h3 class="mt-5">Custom file input</h3>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input
type="file"
class="form-control"
id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01"
/>
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="form-control" id="inputGroupFile02" />
<label
class="custom-file-label"
for="inputGroupFile02"
aria-describedby="inputGroupFileAddon02"
>Choose file</label
>
</div>
<div class="input-group-append">
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button
class="btn btn-outline-secondary"
type="button"
id="inputGroupFileAddon03"
>
Button
</button>
</div>
<div class="custom-file">
<input
type="file"
class="form-control"
id="inputGroupFile03"
aria-describedby="inputGroupFileAddon03"
/>
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
</div>
</div>
<div class="input-group">
<div class="custom-file">
<input
type="file"
class="form-control"
id="inputGroupFile04"
aria-describedby="inputGroupFileAddon04"
/>
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button
class="btn btn-outline-secondary"
type="button"
id="inputGroupFileAddon04"
>
Button
</button>
</div>
</div>
jumbotron
Example
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn moreCopy Source
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class:="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>list groups
Example
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
With links
Contextual classes
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
Copy Source
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge">1</span>
Morbi leo risus
</li>
</ul>
<h3>With links</h3>
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<h3>Contextual classes</h3>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>lists
Example
Unordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Unstyled
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Inline
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
SOCIAL
icones
Copy Source
<h3>Unordered</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<h3>Ordered</h3>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
<h3>Unstyled</h3>
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<h3>Inline</h3>
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
<h3>SOCIAL</h3>
<p>
<i class="fab fa-facebook-square text-secondary" style="font-size: 2rem;"></i>
<i class="fab fa-twitter text-secondary" style="font-size: 2rem;"></i>
<i class="fab fa-instagram text-secondary" style="font-size: 2rem;"></i>
<i class="bi bi-linkedin text-secondary" style="font-size: 2rem;"></i>
</p>
<!-- <i class="fab fa-facebook-square" style="width:2.15rem; font-size:2rem; color: white; background-color: pink; padding:5px;"></i>
<i class="fab fa-youtube" style="color: white; background-color: pink; width:2.15rem;font-size:2rem; padding:5px;"></i>
<i class="fab fa-twitter" style="color: white; background-color: pink; width:2.15rem; font-size:2rem; padding:5px;"></i>
<i class="fab fa-instagram" style="color: white; background-color: pink; width:2.15rem; font-size:2rem; padding:5px;"></i>
<i class="fas fa-bookmark" style="color: white; background-color: pink; width:2.15rem; font-size:2rem; padding:5px;"></i> -->
<h3>icones</h3>
<img src="/app/themes/ds-custom/public/icons/atoms.svg" style="height: 32px;" />
<img src="/app/themes/ds-custom/public/icons/chat.svg" style="height: 32px;" />
<img src="/app/themes/ds-custom/public/icons/degree.svg" style="height: 32px;" />
<img
src="/app/themes/ds-custom/public/icons/diamond.svg"
style="height: 32px;"
/>
<img src="/app/themes/ds-custom/public/icons/email.svg" style="height: 32px;" />
<img
src="/app/themes/ds-custom/public/icons/graphic.svg"
style="height: 32px;"
/>
<img
src="/app/themes/ds-custom/public/icons/handshake.svg"
style="height: 32px;"
/>
<img src="/app/themes/ds-custom/public/icons/heart.svg" style="height: 32px;" />
<img src="/app/themes/ds-custom/public/icons/light.svg" style="height: 32px;" />
<img src="/app/themes/ds-custom/public/icons/like.svg" style="height: 32px;" />
<img src="/app/themes/ds-custom/public/icons/tel.svg" style="height: 32px;" />
<img src="/app/themes/ds-custom/public/icons/users.svg" style="height: 32px;" />
media object
Example
Default
Media heading
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.Media heading
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.Nested media heading
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.Media List
-
Media heading
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.
-
Nested media heading
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. -
Nested media heading
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.
Copy Source
<h3>Default</h3>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object mr-3" src="http://www.placehold.it/64x64" alt="media-object">
</a>
<div class="media-body">
<h4 class="media-heading mt-0">Media heading</h4>
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.
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object mr-3 mt-3" src="http://www.placehold.it/64x64" alt="media-object">
</a>
<div class="media-body">
<h4 class="media-heading mt-3">Media heading</h4>
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.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object mr-3 mt-3" src="http://www.placehold.it/64x64" alt="media-object">
</a>
<div class="media-body">
<h4 class="media-heading mt-3">Nested media heading</h4>
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.
</div>
</div>
</div>
</div>
<h3>Media List</h3>
<ul class="list-unstyled">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object mr-3" src="http://www.placehold.it/64x64" alt="media-object">
</a>
<div class="media-body">
<h4 class="media-heading mt-0 mb-1">Media heading</h4>
<p>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.</p>
</div>
</li>
<li class="media my-4">
<a class="pull-left" href="#">
<img class="media-object mr-3" src="http://www.placehold.it/64x64" alt="media-object">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
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.
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object mr-3" src="http://www.placehold.it/64x64" alt="media-object">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
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.
</div>
</li>
</ul>
modal
Example
Demo modal components
Scrolling long content
Vertically centered
Optional sizes
Copy Source
<h3> Demo modal components </h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<h3> Scrolling long content </h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<h3>Vertically centered </h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<h3> Optional sizes </h3>
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Extra large modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Large modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Small modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
page header
Example
Example page header Subtext for header
Copy Source
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>pagination
Example
Icones
Copy Source
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true"
>Previous</a
>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm justify-content-center">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
<nav aria-label="..." class="dots-pagination">
<ul class="pagination pagination-sm justify-content-center">
<li class="page-item active" aria-current="page">
<span class="page-link">•</span>
</li>
<li class="page-item"><a class="page-link" href="#">•</a></li>
<li class="page-item"><a class="page-link" href="#">•</a></li>
</ul>
</nav>
<h4 class="mt-5">Icones</h4>
<i class="fas fa-stream text-primary"></i>
<i class="fas fa-paw text-primary"></i>
<i class="fas fa-user text-primary"></i>
<i class="fas fa-dragon text-primary"></i>
<i class="fas fa-cube text-primary"></i>
<i class="fas fa-city text-primary"></i>
<i class="fas fa-spa text-primary"></i>
<i class="fas fa-tree text-primary"></i>
<i class="fas fa-th-large text-primary"></i>
<!-- <h4 class="mt-5">Icones mon profil</h4>
<i class="fas fa-theater-masks text-primary"></i>
<i class="fas fa-tools text-primary"></i>
<i class="fas fa-chart-line text-primary"></i>
<i class="fas fa-address-book text-primary"></i>
<i class="fas fa-user-circle text-primary"></i> -->
<!-- <div class="pagination pagination-dots">
<ul>
<a href="#">
<li></li>
</a>
<a href="#">
<li></li>
</a>
<a href="#">
<li></li>
</a>
<a href="#">
<li></li>
</a>
<a class="is-active" href="#">
<li></li>
</a>
<a href="#">
<li></li>
</a>
</ul>
</div> -->
<!-- <nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">← Older</a></li>
<li class="page-item"><a class="page-link" href="#">Newer →</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-lg">
<li class="page-item"> <a class="page-link" href="#">Prev</a> </li>
<li class="page-item active" aria-current="page"> <a class="page-link" href="#">1<span class="visually-hidden">(current)</span></a> </li>
<li class="page-item"> <a class="page-link" href="#">2</a> </li>
<li class="page-item"> <a class="page-link" href="#">3</a> </li>
<li class="page-item"> <a class="page-link" href="#">Next</a> </li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"> <a class="page-link" href="#">Prev</a> </li>
<li class="page-item active" aria-current="page"> <a class="page-link" href="#">1<span class="visually-hidden">(current)</span></a> </li>
<li class="page-item"> <a class="page-link" href="#">2</a> </li>
<li class="page-item"> <a class="page-link" href="#">3</a> </li>
<li class="page-item"> <a class="page-link" href="#">Next</a> </li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm">
<li class="page-item"> <a class="page-link" href="#">Prev</a> </li>
<li class="page-item active" aria-current="page"> <a class="page-link" href="#">1<span class="visually-hidden">(current)</span></a> </li>
<li class="page-item"> <a class="page-link" href="#">2</a> </li>
<li class="page-item"> <a class="page-link" href="#">3</a> </li>
<li class="page-item"> <a class="page-link" href="#">Next</a> </li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">← Older</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Newer →</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav> -->
popovers
Example
Four directions
Copy Source
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<h3 class="mt-5">Four directions </h3>
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
progress bars
Example
Copy Source
<!-- <div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 60%;"
>
<span class="visually-hidden">60% Complete</span>
</div>
</div>
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
style="width: 100%;"
></div>
</div>
<span class="progresstext">Transfert En Cours...</span>
<h3> Étapes </h3>
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__supporting-text">
<div class="mdl-stepper-horizontal-alternative">
<div class="mdl-stepper-step active-step step-done">
<div class="mdl-stepper-circle d-flex justify-content-center align-items-center"><span>1</span></div>
<div class="mdl-stepper-bar-left"></div>
<div class="mdl-stepper-bar-right"></div>
</div>
<div class="mdl-stepper-step active-step">
<div class="mdl-stepper-circle d-flex justify-content-center align-items-center"><span>2</span></div>
<div class="mdl-stepper-bar-left"></div>
<div class="mdl-stepper-bar-right"></div>
</div>
<div class="mdl-stepper-step ">
<div class="mdl-stepper-circle d-flex justify-content-center align-items-center"><span>3</span></div>
<div class="mdl-stepper-bar-left"></div>
<div class="mdl-stepper-bar-right"></div>
</div>
<div class="mdl-stepper-step">
<div class="mdl-stepper-circle d-flex justify-content-center align-items-center"><span><i class="fas fa-check" ></i>
</span></div>
<div class="mdl-stepper-bar-left"></div>
<div class="mdl-stepper-bar-right"></div>
</div>
</div>
</div>
</div>
<h3>Curseurs</h3>
<b>0</b>
<input
type="range"
class="custom-range"
min="0"
max="5"
step="1"
id="customRange3"
value="[3]"
/>
<b>5</b> -->
<!-- <div class="progress mb-3">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
-->
<!--
<h3>Contextual Alternatives</h3>
<div class="progress mb-3">
<div
class="progress-bar bg-success"
role="progressbar"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100"
style="width: 40%"
>
<span class="visually-hidden">40% Complete (success)</span>
</div>
</div>
<div class="progress mb-3">
<div
class="progress-bar bg-info"
role="progressbar"
aria-valuenow="20"
aria-valuemin="0"
aria-valuemax="100"
style="width: 20%"
>
<span class="visually-hidden">20% Complete</span>
</div>
</div>
<div class="progress mb-3">
<div
class="progress-bar bg-warning"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 60%"
>
<span class="visually-hidden">60% Complete (warning)</span>
</div>
</div>
<div class="progress mb-3">
<div
class="progress-bar bg-danger"
role="progressbar"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100"
style="width: 80%"
>
<span class="visually-hidden">80% Complete</span>
</div>
</div>
<h3>Striped</h3>
<div class="progress progress-bar-striped mb-3">
<div
class="progress-bar bg-success"
role="progressbar"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100"
style="width: 40%"
>
<span class="visually-hidden">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-bar-striped mb-3">
<div
class="progress-bar bg-info"
role="progressbar"
aria-valuenow="20"
aria-valuemin="0"
aria-valuemax="100"
style="width: 20%"
>
<span class="visually-hidden">20% Complete</span>
</div>
</div>
<div class="progress progress-bar-striped mb-3">
<div
class="progress-bar bg-warning"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 60%"
>
<span class="visually-hidden">60% Complete (warning)</span>
</div>
</div>
<div class="progress progress-bar-striped mb-3">
<div
class="progress-bar bg-danger"
role="progressbar"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100"
style="width: 80%"
>
<span class="visually-hidden">80% Complete (danger)</span>
</div>
</div>
<h3>Animated</h3>
<div class="progress progress-bar-striped progress-bar-animated mb-3">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="45"
aria-valuemin="0"
aria-valuemax="100"
style="width: 45%"
>
<span class="visually-hidden">45% Complete</span>
</div>
</div>
<h3>Stacked</h3>
<div class="progress mb-3">
<div class="progress-bar bg-success" style="width: 35%">
<span class="visually-hidden">35% Complete (success)</span>
</div>
<div class="progress-bar bg-warning" style="width: 20%">
<span class="visually-hidden">20% Complete (warning)</span>
</div>
<div class="progress-bar bg-danger" style="width: 10%">
<span class="visually-hidden">10% Complete (danger)</span>
</div>
</div>
-->
scrollspy
Example
@fat
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
one
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
two
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Example with nested nav
Item 1
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 1-1
Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
Item 1-2
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
Item 2
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
Item 3
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Item 3-1
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
Item 3-2
Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
Example with list-group
Item 1
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 2
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
Item 3
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Item 4
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Copy Source
<nav id="navbar-example2" class="navbar navbar-light bg-light ">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-haspopup="true"
aria-expanded="false"
>Dropdown</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0">
<h4 id="fat">@fat</h4>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim
lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights
whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie
minim qui you probably haven't heard of them et cardigan trust fund culpa
biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony
biodiesel keffiyeh artisan ullamco consequat.
</p>
<h4 id="mdo">@mdo</h4>
<p>
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.
Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi,
ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's
quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non
aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice
keytar deserunt.
</p>
<h4 id="one">one</h4>
<p>
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea.
Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore
single-origin coffee in magna veniam. High life id vinyl, echo park
consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing.
Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus
consectetur fanny pack iphone.
</p>
<h4 id="two">two</h4>
<p>
In incididunt echo park, officia deserunt mcsweeney's proident master
cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch
+1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four
loko, cupidatat terry richardson master cleanse. Assumenda you probably
haven't heard of them art party fanny pack, tattooed nulla cardigan tempor
ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit
wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore
enim nostrud mlkshk brooklyn nesciunt.
</p>
<h4 id="three">three</h4>
<p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim
lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights
whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie
minim qui you probably haven't heard of them et cardigan trust fund culpa
biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony
biodiesel keffiyeh artisan ullamco consequat. Keytar twee blog, culpa
messenger bag marfa whatever delectus food truck. Sapiente synth id
assumenda. Locavore sed helvetica cliche irony, thundercats you probably
haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore
elit placeat before they sold out, terry richardson proident brunch nesciunt
quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft
beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit
minim commodo ullamco thundercats.
</p>
</div>
<h3>Example with nested nav</h3>
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link active" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div
data-spy="scroll"
data-bs-target="#navbar-example3"
data-bs-offset="0"
class="scrollspy-example-2"
>
<h4 id="item-1">Item 1</h4>
<p>
Ex consequat commodo adipisicing exercitation aute excepteur occaecat
ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco
cillum consectetur ut et aute consectetur labore. Fugiat laborum
incididunt tempor eu consequat enim dolore proident. Qui laborum do non
excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia
quis et incididunt voluptate non anim reprehenderit adipisicing dolore
ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non
fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod
cupidatat elit dolore.
</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>
Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum
commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse
voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure
consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud
labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet
proident magna consectetur consequat eu commodo fugiat non quis. Enim
aliquip exercitation ullamco adipisicing voluptate excepteur minim
exercitation minim minim commodo adipisicing exercitation officia nisi
adipisicing. Anim id duis qui consequat labore adipisicing sint dolor
elit cillum anim et fugiat.
</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur
laborum sunt enim. Irure laboris mollit consequat incididunt sint et
culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum
cillum eiusmod sint elit excepteur ea labore enim consectetur in labore
anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et
eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
</p>
<h4 id="item-2">Item 2</h4>
<p>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit
veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse
irure. Laborum nisi sit est tempor laborum mollit labore officia laborum
excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex
est consectetur ipsum commodo tempor sunt in proident.
</p>
<h4 id="item-3">Item 3</h4>
<p>
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit
culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat
excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor
mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco
est ex ullamco excepteur.
</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem
proident nostrud. Ea id dolore anim exercitation aute fugiat labore
voluptate cillum do laboris labore. Ex velit exercitation nisi enim
labore reprehenderit labore nostrud ut ut. Esse officia sunt duis
aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco
proident veniam laboris ea consectetur magna sunt ex exercitation
aliquip minim enim culpa occaecat exercitation. Est tempor excepteur
aliquip laborum consequat do deserunt laborum esse eiusmod irure
proident ipsum esse qui.
</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>
Labore sit culpa commodo elit adipisicing sit aliquip elit proident
voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur
eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit
incididunt. Occaecat consectetur nisi in occaecat proident minim enim
sunt reprehenderit exercitation cupidatat et do officia. Aliquip
consequat ad labore labore mollit ut amet. Sit pariatur tempor proident
in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
</p>
</div>
</div>
</div>
<h3>Example with list-group</h3>
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a
class="list-group-item list-group-item-action active"
href="#list-item-1"
>Item 1</a
>
<a class="list-group-item list-group-item-action" href="#list-item-2"
>Item 2</a
>
<a class="list-group-item list-group-item-action" href="#list-item-3"
>Item 3</a
>
<a class="list-group-item list-group-item-action" href="#list-item-4"
>Item 4</a
>
</div>
</div>
<div class="col-8">
<div
data-spy="scroll"
data-bs-target="#list-example"
data-bs-offset="0"
class="scrollspy-example"
>
<h4 id="list-item-1">Item 1</h4>
<p>
Ex consequat commodo adipisicing exercitation aute excepteur occaecat
ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco
cillum consectetur ut et aute consectetur labore. Fugiat laborum
incididunt tempor eu consequat enim dolore proident. Qui laborum do non
excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia
quis et incididunt voluptate non anim reprehenderit adipisicing dolore
ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non
fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod
cupidatat elit dolore.
</p>
<h4 id="list-item-2">Item 2</h4>
<p>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit
veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse
irure. Laborum nisi sit est tempor laborum mollit labore officia laborum
excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex
est consectetur ipsum commodo tempor sunt in proident.
</p>
<h4 id="list-item-3">Item 3</h4>
<p>
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit
culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat
excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor
mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco
est ex ullamco excepteur.
</p>
<h4 id="list-item-4">Item 4</h4>
<p>
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit
culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat
excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor
mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco
est ex ullamco excepteur.
</p>
</div>
</div>
</div>
spinners
Example
Border spinner
Loading...
Sizes
Loading...
Loading...
Loading...
Loading...
Placement
Flex
Loading...
Float
Loading...
Colors
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Growing spinner
Loading...
Colors
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Buttons
Buttons2
Specific spinners
Copy Source
<h3>Border spinner</h3>
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<h3 class="mt-5">Sizes</h3>
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border" style="width: 3rem;
height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem;
height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<h3 class="mt-5">Placement</h3>
<h4>Flex</h4>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<h4>Float</h4>
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<h3 class="mt-5">Colors</h3>
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<h3 class="mt-5">Growing spinner</h3>
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<h3 class="mt-5">Colors</h3>
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<h3 class="mt-5">Buttons</h3>
<button class="btn btn-primary" type="button" disabled>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
Loading...
</button>
<h3 class="mt-5">Buttons2</h3>
<button class="btn btn-primary" type="button" disabled>
<span
class="spinner-grow spinner-grow-sm"
role="status"
aria-hidden="true"
></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span
class="spinner-grow spinner-grow-sm"
role="status"
aria-hidden="true"
></span>
Loading...
</button>
<h3 class="mt-5">Specific spinners</h3>
thumbnails
Example
Copy Source
<div class="row">
<div class="col-xs-6 col-md-3">
<img src="//placehold.it/200x200" class="img-thumbnail" alt="100%x180" >
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
</a>
</div>
</div>toasts
Example
Basic
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Copy Source
<h3>Basic </h3>
<div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="http://via.placeholder.com/20x20" class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="http://via.placeholder.com/20x20" class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>tooltips
Example
Disabled elements
Copy Source
<button
type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Tooltip on top"
>
Tooltip on top
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-title="Tooltip on right"
>
Tooltip on right
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-title="Tooltip on bottom"
>
Tooltip on bottom
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="Tooltip on left"
>
Tooltip on left
</button>
<h3 class="mt-5">Disabled elements</h3>
<span
class="d-inline-block"
tabindex="0"
data-bs-toggle="tooltip"
data-bs-title="Disabled tooltip"
>
<button
class="btn btn-primary"
style="pointer-events: none"
type="button"
disabled
>
Disabled button
</button>
</span>