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 style="color: gray;">Display 1</h6>
<h1 class="display-1">L'essentiel de la culture au pays des paradoxes</h1>
<h6 style="color: gray;">Display 2</h6>
<h1 class="display-2">L'essentiel de la culture au pays des paradoxes</h1>
<h6 style="color: gray;">Display 3</h6>
<h1 class="display-3">L'essentiel de la culture au pays des paradoxes</h1>
<h6 style="color: gray;">Display 4</h6>
<h1 class="display-4">L'essentiel de la culture au pays des paradoxes</h1> -->

headings

Example

H1

L'essentiel de la culture au pays des paradoxes

H2


L'essentiel de la culture au pays des paradoxes

H3

L'essentiel de la culture au pays des paradoxes

H4

L'essentiel de la culture au pays des paradoxes

H5
L'essentiel de la culture au pays des paradoxes
H6
L'essentiel de la culture au pays des paradoxes
Copy Source
<h6 style="color: gray;">H1</h6>
<h1 class="h1">L'essentiel de la culture au pays des paradoxes</h1>
<h6 style="color: gray;">H2</h6>
<br /><br />
<h2 class="h2 decorated">L'essentiel de la culture au pays des paradoxes</h2>
<h6 style="color: gray;">H3</h6>
<h3 class="h3 decorated">L'essentiel de la culture au pays des paradoxes</h3>
<h6 style="color: gray;">H4</h6>
<h4 class="h4">L'essentiel de la culture au pays des paradoxes</h4>
<h6 style="color: gray;">H5</h6>
<h5 class="h5">L'essentiel de la culture au pays des paradoxes</h5>
<h6 style="color: gray;">H6</h6>
<h6 class="h6">L'essentiel de la culture au pays des paradoxes</h6>

images

Example

Avatar carré

Les vignettes des offres d'emplois

A

Avatar rond

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

A B C
Copy Source
<!-- <p>
  <img src="//placehold.it/120x100" class="rounded" />
  <img src="//placehold.it/120x100" class="rounded-circle" />
  <img src="//placehold.it/120x100" class="img-thumbnail" />
</p>
<p>
  <img src="//placehold.it/1200x300" class="img-fluid" />
</p>
<p>
  <img src="//placehold.it/120x100" class="rounded float-left" alt="..." />
  <img src="//placehold.it/120x100" class="rounded float-right" alt="..." />
</p>
<p>
  <img src="//placehold.it/120x100" class="rounded mx-auto d-block" />
</p>
<p class="text-center">
  <img src="//placehold.it/120x100" class="img-fluid" />
</p>
<h3 class="mt-5">Responsive images </h3>
<img src="//placehold.it/1200x300" class="img-fluid" alt="Responsive image">
<h3 class="mt-5">Figures </h3>
<figure class="figure">
  <img src="//placehold.it/400x300" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<figure class="figure">
  <img src="//placehold.it/400x300" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>
 -->
<h4 style="color: gray;">Avatar carré</h4>
<p>Les vignettes des offres d'emplois</p>
<img src="//placehold.it/150x110" class="img-fluid" alt="A" />
<!-- <img src="//placehold.it/48x48" class="img-fluid" alt="B" />
<img src="//placehold.it/32x32" class="img-fluid" alt="C" /> -->
<h4 style="color: gray;">Avatar rond</h4>
<p>
  Essentiellement les vignettes du cadre "auteur"(plus grand) et
  "commentaires"(plus petit)
</p>
<img src="//placehold.it/164x164" class="rounded-circle" alt="A" />
<img src="//placehold.it/87x87" class="rounded-circle" alt="B" />
<img src="//placehold.it/64x64" class="rounded-circle" alt="C" />

tables

Example

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @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 style="color: gray;">Body</h6>
<p>L'essentiel de la culture au pays des paradoxes </p>
<p>L'essentiel de la culture au pays des paradoxes </p>
<p>L'essentiel de la culture au pays des paradoxes </p>
<!-- <h6 style="color: gray;">Body2</h6>
<p class="p2bold">L'essentiel de la culture au pays des paradoxes </p>
<p class="p2500">L'essentiel de la culture au pays des paradoxes </p>
<p class="p2normal">L'essentiel de la culture au pays des paradoxes </p>
<h6 style="color: gray;">Légende</h6>
<p class="legendebold">L'essentiel de la culture au pays des paradoxes </p>
<p class="legende">L'essentiel de la culture au pays des paradoxes </p>
<h6 style="color: gray;">Infos</h6>
<p class="infobold">L'essentiel de la culture au pays des paradoxes </p>
<p class="info">L'essentiel de la culture au pays des paradoxes </p> -->
<h4>Paragraphes</h4>
<h6 style="color: gray;">Display 1 / Body / Infos</h6>
<h1 class="">L'essentiel de la culture au pays des paradoxes</h1>
<p class="">Nullam quis risus eget vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p class="">Vel augue laoreet rutrum faucibus dolor auctor.<p class="info">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
</p>
<p class="lead">Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-muted">Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-warning">Warning: Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Danger: Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Info: Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<h3 class="mt-5">Inline text elements</h3>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Patterns - Design and mark-up components unique to your site.

alerts

Example

Copy Source
<!-- Sample pattern, your site's patterns will be different -->
<div class="alert alert-info" role="alert">
  <i class="bi bi-info-circle-fill text-info mr-10"></i> Neutral info displayed
  here. Carry on.
  <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-success" role="alert">
  <i class="bi bi-check-circle-fill text-success mr-10"></i>A successful message
  appears to those who did well.<button
    type="button"
    class="close"
    data-bs-dismiss="alert"
    aria-label="Close"
  >
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-danger" role="alert">
  <i class="bi bi-x-circle-fill text-danger mr-10"></i> An error message
  displayed when something went wrong.<button
    type="button"
    class="close"
    data-bs-dismiss="alert"
    aria-label="Close"
  >
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-warning" role="alert">
  <i class="bi bi-exclamation-triangle-fill text-warning mr-10"></i>Warning text
  here so you can be more careful.<button
    type="button"
    class="close"
    data-bs-dismiss="alert"
    aria-label="Close"
  >
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<!-- <div class="alert alert-warning" role="alert">
  <strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Danger Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam.
</div>
<div class="alert alert-success" role="alert">
  <strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>
<div class="alert alert-info" role="alert">
  <strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>
<div class="alert alert-light" role="alert">
  <strong>Light Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>
<div class="alert alert-dark" role="alert">
  <strong>Dark Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div> -->
<!-- <h3 class="mt-5">Link color </h3>
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div> -->
<!-- <h3 class="mt-5">Additional content </h3>
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<h3 class="mt-5">Dismissing </h3>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </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="//placehold.it/120x100" class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<h3> Image caps </h3>
<div class="card mb-3">
  <img src="//placehold.it/300x100" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="//placehold.it/300x100" class="card-img-top" alt="...">
</div>
<h3> Image overlays </h3>
<div class="card bg-dark text-white">
  <img src="//placehold.it/600x300" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
<h3> Horizontal</h3>
<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="//placehold.it/100x150" class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>
<h2 class="mt-5">Kitchen sink </h2>
<div class="card" style="width: 18rem;">
  <img src="//placehold.it/120x100" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<h2 class="mt-5"> Card styles </h2>
<h3> Background and color </h3>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<h3> Border and colors </h3>
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div> -->

<h2 class="mt-5">Grid cards</h2>
<div class="row">
  <div class="col mb-3">
    <div class="card">
      <img src="//placehold.it/420x250" class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">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="//placehold.it/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="//placehold.it/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="//placehold.it/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="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

<h3> With controls and indicators </h3>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

<h3> With captions </h3>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

<h3> Crossfade </h3>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://via.placeholder.com/640x360" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div> -->

collapse

Example

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Copy Source
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

dropdowns

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

DROPDOWNS

MULTIPLE CHOICES

calendar

CHECKBOXES

boutons radio

Copy Source
<h4 style="color: gray;"> INPUT LABELS </h4>
<div class="form-group">
  <label for="exampleInputEmail">LABEL</label>
  <input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Placeholder">
</div>
<fieldset disabled>
  <div class="form-group">
    <label for="DisabledInputEmail">LABEL</label>
    <input type="email" class="form-control" id="DisabledInputEmail" aria-describedby="emailHelp" placeholder="Inactif">
  </div>
</fieldset>
<div class="form-group">
  <label for="validationServer03">MESSAGE ERREUR</label>
  <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="Value" required>
  <div class="invalid-feedback">
    Please provide a valid value.
  </div>
  <div class="form-group">
    <label for="validationServer01">MESSAGE VALIDATION</label>
    <input type="text" class="form-control is-valid" id="validationServer01" placeholder="Value" value="Value" required>
    <div class="valid-feedback">
      Looks good!
    </div>
    <h4 style="color: gray;"> INPUT LABELS WITH CHECKBOXES </h4>
    <div class="form-group">
      <label for="exampleInputEmail">LABEL</label>
      <input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Placeholder">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1"> Se souvenir de moi</label>
      </div>
      <fieldset disabled>
        <div class="form-group">
          <label for="exampleInputEmail">LABEL</label>
          <input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Placeholder">
        </div>
        <div class="form-group">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1"> Se souvenir de moi</label>
          </div>
      </fieldset>
      <h4 style="color: gray;"> TEXT AREA </h4>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">LABEL</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Placeholder"></textarea>
      </div>
      <fieldset disabled>
        <div class="form-group">
          <label for="exampleFormControlTextarea1">LABEL</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Placeholder"></textarea>
        </div>
      </fieldset>
      <h4 style="color: gray;"> DROPDOWNS </h4>
      <div class="form-group">
        <label for="inputState">LABEL</label>
        <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>Valeur 1</option>
          <option>Valeur 2</option>
          <option>Valeur 3</option>
        </select>
      </div>
      <h4 style="color: gray;"> MULTIPLE CHOICES </h4>
      <select class="custom-select" multiple>
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <!--       //Calendrier 
 -->
      <h4 style="color: gray;"> calendar </h4>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
        <div class="input-group-append">
          <a href="#">
            <span class="glyphicon glyphicon-calendar"></span>
          </a>
        </div>
      </div>
      <h4 style="color: gray;"> CHECKBOXES </h4>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
          Default checkbox
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
        <label class="form-check-label" for="defaultCheck2">
          Disabled checkbox
        </label>
      </div>
      <h4 style="color: gray;"> boutons radio </h4>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
        <label class="form-check-label" for="exampleRadios1">
          Default radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
        <label class="form-check-label" for="exampleRadios2">
          Second default radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
        <label class="form-check-label" for="exampleRadios3">
          Disabled radio
        </label>
      </div>
      <!-- <h4 style="color: gray;"> toggle buttons </h4>
      <div class="toggle btn btn-primary" data-bs-toggle="toggle" role="button">
        <input type="checkbox" checked data-bs-toggle="toggle" data-onstyle="primary">
        <div class="toggle-group">
          <label class="btn btn-primary toggle-on">
            On
          </label>
          <label class="btn btn-alternative togle-off">
            Off
          </label>
          <span class="toggle-handle btn btn-alternative"> </span>
        </div>
      </div> -->
      <!-- <form>
           <div class="form-group">
             <label for="exampleInputEmail">Email address</label>
             <input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter email">
           </div>
           <div class="form-group">
             <label for="exampleInputPassword">Password</label>
             <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
           </div>
           <div class="form-group">
             <label for="exampleInputFile">File input</label>
             <input type="file" class="form-control-file" id="exampleInputFile">
             <small id="emailHelp" class="form-text text-muted"> Help text : Photos, videos, ...</small>
           </div>
           <div class="form-group form-check">
               <input type="checkbox" class="form-check-input" id="exampleCheck1">
               <label class="form-check-label" for="exampleCheck1"> Check me out</label>
           </div>
           <button type="submit" class="btn btn-primary">Submit</button>
       </form>

       <hr>
       <form><div class="form-row">
  <div class="form-group col-md-6">
    <label for="inputEmail14"> Email </label>
    <input type="email" class="form-control" id="inputEmail14">
  </div>
  <div class="form-group col-md-6">
    <label for="inputPassword4">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
    </div></div>
  <div class="form-group"><div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1"> Remember me</label>
      </div></div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

       <hr>
       <form class="form-horizontal">
         <div class="form-group">
           <label for="inputEmail" >Email</label>
             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
           
         </div>
         <div class="form-group has-warning">
           <label for="inputEmail" >Email</label>
          
             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
           
         </div>
         <div class="form-group has-error">
           <label for="inputEmail" >Email</label>
           
             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
          
         </div>
         <div class="form-group has-success">
           <label for="inputEmail" >Email</label>
           
             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
           
         </div>
         <div class="form-group">
           <label for="inputPassword" >Password</label>
           
             <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
             <div class="form-group">
             <div class="form-check">
               <input type="checkbox" class="form-check-input" id="exampleCheck1">
               <label class="form-check-label" for="exampleCheck1"> Remember me</label>
            </div>
            </div>
             <button type="submit" class="btn btn-primary">Sign in</button>
       </form> -->

input group

Example

@

Sizing

Small
Default
Large

Multiple addons

$ 0.00
$ 0.00

Button addons

Buttons with dropdowns

Custom forms

Custom file input

Upload
Upload
Copy Source
<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <span class="input-group-text" id="addon-wrapping">@</span>
  </div>
  <input
    type="text"
    class="form-control"
    placeholder="Username"
    aria-label="Username"
    aria-describedby="addon-wrapping"
  />
</div>

<h3 class="mt-5">Sizing</h3>
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input
    type="text"
    class="form-control"
    aria-label="Sizing example input"
    aria-describedby="inputGroup-sizing-sm"
  />
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input
    type="text"
    class="form-control"
    aria-label="Sizing example input"
    aria-describedby="inputGroup-sizing-default"
  />
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input
    type="text"
    class="form-control"
    aria-label="Sizing example input"
    aria-describedby="inputGroup-sizing-lg"
  />
</div>

<h3 class="mt-5">Multiple addons</h3>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input
    type="text"
    class="form-control"
    aria-label="Dollar amount (with dot and two decimal places)"
  />
</div>

<div class="input-group">
  <input
    type="text"
    class="form-control"
    aria-label="Dollar amount (with dot and two decimal places)"
  />
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

<h3 class="mt-5">Button addons</h3>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">
      Button
    </button>
  </div>
  <input
    type="text"
    class="form-control"
    placeholder=""
    aria-label="Example text with button addon"
    aria-describedby="button-addon1"
  />
</div>

<div class="input-group mb-3">
  <input
    type="text"
    class="form-control"
    placeholder="Recipient's username"
    aria-label="Recipient's username"
    aria-describedby="button-addon2"
  />
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">
      Button
    </button>
  </div>
</div>

<h3 class="mt-5">Buttons with dropdowns</h3>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button
      class="btn btn-outline-secondary dropdown-toggle"
      type="button"
      data-bs-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input
    type="text"
    class="form-control"
    aria-label="Text input with dropdown button"
  />
</div>

<div class="input-group">
  <input
    type="text"
    class="form-control"
    aria-label="Text input with dropdown button"
  />
  <div class="input-group-append">
    <button
      class="btn btn-outline-secondary dropdown-toggle"
      type="button"
      data-bs-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

<h3 class="mt-5">Custom forms</h3>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select
    class="custom-select"
    id="inputGroupSelect03"
    aria-label="Example select with button addon"
  >
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select
    class="custom-select"
    id="inputGroupSelect04"
    aria-label="Example select with button addon"
  >
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

<h3 class="mt-5">Custom file input</h3>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input
      type="file"
      class="form-control"
      id="inputGroupFile01"
      aria-describedby="inputGroupFileAddon01"
    />
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="form-control" id="inputGroupFile02" />
    <label
      class="custom-file-label"
      for="inputGroupFile02"
      aria-describedby="inputGroupFileAddon02"
      >Choose file</label
    >
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button
      class="btn btn-outline-secondary"
      type="button"
      id="inputGroupFileAddon03"
    >
      Button
    </button>
  </div>
  <div class="custom-file">
    <input
      type="file"
      class="form-control"
      id="inputGroupFile03"
      aria-describedby="inputGroupFileAddon03"
    />
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input
      type="file"
      class="form-control"
      id="inputGroupFile04"
      aria-describedby="inputGroupFileAddon04"
    />
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button
      class="btn btn-outline-secondary"
      type="button"
      id="inputGroupFileAddon04"
    >
      Button
    </button>
  </div>
</div>

jumbotron

Example

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn 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="http://www.placehold.it/64x64" alt="media-object">
      </a>
      <div class="media-body">
        <h4 class="media-heading mt-0">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
      </div>
    </div>

    <div class="media">
      <a class="pull-left" href="#">
         <img class="media-object mr-3 mt-3" src="http://www.placehold.it/64x64" alt="media-object">
      </a>
      <div class="media-body">
        <h4 class="media-heading mt-3">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
        <div class="media">
          <a class="pull-left" href="#">
            <img class="media-object mr-3 mt-3" src="http://www.placehold.it/64x64" alt="media-object">
          </a>
          <div class="media-body">
            <h4 class="media-heading mt-3">Nested media heading</h4>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
          </div>
        </div>
      </div>
    </div>

<h3>Media List</h3>
<ul class="list-unstyled">
      <li class="media">
        <a class="pull-left" href="#">
          <img class="media-object mr-3" src="http://www.placehold.it/64x64" alt="media-object">
        </a>
        <div class="media-body">
          <h4 class="media-heading mt-0 mb-1">Media heading</h4>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
        </div>
      </li>  
          <li class="media my-4">
            <a class="pull-left" href="#">
              <img class="media-object mr-3" src="http://www.placehold.it/64x64" alt="media-object">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
            </div>
          </li>
              <li class="media">
                <a class="pull-left" href="#">
                  <img class="media-object mr-3" src="http://www.placehold.it/64x64" alt="media-object">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Nested media heading</h4>
                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                </div>
              </li>
            
</ul>

modal

Example

Demo modal components

Scrolling long content

Vertically centered

Optional sizes

Copy Source


<h3> Demo modal components </h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&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

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">
  <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>
<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">
  <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>
</ul>
<h4 class="mt-5">Vertical Pills</h4>
<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </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-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<h3 class="mt-5">Four directions </h3>
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-bs-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

progress bars

Example

Number counter

20

Années Magnifiques

3500

Étudiants formés

Copy Source
<!-- <div class="progress mb-3"> 
  <div
    class="progress-bar"
    role="progressbar"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 60%;"
  >
    <span class="visually-hidden">60% Complete</span>
  </div>
</div>
<div class="progress mb-3">
  <div
    class="progress-bar"
    role="progressbar"
    aria-valuenow="100"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 100%;"
  ></div>
</div>
<span class="progresstext">Transfert En Cours...</span>
<h3> Étapes </h3>
<div class="mdl-card mdl-shadow--2dp">
  <div class="mdl-card__supporting-text">
    <div class="mdl-stepper-horizontal-alternative">
      <div class="mdl-stepper-step active-step step-done">
        <div class="mdl-stepper-circle d-flex justify-content-center align-items-center"><span>1</span></div>
        <div class="mdl-stepper-bar-left"></div>
        <div class="mdl-stepper-bar-right"></div>
      </div>
      <div class="mdl-stepper-step active-step">
        <div class="mdl-stepper-circle d-flex justify-content-center align-items-center"><span>2</span></div>
        <div class="mdl-stepper-bar-left"></div>
        <div class="mdl-stepper-bar-right"></div>
      </div>
      <div class="mdl-stepper-step ">
        <div class="mdl-stepper-circle d-flex justify-content-center align-items-center"><span>3</span></div>
        <div class="mdl-stepper-bar-left"></div>
        <div class="mdl-stepper-bar-right"></div>
      </div>
      <div class="mdl-stepper-step">
        <div class="mdl-stepper-circle d-flex justify-content-center align-items-center"><span><i class="fas fa-check" ></i>
        </span></div>
        <div class="mdl-stepper-bar-left"></div>
        <div class="mdl-stepper-bar-right"></div>
      </div>
    </div>
  </div>
</div>

<h3>Curseurs</h3>
<b>0</b>
<input
  type="range"
  class="custom-range"
  min="0"
  max="5"
  step="1"
  id="customRange3"
  value="[3]"
/>
<b>5</b> -->

<!-- <div class="progress mb-3">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>
 -->
<!--
<h3>Contextual Alternatives</h3>
<div class="progress mb-3">
  <div
    class="progress-bar bg-success"
    role="progressbar"
    aria-valuenow="40"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 40%"
  >
    <span class="visually-hidden">40% Complete (success)</span>
  </div>
</div>
<div class="progress mb-3">
  <div
    class="progress-bar bg-info"
    role="progressbar"
    aria-valuenow="20"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 20%"
  >
    <span class="visually-hidden">20% Complete</span>
  </div>
</div>
<div class="progress mb-3">
  <div
    class="progress-bar bg-warning"
    role="progressbar"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 60%"
  >
    <span class="visually-hidden">60% Complete (warning)</span>
  </div>
</div>
<div class="progress mb-3">
  <div
    class="progress-bar bg-danger"
    role="progressbar"
    aria-valuenow="80"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 80%"
  >
    <span class="visually-hidden">80% Complete</span>
  </div>
</div>
<h3>Striped</h3>
<div class="progress progress-bar-striped mb-3">
  <div
    class="progress-bar bg-success"
    role="progressbar"
    aria-valuenow="40"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 40%"
  >
    <span class="visually-hidden">40% Complete (success)</span>
  </div>
</div>
<div class="progress progress-bar-striped mb-3">
  <div
    class="progress-bar bg-info"
    role="progressbar"
    aria-valuenow="20"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 20%"
  >
    <span class="visually-hidden">20% Complete</span>
  </div>
</div>
<div class="progress progress-bar-striped mb-3">
  <div
    class="progress-bar bg-warning"
    role="progressbar"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 60%"
  >
    <span class="visually-hidden">60% Complete (warning)</span>
  </div>
</div>
<div class="progress progress-bar-striped mb-3">
  <div
    class="progress-bar bg-danger"
    role="progressbar"
    aria-valuenow="80"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 80%"
  >
    <span class="visually-hidden">80% Complete (danger)</span>
  </div>
</div>
<h3>Animated</h3>
<div class="progress progress-bar-striped progress-bar-animated mb-3">
  <div
    class="progress-bar"
    role="progressbar"
    aria-valuenow="45"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 45%"
  >
    <span class="visually-hidden">45% Complete</span>
  </div>
</div>
<h3>Stacked</h3>
<div class="progress mb-3">
  <div class="progress-bar bg-success" style="width: 35%">
    <span class="visually-hidden">35% Complete (success)</span>
  </div>
  <div class="progress-bar bg-warning" style="width: 20%">
    <span class="visually-hidden">20% Complete (warning)</span>
  </div>
  <div class="progress-bar bg-danger" style="width: 10%">
    <span class="visually-hidden">10% Complete (danger)</span>
  </div>
</div>
 -->

<h5>Number counter</h5>
<div id="counter-container">
  <section class="module bgcolor counter">
    <p><h2><span class="count">20</span></h2>Années Magnifiques</p>
  </section>
  <section class="module bgcolor counter">
    <p><h2><span class="count">3500</span></h2>Étudiants formés</p>
  </section>
</div>

scrollspy

Example

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Example with nested nav

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.

Item 1-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.

Example with list-group

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 4

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Copy Source
<nav id="navbar-example2" class="navbar navbar-light bg-light ">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a
        class="nav-link dropdown-toggle"
        data-bs-toggle="dropdown"
        href="#"
        role="button"
        aria-haspopup="true"
        aria-expanded="false"
        >Dropdown</a
      >
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0">
  <h4 id="fat">@fat</h4>
  <p>
    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim
    lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights
    whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
    booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie
    minim qui you probably haven't heard of them et cardigan trust fund culpa
    biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony
    biodiesel keffiyeh artisan ullamco consequat.
  </p>
  <h4 id="mdo">@mdo</h4>
  <p>
    Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.
    Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi,
    ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's
    quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non
    aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice
    keytar deserunt.
  </p>
  <h4 id="one">one</h4>
  <p>
    Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea.
    Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore
    single-origin coffee in magna veniam. High life id vinyl, echo park
    consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing.
    Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus
    consectetur fanny pack iphone.
  </p>
  <h4 id="two">two</h4>
  <p>
    In incididunt echo park, officia deserunt mcsweeney's proident master
    cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch
    +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four
    loko, cupidatat terry richardson master cleanse. Assumenda you probably
    haven't heard of them art party fanny pack, tattooed nulla cardigan tempor
    ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit
    wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore
    enim nostrud mlkshk brooklyn nesciunt.
  </p>
  <h4 id="three">three</h4>
  <p>
    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim
    lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights
    whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
    booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie
    minim qui you probably haven't heard of them et cardigan trust fund culpa
    biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony
    biodiesel keffiyeh artisan ullamco consequat. Keytar twee blog, culpa
    messenger bag marfa whatever delectus food truck. Sapiente synth id
    assumenda. Locavore sed helvetica cliche irony, thundercats you probably
    haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore
    elit placeat before they sold out, terry richardson proident brunch nesciunt
    quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft
    beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit
    minim commodo ullamco thundercats.
  </p>
</div>

<h3>Example with nested nav</h3>
<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
      <a class="navbar-brand" href="#">Navbar</a>
      <nav class="nav nav-pills flex-column">
        <a class="nav-link active" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
          <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-8">
    <div
      data-spy="scroll"
      data-bs-target="#navbar-example3"
      data-bs-offset="0"
      class="scrollspy-example-2"
    >
      <h4 id="item-1">Item 1</h4>
      <p>
        Ex consequat commodo adipisicing exercitation aute excepteur occaecat
        ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco
        cillum consectetur ut et aute consectetur labore. Fugiat laborum
        incididunt tempor eu consequat enim dolore proident. Qui laborum do non
        excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia
        quis et incididunt voluptate non anim reprehenderit adipisicing dolore
        ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non
        fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod
        cupidatat elit dolore.
      </p>
      <h5 id="item-1-1">Item 1-1</h5>
      <p>
        Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum
        commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse
        voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure
        consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud
        labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet
        proident magna consectetur consequat eu commodo fugiat non quis. Enim
        aliquip exercitation ullamco adipisicing voluptate excepteur minim
        exercitation minim minim commodo adipisicing exercitation officia nisi
        adipisicing. Anim id duis qui consequat labore adipisicing sint dolor
        elit cillum anim et fugiat.
      </p>
      <h5 id="item-1-2">Item 1-2</h5>
      <p>
        Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur
        laborum sunt enim. Irure laboris mollit consequat incididunt sint et
        culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum
        cillum eiusmod sint elit excepteur ea labore enim consectetur in labore
        anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et
        eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
      </p>
      <h4 id="item-2">Item 2</h4>
      <p>
        Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
        tempor. Laborum consequat non elit enim exercitation cillum aliqua
        consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
        laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit
        veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse
        irure. Laborum nisi sit est tempor laborum mollit labore officia laborum
        excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex
        est consectetur ipsum commodo tempor sunt in proident.
      </p>
      <h4 id="item-3">Item 3</h4>
      <p>
        Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit
        culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat
        excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor
        mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco
        est ex ullamco excepteur.
      </p>
      <h5 id="item-3-1">Item 3-1</h5>
      <p>
        Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem
        proident nostrud. Ea id dolore anim exercitation aute fugiat labore
        voluptate cillum do laboris labore. Ex velit exercitation nisi enim
        labore reprehenderit labore nostrud ut ut. Esse officia sunt duis
        aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco
        proident veniam laboris ea consectetur magna sunt ex exercitation
        aliquip minim enim culpa occaecat exercitation. Est tempor excepteur
        aliquip laborum consequat do deserunt laborum esse eiusmod irure
        proident ipsum esse qui.
      </p>
      <h5 id="item-3-2">Item 3-2</h5>
      <p>
        Labore sit culpa commodo elit adipisicing sit aliquip elit proident
        voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur
        eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit
        incididunt. Occaecat consectetur nisi in occaecat proident minim enim
        sunt reprehenderit exercitation cupidatat et do officia. Aliquip
        consequat ad labore labore mollit ut amet. Sit pariatur tempor proident
        in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
      </p>
    </div>
  </div>
</div>

<h3>Example with list-group</h3>
<div class="row">
  <div class="col-4">
    <div id="list-example" class="list-group">
      <a
        class="list-group-item list-group-item-action active"
        href="#list-item-1"
        >Item 1</a
      >
      <a class="list-group-item list-group-item-action" href="#list-item-2"
        >Item 2</a
      >
      <a class="list-group-item list-group-item-action" href="#list-item-3"
        >Item 3</a
      >
      <a class="list-group-item list-group-item-action" href="#list-item-4"
        >Item 4</a
      >
    </div>
  </div>
  <div class="col-8">
    <div
      data-spy="scroll"
      data-bs-target="#list-example"
      data-bs-offset="0"
      class="scrollspy-example"
    >
      <h4 id="list-item-1">Item 1</h4>
      <p>
        Ex consequat commodo adipisicing exercitation aute excepteur occaecat
        ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco
        cillum consectetur ut et aute consectetur labore. Fugiat laborum
        incididunt tempor eu consequat enim dolore proident. Qui laborum do non
        excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia
        quis et incididunt voluptate non anim reprehenderit adipisicing dolore
        ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non
        fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod
        cupidatat elit dolore.
      </p>
      <h4 id="list-item-2">Item 2</h4>
      <p>
        Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
        tempor. Laborum consequat non elit enim exercitation cillum aliqua
        consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
        laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit
        veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse
        irure. Laborum nisi sit est tempor laborum mollit labore officia laborum
        excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex
        est consectetur ipsum commodo tempor sunt in proident.
      </p>
      <h4 id="list-item-3">Item 3</h4>
      <p>
        Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit
        culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat
        excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor
        mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco
        est ex ullamco excepteur.
      </p>
      <h4 id="list-item-4">Item 4</h4>
      <p>
        Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit
        culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat
        excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor
        mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco
        est ex ullamco excepteur.
      </p>
    </div>
  </div>
</div>

spinners

Example

Border spinner

Loading...

Sizes

Loading...
Loading...
Loading...
Loading...

Placement

Flex

Loading...

Float

Loading...

Colors

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Growing spinner

Loading...

Colors

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Buttons

Buttons2

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="//placehold.it/200x200" class="img-thumbnail" alt="100%x180" >
     </div>
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
         <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
       </a>
     </div>
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
         <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
       </a>
     </div>
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
         <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
       </a>
     </div>
   </div>

toasts

Example

Basic

Copy Source
<h3>Basic </h3>
<div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="http://via.placeholder.com/20x20" class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&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="http://via.placeholder.com/20x20" class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&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>