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
Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
Open Sans, "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>Display 1</h6>
<h1 class="display-1">L'essentiel de la culture au pays des paradoxes</h1>
<h6>Display 2</h6>
<h1 class="display-2">L'essentiel de la culture au pays des paradoxes</h1>
<h6>Display 3</h6>
<h1 class="display-3">L'essentiel de la culture au pays des paradoxes</h1>
<h6>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>H1</h6>
<h1 class="h1">L'essentiel de la culture au pays des paradoxes</h1>
<h6>H2</h6>
<br /><br />
<h2 class="h2 decorated">L'essentiel de la culture au pays des paradoxes</h2>
<h6>H3</h6>
<h3 class="h3 decorated">L'essentiel de la culture au pays des paradoxes</h3>
<h6>H4</h6>
<h4 class="h4">L'essentiel de la culture au pays des paradoxes</h4>
<h6>H5</h6>
<h5 class="h5">L'essentiel de la culture au pays des paradoxes</h5>
<h6>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="https://via.placeholder.com/120x100" class="rounded" />
<img src="https://via.placeholder.com/120x100" class="rounded-circle" />
<img src="https://via.placeholder.com/120x100" class="img-thumbnail" />
</p>
<p>
<img src="https://via.placeholder.com/1200x300" class="img-fluid" />
</p>
<p>
<img src="https://via.placeholder.com/120x100" class="rounded float-left" alt="..." />
<img src="https://via.placeholder.com/120x100" class="rounded float-right" alt="..." />
</p>
<p>
<img src="https://via.placeholder.com/120x100" class="rounded mx-auto d-block" />
</p>
<p class="text-center">
<img src="https://via.placeholder.com/120x100" class="img-fluid" />
</p>
<h3 class="mt-5">Responsive images </h3>
<img src="https://via.placeholder.com/1200x300" class="img-fluid" alt="Responsive image">
<h3 class="mt-5">Figures </h3>
<figure class="figure">
<img src="https://via.placeholder.com/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="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>
-->
<h4>Avatar carré</h4>
<p>Les vignettes des offres d'emplois</p>
<img src="https://via.placeholder.com/150x110" class="img-fluid" alt="A" />
<!-- <img src="https://via.placeholder.com/48x48" class="img-fluid" alt="B" />
<img src="https://via.placeholder.com/32x32" class="img-fluid" alt="C" /> -->
<h4>Avatar rond</h4>
<p>
Essentiellement les vignettes du cadre "auteur"(plus grand) et
"commentaires"(plus petit)
</p>
<img src="https://via.placeholder.com/164x164" class="rounded-circle" alt="A" />
<img src="https://via.placeholder.com/87x87" class="rounded-circle" alt="B" />
<img src="https://via.placeholder.com/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>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>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>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>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>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 alert-dismissible fade show" role="alert">
<i class="bi bi-info-circle-fill text-info mr-10"></i> Neutral info displayed
here. Carry on.
<button
type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
></button>
</div>
<div class="alert alert-success alert-dismissible fade show" 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="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
></button>
</div>
<div class="alert alert-danger alert-dismissible fade show" 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="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
></button>
</div>
<div class="alert alert-warning alert-dismissible fade show" 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="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
></button>
</div>
<!-- <div class="alert alert-warning alert-dismissible fade show " role="alert">
<strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-danger alert-dismissible fade show " role="alert">
<strong>Danger Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam.
</div>
<div class="alert alert-success alert-dismissible fade show " role="alert">
<strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>
<div class="alert alert-info alert-dismissible fade show " role="alert">
<strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>
<div class="alert alert-light alert-dismissible fade show " role="alert">
<strong>Light Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>
<div class="alert alert-dark alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show " 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 alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</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
Card subtitle
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
Card subtitle
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
Card subtitle
This is a longer card with supporting text below as a natural lead-in to additional content.
Frise chronologique
Il était une fois en 2001 …
Aprés avoir fait ses armes comme directeur commercial d'un organisme de formation, Marc jeune entrepreneur dans l'âme crée le cabinet de conseil de recrutement Emergences RH. Caroline, jeune diplômée en psychologie du travail, intègre fièrement Pôle Emploi "aider les autres" est pour elle le plus beau des métiers !
2005 L’OISEAU FAIT SON NID
Marc avec enthousiasme parcourt la France, visite des usines et signe de nombreux marchés. Caroline, quant à elle, devient manager : guider, challenger et faire grandir ses équipes… elle adore !
2010 Place au Coaching
Marc se forme au coaching orienté « solution ». Il fait grandir ses compétences et se challenge sur des missions d'Executive Search à l'international. Il possède ce talent de pouvoir faire émerger ceux des autres.
2013 Chasse AUX Trésors
Les recruteurs deviennent des chasseurs. Ils affutent leurs outils et deviennent des pisteurs. Caroline rentre sur le terrain, délivre des formations et Marc lance les assessments. Tous deux chassent, débusquent, séduisent, évaluent, forment et accompagnent.
2015 EXPÉRIENCE CANDIDAT
Emergences RH obtient le label "Candidat Expérience". Cette reconnaissance encourage l'équipe à maintenir le cap : être transparents, faire preuve d'écoute et d'empathie et construire des relations de confiance avec leurs clients, candidats et partenaires.
2018 DE NOUVEAUX BUREAUX
Emergences RH devient propriétaire de ses bureaux : 180m2 au centre de Nice. Ce qui ne les empechent pas d'être chez eux dans de multiples espaces de coworking aux 4 coins de la France.
2019 EXECUTIVE SEARCH
Caroline et Marc deviennent des chasseurs de cadres dirigeants. Leurs missions prennent de l'envergure. Dans le même temps, les assessments, les 3 Notre histoire 2 formations RH et les coaching d'étudiants se multiplient.
2020 CERTIFICATION QUALIOPI
Comment transformer une situation critique en opportunité ? En quelques mois, le tour est joué. Au menu un nouveau site web, des "Bilans de Compétences", une certification de leurs process et de nouveaux leviers de croissance d’ores et déjà actionnés.
Bloc texte/couleur
Révélateur de Talents pour DRH & Cadres Dirigeants
Depuis 20 ans, nous sommes aux côtés de managers, de comités de direction et de cadres en transition. Leurs réussites sont nos plus belles fiertés : des carrières qui font sens, des collaborateurs heureux et épanouis, des anciens candidats qui deviennent des clients ou encore des transitions professionnelles accompagnées et réussies !
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="https://via.placeholder.com/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="https://via.placeholder.com/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="https://via.placeholder.com/300x100" class="card-img-top" alt="...">
</div>
<h3> Image overlays </h3>
<div class="card bg-dark text-white">
<img src="https://via.placeholder.com/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="https://via.placeholder.com/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="https://via.placeholder.com/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="https://via.placeholder.com/420x250"
class="card-img-top"
alt="..."
/>
<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">
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="https://via.placeholder.com/420x250"
class="card-img-top"
alt="..."
/>
<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">
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="https://via.placeholder.com/420x250"
class="card-img-top"
alt="..."
/>
<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">
This is a longer card with supporting text below as a natural lead-in
to additional content.
</p>
</div>
</div>
</div>
</div>
<h5>Frise chronologique</h5>
<div class="timeline">
<div class="timeline-container row align-items-center">
<h4 class="date-title col-md-6">Il était une fois en 2001 …</h4>
<div class="content col-md-6 d-flex align-items-center">
<div class="timeline__content--inner bg-secondary p-5 text-white">
<p>
Aprés avoir fait ses armes comme directeur commercial d'un organisme
de formation, Marc jeune entrepreneur dans l'âme crée le cabinet de
conseil de recrutement Emergences RH. Caroline, jeune diplômée en
psychologie du travail, intègre fièrement Pôle Emploi "aider les
autres" est pour elle le plus beau des métiers !
</p>
</div>
<!-- /.timeline__content--inner -->
</div>
</div>
<div class="timeline-container row align-items-center">
<h4 class="date-title col-md-6">2005 L’OISEAU FAIT SON NID</h4>
<div class="content col-md-6 d-flex align-items-center">
<div class="timeline__content--inner bg-secondary p-5 text-white">
<p>
Marc avec enthousiasme parcourt la France, visite des usines et signe
de nombreux marchés. Caroline, quant à elle, devient manager : guider,
challenger et faire grandir ses équipes… elle adore !
</p>
</div>
<!-- /.timeline__content--inner -->
</div>
</div>
<div class="timeline-container row align-items-center">
<h4 class="date-title col-md-6">2010 Place au Coaching</h4>
<div class="content col-md-6 d-flex align-items-center">
<div class="timeline__content--inner bg-secondary p-5 text-white">
<p>
Marc se forme au coaching orienté « solution ». Il fait grandir ses
compétences et se challenge sur des missions d'Executive Search à
l'international. Il possède ce talent de pouvoir faire émerger ceux
des autres.
</p>
</div>
<!-- /.timeline__content--inner -->
</div>
</div>
<div class="timeline-container row align-items-center">
<h4 class="date-title col-md-6">2013 Chasse AUX Trésors</h4>
<div class="content col-md-6 d-flex align-items-center">
<div class="timeline__content--inner bg-secondary p-5 text-white">
<p>
Les recruteurs deviennent des chasseurs. Ils affutent leurs outils et
deviennent des pisteurs. Caroline rentre sur le terrain, délivre des
formations et Marc lance les assessments. Tous deux chassent,
débusquent, séduisent, évaluent, forment et accompagnent.
</p>
</div>
<!-- /.timeline__content--inner -->
</div>
</div>
<div class="timeline-container row align-items-center">
<h4 class="date-title col-md-6">2015 EXPÉRIENCE CANDIDAT</h4>
<div class="content col-md-6 d-flex align-items-center">
<div class="timeline__content--inner bg-secondary p-5 text-white">
<p>
Emergences RH obtient le label "Candidat Expérience". Cette
reconnaissance encourage l'équipe à maintenir le cap : être
transparents, faire preuve d'écoute et d'empathie et construire des
relations de confiance avec leurs clients, candidats et partenaires.
</p>
</div>
<!-- /.timeline__content--inner -->
</div>
</div>
<div class="timeline-container row align-items-center">
<h4 class="date-title col-md-6">2018 DE NOUVEAUX BUREAUX</h4>
<div class="content col-md-6 d-flex align-items-center">
<div class="timeline__content--inner bg-secondary p-5 text-white">
<p>
Emergences RH devient propriétaire de ses bureaux : 180m2 au centre de
Nice. Ce qui ne les empechent pas d'être chez eux dans de multiples
espaces de coworking aux 4 coins de la France.
</p>
</div>
<!-- /.timeline__content--inner -->
</div>
</div>
<div class="timeline-container row align-items-center">
<h4 class="date-title col-md-6">2019 EXECUTIVE SEARCH</h4>
<div class="content col-md-6 d-flex align-items-center">
<div class="timeline__content--inner bg-secondary p-5 text-white">
<p>
Caroline et Marc deviennent des chasseurs de cadres dirigeants. Leurs
missions prennent de l'envergure. Dans le même temps, les assessments,
les 3 Notre histoire 2 formations RH et les coaching d'étudiants se
multiplient.
</p>
</div>
<!-- /.timeline__content--inner -->
</div>
</div>
<div class="timeline-container row align-items-center">
<h4 class="date-title col-md-6">2020 CERTIFICATION QUALIOPI</h4>
<div class="content col-md-6 d-flex align-items-center">
<div class="timeline__content--inner bg-secondary p-5 text-white">
<p>
Comment transformer une situation critique en opportunité ? En
quelques mois, le tour est joué. Au menu un nouveau site web, des
"Bilans de Compétences", une certification de leurs process et de
nouveaux leviers de croissance d’ores et déjà actionnés.
</p>
</div>
<!-- /.timeline__content--inner -->
</div>
</div>
</div>
<br /><br />
<h5>Bloc texte/couleur</h5>
<div class="container">
<div class="row">
<div class="col-5">
<img class="img-fluid pt-4" src="https://via.placeholder.com/538x316" />
</div>
<div class="col-7 color-block bg-light p-5">
<h3>Révélateur de Talents pour DRH & Cadres Dirigeants</h3>
<p>
Depuis 20 ans, nous sommes aux côtés de managers, de comités de
direction et de cadres en transition. Leurs réussites sont nos plus
belles fiertés : des carrières qui font sens, des collaborateurs heureux
et épanouis, des anciens candidats qui deviennent des clients ou encore
des transitions professionnelles accompagnées et réussies !
</p>
<button class="btn btn-primary">Découvrir le cabinet</button>
</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="https://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://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="https://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://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="https://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="https://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="https://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="https://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/640x360" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://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>counters
Example
20
Années Magnifiques
440
Témoignages positifs
100
Recrutements par an
3,500
Étudiants formés
100%
De nos clients nous recommandent
300%
D’énergie à votre service
Copy Source
<div
id="counter-container"
class="bg-secondary text-white chiffres row justify-content-center"
>
<div class="chiffre col-sm-6 col-md-4 text-center p-5">
<div class="h1 chiffre__title">
<span class="count" data-countup="20">20</span
><span class="small"><span></span></span>
</div>
<div class="chiffre__content">Années Magnifiques</div>
</div>
<div class="chiffre col-sm-6 col-md-4 text-center p-5">
<div class="h1 chiffre__title">
<span class="count" data-countup="440">440</span
><span class="small"><span></span></span>
</div>
<div class="chiffre__content">Témoignages positifs</div>
</div>
<div class="chiffre col-sm-6 col-md-4 text-center p-5">
<div class="h1 chiffre__title">
<span class="count" data-countup="100">100</span
><span class="small"><span></span></span>
</div>
<div class="chiffre__content">Recrutements par an</div>
</div>
<div class="chiffre col-sm-6 col-md-4 text-center p-5">
<div class="h1 chiffre__title">
<span class="count" data-countup="3500">3,500</span
><span class="small"><span></span></span>
</div>
<div class="chiffre__content">Étudiants formés</div>
</div>
<div class="chiffre col-sm-6 col-md-4 text-center p-5">
<div class="h1 chiffre__title">
<span class="count" data-countup="100">100</span
><span class="small">%<span></span></span>
</div>
<div class="chiffre__content">De nos clients nous recommandent</div>
</div>
<div class="chiffre col-sm-6 col-md-4 text-center p-5">
<div class="h1 chiffre__title">
<span class="count" data-countup="300">300</span
><span class="small">%<span></span></span>
</div>
<div class="chiffre__content">D’énergie à votre service</div>
</div>
</div>
dropdowns
Example
Copy Source
<header class="banner sticky-top bg-secondary text-white">
<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
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-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">Services</span></a
>
<ul class="dropdown-menu">
<ul class="list-inline">
<li class="px-3">
<a class="dropdown-item" href="#">RECRUTEMENT</a>
</li>
<li class="px-3">
<a class="dropdown-item" href="#">BILAN DE COMPÉTENCES</a>
</li>
<li class="px-3">
<a class="dropdown-item" href="#">ÉVALUATION</a>
</li>
<li class="px-3">
<a class="dropdown-item" href="#">FORMATION</a>
</li>
</ul>
</ul>
</li>
<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">Le cabinet</span></a
>
</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">Offres d’emploi</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">Articles</span></a
>
</li>
<li
id="menu-item-26"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26 nav-item"
>
<a itemprop="url" href="//10.8.0.6:3000/contact/" 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 -->
<nav
id="nav-primary"
class="nav-primary py-5 py-md-0 d-md-block h-md-100 w-100 w-md-auto ml-auto position-absolute position-md-relative 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-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">Services</span></a
>
</li>
<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">Le cabinet</span></a
>
</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">Offres d’emploi</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">Articles</span></a
>
</li>
<li
id="menu-item-26"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26 nav-item"
>
<a itemprop="url" href="//10.8.0.6:3000/contact/" class="nav-link"
><span itemprop="name">Contact</span></a
>
</li>
</ul>
</nav>
forms
Example
INPUT LABELS
Please provide a valid value.
Looks good!
INPUT LABELS WITH CHECKBOXES
Copy Source
<h4> 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> 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> 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> SELECT </h4>
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<h4> Sizing </h4>
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<h4> MULTIPLE CHOICES </h4>
<select class="form-select" multiple aria-label="multiple select example">
<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> 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> 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> 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> 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
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">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
<input
type="text"
class="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
<input
type="text"
class="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default"
/>
</div>
<div class="input-group input-group-lg">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
<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">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<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)"
/>
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<h3 class="mt-5">Button addons</h3>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">
Button
</button>
<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"
/>
<button class="btn btn-outline-secondary" type="button" id="button-addon2">
Button
</button>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<input
type="text"
class="form-control"
placeholder=""
aria-label="Example text with two button addons"
/>
</div>
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
/>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</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="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile" />
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label"
>Multiple files input example</label
>
<input class="form-control" type="file" id="formFileMultiple" multiple />
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label"
>Disabled file input example</label
>
<input class="form-control" type="file" id="formFileDisabled" disabled />
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file" />
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file" />
</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="https://via.placeholder.com/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="https://via.placeholder.com/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="https://via.placeholder.com/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="https://via.placeholder.com/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="https://via.placeholder.com/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="https://via.placeholder.com/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>
navs
Example
Tabs
This is some placeholder content the Home tab's associated content. Clicking
another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You
can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Home tab's associated content. Clicking
another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You
can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Home tab's associated content. Clicking
another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You
can use it with tabs, pills, and any other .nav-powered navigation.
Justified Tabs
Pills
This is some placeholder content the Home tab's associated content. Clicking
another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You
can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Home tab's associated content. Clicking
another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You
can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Home tab's associated content. Clicking
another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You
can use it with tabs, pills, and any other .nav-powered navigation.
Tabs with dropdowns
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-bs-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-bs-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-bs-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-bs-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-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on left
</button>
progress bars
Example
Labels
Height
Backgrounds
Multiple Bars
Striped
Animated stripes
Étapes
1
2
3
Curseurs
0 5Copy Source
<div class="sg-example">
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
<h3>Labels</h3>
<div class="sg-example">
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
25%
</div>
</div>
</div>
<h3>Height</h3>
<div class="sg-example">
<div class="progress" style="height: 1px">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress" style="height: 20px">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
<h3>Backgrounds</h3>
<div class="sg-example">
<div class="progress">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar bg-info"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar bg-warning"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar bg-danger"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
<h3>Multiple Bars</h3>
<div class="sg-example">
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 15%"
aria-valuenow="15"
aria-valuemin="0"
aria-valuemax="100"
></div>
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 30%"
aria-valuenow="30"
aria-valuemin="0"
aria-valuemax="100"
></div>
<div
class="progress-bar bg-info"
role="progressbar"
style="width: 20%"
aria-valuenow="20"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
<h3>Striped</h3>
<div class="sg-example">
<div class="progress">
<div
class="progress-bar progress-bar-striped"
role="progressbar"
style="width: 10%"
aria-valuenow="10"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar progress-bar-striped bg-success"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar progress-bar-striped bg-info"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar progress-bar-striped bg-warning"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress">
<div
class="progress-bar progress-bar-striped bg-danger"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
<h3>Animated stripes</h3>
<div class="sg-example">
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
style="width: 75%"
></div>
</div>
</div>
<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="form-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>
scrollspy
Example
First heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Example with nested nav
Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 1-1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 1-2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3-1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3-2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Example with list-group
Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 4
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Copy Source
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-expanded="false"
>Dropdown</a
>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div
data-bs-spy="scroll"
data-bs-target="#navbar-example2"
data-bs-offset="0"
class="scrollspy-example"
tabindex="0"
>
<h4 id="scrollspyHeading1">First heading</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted. It's
repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.
</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted. It's
repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.
</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted. It's
repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.
</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted. It's
repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.
</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as you
scroll down the page, the appropriate navigation link is highlighted. It's
repeated throughout the component example. We keep adding some more example
copy here to emphasize the scrolling and highlighting.
</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 align-items-stretch p-3"
>
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-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 ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div
class="scrollspy-example-2"
data-bs-spy="scroll"
data-bs-target="#navbar-example3"
data-bs-offset="0"
tabindex="0"
>
<h4 id="item-1">Item 1</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h4 id="item-2">Item 2</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h4 id="item-3">Item 3</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</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" 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-bs-spy="scroll"
data-bs-target="#list-example"
data-bs-offset="0"
class="scrollspy-example"
tabindex="0"
>
<h4 id="list-item-1">Item 1</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h4 id="list-item-2">Item 2</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h4 id="list-item-3">Item 3</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</p>
<h4 id="list-item-4">Item 4</h4>
<p>
This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is
highlighted. It's repeated throughout the component example. We keep
adding some more example copy here to emphasize the scrolling and
highlighting.
</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
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>
thumbnails
Example
Copy Source
<div class="row">
<div class="col-xs-6 col-md-3">
<img
src="https://via.placeholder.com/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="display: block; width: 100%; height: 180px"
/>
</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="display: block; width: 100%; height: 180px"
/>
</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="display: block; width: 100%; height: 180px"
/>
</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="https://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="https://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>