Aller au contenu

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 + b

User 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>&lt;section&gt;</code> should be wrapped as inline.
<h3 class="mt-5">Code blocks</h3>
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</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&mdash;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&mdash;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

A

Avatar rond

Essentiellement les vignettes du cadre "auteur"(plus grand) et "commentaires"(plus petit)

A B C
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 @twitter

Dark tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head options

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
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

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 Dark

Badge catégories articles
Trouver sa voie Se former Évaluer ses collaborateurs
Copy 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

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

TEXT AREA

SELECT

Sizing

MULTIPLE CHOICES

calendar

CHECKBOXES

boutons radio

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 more
Copy 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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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-object

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-object

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-object

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-object

    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-object

    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-object

    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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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>

navbar

Copy Source
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdown"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a
            class="nav-link disabled"
            href="#"
            tabindex="-1"
            aria-disabled="true"
            >Disabled</a
          >
        </li>
      </ul>
      <form class="d-flex">
        <input
          class="form-control me-2"
          type="search"
          placeholder="Search"
          aria-label="Search"
        />
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

Copy Source
<!-- <h3> Base nav </h3>
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<h3 class="mt-5">Horizontal alignment</h3>
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<h3 class="mt-5">Justify content </h3>
<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<h3 class="mt-5">Vertical</h3>
<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
 -->
<h3 class="mt-5">Tabs</h3>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button
      class="nav-link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
      role="tab"
      aria-controls="home"
      aria-selected="true"
    >
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="contact-tab"
      data-bs-toggle="tab"
      data-bs-target="#contact"
      type="button"
      role="tab"
      aria-controls="contact"
      aria-selected="false"
    >
      Contact
    </button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div
    class="tab-pane fade show active"
    id="home"
    role="tabpanel"
    aria-labelledby="home-tab"
  >
    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.
  </div>
  <div
    class="tab-pane fade"
    id="profile"
    role="tabpanel"
    aria-labelledby="profile-tab"
  >
    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.
  </div>
  <div
    class="tab-pane fade"
    id="contact"
    role="tabpanel"
    aria-labelledby="contact-tab"
  >
    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.
  </div>
</div>

<h4 class="mt-5">Justified Tabs</h4>
<ul class="nav nav-tabs nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
      >Disabled</a
    >
  </li>
</ul>
<h3 class="mt-5">Pills</h3>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button
      class="nav-link active"
      id="pills-home-tab"
      data-bs-toggle="pill"
      data-bs-target="#pills-home"
      type="button"
      role="tab"
      aria-controls="pills-home"
      aria-selected="true"
    >
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="pills-profile-tab"
      data-bs-toggle="pill"
      data-bs-target="#pills-profile"
      type="button"
      role="tab"
      aria-controls="pills-profile"
      aria-selected="false"
    >
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="pills-contact-tab"
      data-bs-toggle="pill"
      data-bs-target="#pills-contact"
      type="button"
      role="tab"
      aria-controls="pills-contact"
      aria-selected="false"
    >
      Contact
    </button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div
    class="tab-pane fade show active"
    id="pills-home"
    role="tabpanel"
    aria-labelledby="pills-home-tab"
  >
    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.
  </div>
  <div
    class="tab-pane fade"
    id="pills-profile"
    role="tabpanel"
    aria-labelledby="pills-profile-tab"
  >
    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.
  </div>
  <div
    class="tab-pane fade"
    id="pills-contact"
    role="tabpanel"
    aria-labelledby="pills-contact-tab"
  >
    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.
  </div>
</div>
<h3 class="mt-5">Tabs with dropdowns</h3>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a
      class="nav-link dropdown-toggle"
      data-bs-toggle="dropdown"
      href="#"
      role="button"
      aria-haspopup="true"
      aria-expanded="false"
      >Dropdown</a
    >
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
      >Disabled</a
    >
  </li>
</ul>

page header

Example

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="#">&larr; Older</a></li>
  <li class="page-item"><a class="page-link" href="#">Newer &rarr;</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">&laquo;</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</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="#">&larr; 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 &rarr;</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">&laquo;</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">&raquo;</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

25%

Height

Backgrounds

Multiple Bars

Striped

Animated stripes

Étapes

1
2
3

Curseurs

0 5
60%
Copy 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

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">&times;</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">&times;</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" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" 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" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>