Default Toast
Hello, world! This is a toast message.

Alerts

Documentation
Use the .alert-xx utility class to quickly change colors of any alert.

A simple .alert-info alert with an example link. Give it a click if you like.

A simple .alert-success alert with an example link. Give it a click if you like.

A simple .alert-important alert with an example link. Give it a click if you like.

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Because I want to feel motivated and like I’m working hard and doing something good!

Page PASS IAE

Une page dédiée au PASS IAE est actuellement en construction. Vos retours sont importants, aidez-nous en réalisant ce test de 5 minutes

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline with .alert-dismissible.
Holy guacamole! You should check in on some of those fields below.
L'état des .alert-dismissible-once peut aussi être gardé en mémoire grace au localStorage

Pour celà il faut ajouter un id="" sur le div.alert-dismissible-once.d-none.

L'état display par defaut des .alert-dismissible-once est masqué puis affiché apres chargement de page via le js si l'utilisateur n'a jamais cliqué sur le .close.

.alert-dismissible-once 01

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus a eos esse aut vero? Perferendis a nihil, eum illo vitae saepe eos eius odio provident repellat debitis placeat ipsam impedit.

.alert-dismissible-once 02 You should check in on some of those fields below.

Accordion

Documentation
The accordion uses collapse internally to make it collapsible.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Bandeaux branding

Use the .alert-xx utility class to quickly change colors of any alert.

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Mobiliser la solution

Because I want to feel motivated and like I’m working hard and doing something good! Working from home but not having work to do is boring!

Badges

Documentation
Sizing. Inherit parent size with .badge or fixed sizes with .badge-base, .badge-sm or .badge-xs

Example with Fixed h1 size

Example with Inherit sizing

Example with Fixed base size

Example with Fixed small size

Example with Fixed extra small size

Contextual variations

primary primary + ico

warning warning + ico

success success + ico

danger danger + ico

info info + ico

important important + ico


marche marche + ico

communaute communaute + ico

pilotage pilotage + ico

emploi emploi + ico

accent-01 accent-01 + ico

accent-02 accent-02 + ico

accent-03 accent-03 + ico


warning-light warning-light + ico

success-lighter success-light + ico

danger-light danger-light + ico

info-light info-light + ico

important-light important-light + ico

marche-light marche-light + ico

communaute-light communaute-light + ico

pilotage-light pilotage-light + ico

emploi-light emploi-light + ico

Badges "Candidatures"

Embauche annulée

Embauché ailleurs

Candidature déclinée

Candidature en attente

Candidature acceptée

Candidature à l’étude

Nouvelle Candidature

Badges "Eligibilité"

Éligibilité IAE à valider

Éligible à l’IAE

PASS IAE valide

PASS IAE valide (non démarré)

PASS IAE valide (suspendu)

PASS IAE expiré

Badges sélectionables

Buttons

Documentation
Button display
Button sized
a.btn .btn-sm
a.btn
a.btn .btn-lg
a.btn .btn-xl
Button ico .btn .btn-ico

Par défaut les icones dans les boutons seront placées a gauche du texte.

Pour les icones d'actions type dropdown, ou avec une flèche de type suivant ou lien, elles seront placées a droite.

a.btn .btn-ico
a.btn .btn-ico
a.btn-lg .btn-ico
a.btn-xl .btn-ico
Button ico only .btn .btn-ico-only
Button primary .btn .btn-primary
Button outline primary .btn .btn-outline-primary
Button secondary .btn .btn-secondary
Button link .btn .btn-link
Button white .btn .btn-white
Button outline white .btn .btn-outline-white
Button link white .btn .btn-link-white
Button input.btn .btn-form-control (fake input.form-control style)
Button danger .btn .btn-danger
Button warning .btn .btn-warning
Button success .btn .btn-success
Button dropdown filter.btn .btn-dropdown-filter

Dans un div .btn-dropdown-filter-group pour gérer les positionements et les espacements mobile et desktop

  • Eligibilité IAE
  • Statut du PASS IAE
  • Action
  • Another action
Bouton copier to clipboard
Boutons Partenaire
Créer un CV avec Diagoriente



Ce candidat n’a pas encore de CV ?

Accompagnez-le dans la création de son CV grâce à notre partenaire Diagoriente.

Créer un CV avec Diagoriente

Button group

Documentation
Basic

Wrap a series of buttons with .btn in .btn-group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.





With .btn-group-action

Cards

Documentation

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Voir aussi les cards itou.


Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Card link Another link
Go somewhere

Collapse

Documentation

Click the buttons below to show and hide another element via class changes:

  • .collapse hides content
  • .collapsing is applied during transitions
  • .collapse.show shows content

Generally, we recommend using a button with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button"). In both cases, the data-bs-toggle="collapse" is required.



Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Collapse avec .has-collapse-caret:

Collapse avec .d-flex .justify-content-between .has-collapse-caret pour placer le caret en bout de ligne:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident reiciendis repudiandae libero hic modi veritatis perspiciatis. Quibusdam deserunt consequatur labore natus maiores? Quibusdam eaque nesciunt modi. Nisi soluta aliquid excepturi!

List group

Documentation
Example with active items

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.


The current link item A second link item A third link item A fourth link item A disabled link item

Navs / Tabs

Documentation
Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.





Or center with .justify-content-center

Or vertical tabs with .flex-column

Or vertical tabs ordered with .flex-column on <ol> and .nav-tabs-sm

  1. Cette première partie de votre formulaire 0/7
  2. Cette deuxieme partie de votre formulaire 2/6
  3. Cette troisieme partie de votre formulaire 8/8
  4. Cette dernière partie de votre formulaire 3/8 champs remplis

Pagination

Documentation

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".


Working with icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.


Disabled and active states

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.


Popovers

Documentation
Four directions

Four options are available: top, right, bottom, and left aligned.


Tooltips

Documentation
Four directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left..


Progress

Documentation
How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.


Toasts

Documentation

Trois variations de toasts sont possibles.
.toast--info, .toast--warning, .toast--danger, .toast--success

Pour le positionnement et le staking des Toasts il faut placer les .toast dans le wrapper toast-container. Pour la gestion du dismiss, du js voir la documentation.



Info Toast
Hello, world! This is a toast message.

danger Toast
Hello, world! This is a toast message.

success Toast
Hello, world! This is a toast message.

warning Toast
Hello, world! This is a toast message.