Documentation
Introduction
Welcome to the
AXA Design System Library
Its purpose is to deliver every components and styles you need
to kickstart your web project.
For more informations about
design principles and guidelines go to
designsystem.axa.com
Compiled CSS and JS
Download ready-to-use compiled code for AXA Design System Library to easily drop into your project, which includes:
- Compiled and minified CSS bundles (see CSS files comparison)
- Compiled and minified JavaScript plugins (see JS files comparison)
- Icons fonts and SourceSansPro fonts
This doesn’t include documentation, source files, and
Publico Headline Bold font.
Go to Quick start section to know
how to use it.
Source files
Compile AXA Design System Library with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:
- Sass compiler for compiling Sass source files into CSS files
- Autoprefixer for CSS vendor prefixing
This doesn’t include
Publico Headline Bold font.
Should you require our full set of build tools, they are
included for developing AXA Design System Library and its docs,
but they’re likely unsuitable for your own purposes.
When done, copy the font in woff and woff2 format in ./fonts folder build with file names:
PublicoHeadline-Bold.woff
PublicoHeadline-Bold.woff2
Copy-paste the stylesheets <link> into your
<head> before all other stylesheets to load
our CSS.
Check & update the path to the files if required.
<link rel="stylesheet" href="./css/axaDesignSystemLib.css">
<link rel="stylesheet" href="./css/axaDesignSystemFonts.css">
<link rel="stylesheet" href="./css/axaIconFont.css">
You may have to update src paths in
@font-face within files
axaDesignSystemFonts.css &
axaIconFont.css
The minified versions of the stylesheets are also available in
the build (axaDesignSystemLib.min.css
axaDesignSystemFonts.min.css
axaIconFont.min.css)
Many of components require the use of JavaScript to function. Specifically, they require Bootsrap, jQuery and Popper. We use jQuery’s slim build, but the full version is also supported.
Place one of the following <script>s near the
end of your pages, right before the closing
<body> tag, to enable them. jQuery must come
first, then Popper, and then Bootstrap JavaScript plugins.
bootstrap.bundle.js and
bootstrap.bundle.min.js include Popper (used for
Tooltips an Popovers components)
<script src="stylesheet" href="./js/jquery/jquery.slim.min.js"></script>
<script src="stylesheet" href="./js/bootstrap/bootstrap.bundle.min.js"></script><script src="stylesheet" href="./js/jquery/jquery.slim.min.js"></script>
<script src="stylesheet" href="./js/bootstrap/popper.min.js"></script>
<script src="stylesheet" href="./js/bootstrap/bootstrap.min.js"></script>Foundations
Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
view on bootstrap
We use a subset of all colors to create a smaller color
palette for generating color schemes, also available as Sass
variables and a Sass map in
scss/_variables.scss file.
Background color samples with saas variables used for each theme.
<div class="p-3 col-lg-3 m-1 bg-primary text-white">.bg-primary <span class="float-right">$axa-blue</span></div>
<div class="p-3 col-lg-3 m-1 bg-secondary text-white">.bg-secondary <span class="float-right">$axa-sienna</span></div>
<div class="p-3 col-lg-3 m-1 bg-success text-white">.bg-success <span class="float-right">$green</span></div>
<div class="p-3 col-lg-3 m-1 bg-danger text-white">.bg-danger <span class="float-right">$red</span></div>
<div class="p-3 col-lg-3 m-1 bg-warning text-dark">.bg-warning <span class="float-right">$yellow</span></div>
<div class="p-3 col-lg-3 m-1 bg-info text-white">.bg-info <span class="float-right">$ocean</span></div>
<div class="p-3 col-lg-3 m-1 bg-light text-dark">.bg-light <span class="float-right">$white</span></div>
<div class="p-3 col-lg-3 m-1 bg-dark text-white">.bg-dark <span class="float-right">$gray-800</span></div>
<div class="p-3 col-lg-3 m-1 bg-white text-dark">.bg-white <span class="float-right">$white</span></div>
<div class="p-3 col-lg-3 m-1 bg-transparent text-dark">.bg-transparent</div>All colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for all of these variables. Instead, we choose a subset of these colors for a theme palette.
$gray-100
#fafafa
Foundations
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
While uses ems or rems for defining
most sizes, pxs are used for grid breakpoints and
container widths. This is because the viewport width is in
pixels and does not change with the font size.
See how aspects of grid system work across multiple devices
with a handy table.
AXA specific updates : new xxl grid (as added in
bootstrap 5.0), breakpoint, container
max-width and gutter values also updated.
|
xs <600px |
sm ≥600px |
md ≥768px |
lg ≥1024px |
xl ≥1280px |
xxl ≥1440px |
|
|---|---|---|---|---|---|---|
| Max container width | None (auto) | 552px | 744px | 984px | 1176px | 1368px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 24px (12px on each side of a column) | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
New xxl breakpoint sample (use screen ≥1440px to view results in a single line)
<div class="row">
<div class="col-xxl-8 border">col-xxl-8</div>
<div class="col-xxl-4 border">col-xxl-4</div>
</div>
<div class="row">
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
</div>
<div class="row">
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
<div class="col-xxl border">col-xxl</div>
</div>foundations
Add or remove shadows to elements with box-shadow utilities.
While shadows on components are disabled by default in
Bootstrap and can be enabled via $enable-shadows,
you can also quickly add or remove a shadow with our
box-shadow utility classes. Includes support for
.shadow-none and five default sizes (which have
associated variables to match).
<div class="shadow-none p-3 mb-5 bg-light">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white">Larger shadow</div>
<div class="shadow-xlg p-3 mb-5 bg-white">Xlarger shadow</div>
<div class="shadow-xxlg p-3 mb-5 bg-white">XXlarger shadow</div>Foundations
Includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
AXA classes are built from a default Sass map ranging from 0.5rem to 5rem.
The classes are named using the format
{property}{sides}-{size} for xs and
{property}{sides}-{breakpoint}-{size} for
sm, md, lg,
xl, and xxl.
Where size is one of:
-
0- for classes that eliminate themarginorpaddingby setting it to0 -
1- (by default) for classes that set themarginorpaddingto$spacer * .5 -
2- (by default) for classes that set themarginorpaddingto$spacer * .75 -
3- (by default) for classes that set themarginorpaddingto$spacer -
4- (by default) for classes that set themarginorpaddingto$spacer * 1.5 -
5- (by default) for classes that set themarginorpaddingto$spacer * 2 -
6- (by default) for classes that set themarginorpaddingto$spacer * 2.5 -
7- (by default) for classes that set themarginorpaddingto$spacer * 3 -
8- (by default) for classes that set themarginorpaddingto$spacer * 3.5 -
9- (by default) for classes that set themarginorpaddingto$spacer * 4 -
10- (by default) for classes that set themarginorpaddingto$spacer * 4.5 -
11- (by default) for classes that set themarginorpaddingto$spacer * 5 -
auto- for classes that set themarginto auto
Here are some representative examples of these classes:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .5) !important;
}
.px-2 {
padding-left: ($spacer * .75) !important;
padding-right: ($spacer * .75) !important;
}
.pr-11 {
padding-right: ($spacer * 5) !important;
}
.p-3 {
padding: $spacer !important;
}Sample test with new AXA spacer pl-11 / padding left = ($spacer * 5) = 80px
<p class="pl-11">
Sample test with new AXA spacer pl-11 / padding left = ($spacer * 5) = 80px
</p>foundations
Documentation and examples for typography, including global settings, headings, body text, lists, and more. Source Sans Pro and Publico Headline are the two typefaces to be used on all AXA digital assets.
Publico Headline Bold is a the typeface with personality and emotion. It is used in bold for main messages and headlines and creates contrast. Coupled with Source Sans Pro it enhances the design by adding rythm, creating a clear hierarchy and providing a strong visual identity.
| As for Publico Headline, entities have to purchase it directly on Commercial Type Foundry's website. You will only need to purchase the 'bold' style, for further information please send a request through the Help & Support page. |
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<span class="display-1">Display 1</span>
<span class="display-2">Display 2</span>
<span class="display-3">Display 3</span>
<span class="display-4">Display 4</span>
<span class="display-5">Display 5</span>
<span class="display-6">Display 6</span>
HTML headings, <h1> through
<h5>, are available.
h1. AXA Heading
h2. AXA Heading
h3. AXA Heading
h4. AXA Heading
h5. AXA Heading
<h1>h1. AXA Heading</h1>
<h2>h2. AXA Heading</h2>
<h3>h3. AXA Heading</h3>
<h4>h4. AXA Heading</h4>
<h5>h5. AXA Heading</h5>h1. AXA Heading
h2. AXA Heading
h3. AXA Heading
h4. AXA Heading
h5. AXA Heading
<p class="h1">h1. AXA Heading</p>
<p class="h2">h2. AXA Heading</p>
<p class="h3">h3. AXA Heading</p>
<p class="h4">h4. AXA Heading</p>
<p class="h5">h5. AXA Heading</p>
For quoting blocks of content from another source within your
document. Wrap
<blockquote class="blockquote"> around any
HTML as the quote.
Add a
<footer class="blockquote-footer"> for
identifying the source. Wrap the name of the source work in
<cite>.
A quote, contained in a blockquote
<blockquote class="blockquote">
<p>A quote, contained in a blockquote</p>
</blockquote>A quote, contained in a blockquote
<blockquote class="blockquote">
<p>A quote, contained in a blockquote</p>
<footer class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>Source Sans Pro is a sans serif typeface that has been chosen to transition from ITC Franklin Gothic and Metric as it works pretty well in all user interfaces, covers a large spectrum of signs and has no cost.
This is a paragraph
This is a paragraph
This is a lead paragraph.
This is a lead paragraph with bold font.
This is a paragraph
<p>This is a paragraph</p>
<p><strong>This is a paragraph</strong></p>
<p class="lead">This is a lead paragraph.</p>
<p class="lead"><strong>This is a lead paragraph with bold font.</strong></p>
<p><small>This is a paragraph</small></p>Link style use in AXA Design System.
<a href="#typo_lnk_part" id="typo_lnk_part">This is a link</a></p>foundations
List of AXA available icons to use with the library.
AXA Icon are available as a font file with its linked css. It
is included in the Library Build (introduction).
Add files
css\axaIconFonts.css and
fonts\axa-icon-font.svg/ttf/wof in your project
to use the font icons.
If required, don't forget
to update the path to the icon fonts in file
css\axaIconFonts.css (check urls in part
@font-face)
Default icon size is 16px.
Use class .fs-xl to have 24px icons sized
Use class .fs-xxl to have 32px icons sized
<i class="icon-arrow_dropdown"></i>
<i class="icon-arrow_dropdown fs-xl"></i>
<i class="icon-arrow_dropdown fs-xxl"></i><i class="icon-add"></i>
<i class="icon-add fs-xl"></i>
<i class="icon-add fs-xxl"></i><i class="icon-add"></i><i class="icon-error_outline"></i><i class="icon-done"></i><i class="icon-info"></i><i class="icon-error"></i><i class="icon-check_circle"></i><i class="icon-warning"></i><i class="icon-expand_less"></i><i class="icon-expand_more"></i><i class="icon-navigate_next"></i><i class="icon-navigate_before"></i><i class="icon-close"></i><i class="icon-east"></i><i class="icon-west"></i><i class="icon-search"></i><i class="icon-share"></i><i class="icon-menu"></i><i class="icon-download"></i><i class="icon-call"></i><i class="icon-calendar"></i><i class="icon-email"></i>components
An alert displays an important, succinct message, and provides
actions for users to address (or dismiss the banner). It
requires a user action to be dismissed.
Alerts should be displayed at the top of the screen, below a
top app bar. They’re persistent and nonmodal, allowing the
user to either ignore them or interact with them at any time.
Only one banner should be shown at a time.
You can use the default colour scheme of the design system depending on the type of alert to be displayed.
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
<div class="alert text-white bg-axa-teal" role="alert">
A simple custom theme color alert—check it out!
</div>If you need to reinforce the type of alert, you can place an icon next to the text.
<div class="alert alert-primary" role="alert">
<i class="icon-add valign-btn-icon fs-xl mr-3"></i>
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
<i class="icon-add valign-btn-icon fs-xl mr-3"></i>
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
<i class="icon-check_circle valign-btn-icon fs-xl mr-3"></i>
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
<i class="icon-warning valign-btn-icon fs-xl mr-3"></i>
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
<i class="icon-error_outline valign-btn-icon fs-xl mr-3"></i>
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
<i class="icon-info valign-btn-icon fs-xl mr-3"></i>
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
<i class="icon-add valign-btn-icon fs-xl mr-3"></i>
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
<i class="icon-add valign-btn-icon fs-xl mr-3"></i>
A simple dark alert—check it out!
</div>
<div class="alert text-white bg-axa-teal" role="alert">
<i class="icon-add valign-btn-icon fs-xl mr-3"></i>
A simple custom theme color alert—check it out!
</div>Alerts can contain a button to associate an action with the text
<div class="alert alert-primary py-1" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>
<div class="alert alert-secondary py-1" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>
<div class="alert alert-success py-1" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>
<div class="alert alert-danger py-1" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>
<div class="alert alert-warning py-1" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>
<div class="alert alert-info py-1" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>
<div class="alert alert-light py-1" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>
<div class="alert alert-dark py-1" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>
<div class="alert text-white bg-axa-teal" role="alert">
A new version of MyAXA app is available on the Android & Apple Store<button type="button" class="ml-3 btn btn-sm">get it for free</button>
</div>components
Badges allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, badges should appear dynamically as a group of multiple interactive elements.
You can change the color of the badge according to the type of information you need to display. Just pick one in the color schemes.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge text-white bg-axa-teal">custom</span>Breadcrumb links are represented by the colour sienna and if the label is too large it can be truncated using an ellipsis.
<span class="badge badge-primary">
<i class="icon-add mr-1"></i>
Primary
</span>
<span class="badge badge-secondary">
<i class="icon-add mr-1"></i>
Secondary
</span>
<span class="badge badge-success">
<i class="icon-add mr-1"></i>
Success
</span>
<span class="badge badge-danger">
<i class="icon-add mr-1"></i>
Danger
</span>
<span class="badge badge-warning">
<i class="icon-add mr-1"></i>
Warning
</span>
<span class="badge badge-info">
<i class="icon-add mr-1"></i>
Info
</span>
<span class="badge badge-light">
<i class="icon-add mr-1"></i>
Light
</span>
<span class="badge badge-dark">
<i class="icon-add mr-1"></i>
Dark
</span>
<span class="badge text-white bg-axa-teal">
<i class="icon-add mr-1"></i>
custom
</span>
@AXA new class for smaller badges: badge-sm
<span class="badge badge-sm badge-primary">Primary</span>
<span class="badge badge-sm badge-secondary">
<i class="icon-add mr-1"></i>
Secondary
</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">
<i class="icon-add mr-1"></i>
Secondary
</span>components
Cards are pieces of elements that serve editorial content. They can be used in several ways and work with strong visual content.
This is the simplest card component, it does not contain a description and only displays a title, a date and a super-title.
subhead
This is the card title
21/03/2021
<div class="card" style="width: 288px;">
<img src="..." alt="...">
<div class="card-body pt-4">
<h3 class="card-subtitle text-secondary">subhead</h3>
<h2 class="card-title">This is the card title</h2>
<p class="h4 text-muted card-text">21/03/2021</p>
</div>
</div>subhead
This is the card title
21/03/2021
<div class="card" style="max-width: 440px;">
<div class="row no-gutters">
<div class="col-auto">
<img src="..." alt="...">
</div>
<div class="col">
<div class="card-body py-0 pl-4">
<h3 class="card-subtitle text-secondary">subhead</h3>
<h2 class="card-title">This is the card title</h2>
<p class="h4 text-muted card-text">21/03/2021</p>
</div>
</div>
</div>
</div>subhead
This is the card title
21/03/2021
<div class="card" style="max-width: 440px;">
<div class="row no-gutters">
<div class="col">
<div class="card-body py-0 pr-4">
<h3 class="card-subtitle text-secondary">subhead</h3>
<h2 class="card-title">This is the card title</h2>
<p class="h4 text-muted card-text">21/03/2021</p>
</div>
</div>
<div class="col-auto">
<img src="..." alt="...">
</div>
</div>
</div>The advanced version adds a description to the card, a link (which can also become a button).
subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
secondary link<div class="card">
<img src="..." alt="...">
<div class="card-body pt-4">
<h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
<h2 class="card-title">This is the card title</h2>
<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 btn btn-link-secondary text-nowrap">
secondary link
<i class="icon-east ml-1"></i>
</a>
</div>
</div>subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
secondary link<div class="card">
<div class="row no-gutters">
<div class="col-auto">
<img src="..." alt="...">
</div>
<div class="col">
<div class="card-body py-0 pl-4">
<h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
<h2 class="card-title">This is the card title</h2>
<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 btn btn-link-secondary text-nowrap">
secondary link
<i class="icon-east ml-1"></i>
</a>
</div>
</div>
</div>
</div>subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
secondary link<div class="card">
<div class="row no-gutters">
<div class="col">
<div class="card-body py-0 pr-4">
<h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
<h2 class="card-title">This is the card title</h2>
<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 btn btn-link-secondary text-nowrap">
secondary link
<i class="icon-east ml-1"></i>
</a>
</div>
</div>
<div class="col-auto">
<img src="..." alt="...">
</div>
</div>
</div>The "highlight" version uses Publico title levels and can take more prominence in your content stream.
subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<img src="..." alt="...">
<div class="card-body pt-4">
<h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
<p class="card-title display-5">This is the card title</p>
<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>
<p><a href="#" class="btn btn-secondary">secondary link</a></p>
<p><a href="#" class="btn btn-outline-secondary">secondary link</a></p>
</div>
</div>subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<div class="row no-gutters">
<div class="col-auto">
<img src="..." alt="...">
</div>
<div class="col">
<div class="card-body py-0 pl-4">
<h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
<p class="card-title display-5">This is the card title</p>
<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>
<p><a href="#" class="btn btn-secondary">secondary link</a></p>
<p><a href="#" class="btn btn-outline-secondary">secondary link</a></p>
</div>
</div>
</div>
</div>subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<div class="row no-gutters">
<div class="col">
<div class="card-body py-0 pr-4">
<h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
<p class="card-title display-5">This is the card title</p>
<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>
<p><a href="#" class="btn btn-secondary">secondary link</a></p>
<p><a href="#" class="btn btn-outline-secondary">secondary link</a></p>
</div>
</div>
<div class="col-auto">
<img src="..." alt="...">
</div>
</div>
</div>subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
secondary link<div class="card">
<img src="..." alt="...">
<div class="card-body pt-4">
<h3 class="card-subtitle">subhead <span class="text-muted">- 21/03/2021</span></h3>
<p class="card-title display-5">This is the card title</p>
<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 btn btn-link-secondary text-nowrap">
secondary link
<i class="icon-east ml-1"></i>
</a>
</div>
</div>subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
secondary link<div class="card">
<div class="row no-gutters">
<div class="col-auto">
<img src="..." alt="...">
</div>
<div class="col">
<div class="card-body py-0 pl-4">
<h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
<p class="card-title display-5">This is the card title</p>
<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 btn btn-link-secondary text-nowrap">
secondary link
<i class="icon-east ml-1"></i>
</a>
</div>
</div>
</div>
</div>subhead - 21/03/2021
This is the card title
Some quick example text to build on the card title and make up the bulk of the card's content.
secondary link<div class="card">
<div class="row no-gutters">
<div class="col">
<div class="card-body py-0 pr-4">
<h3 class="card-subtitle text-secondary">subhead <span class="text-muted">- 21/03/2021</span></h3>
<p class="card-title display-5">This is the card title</p>
<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 btn btn-link-secondary text-nowrap">
secondary link
<img src="..." alt="...">
</a>
</div>
</div>
<div class="col-auto">
<img src="..." alt="...">
</div>
</div>
</div>This alternative integrates the title, super-title, date, description and call to action elements directly into the image overlay. Don't forget to check the contrast level to maintain a good level of accessibility.
<div class="card text-white">
<img class="card-img" src="..." alt="...">
<div class="card-img-mask"></div>
<div class="card-img-overlay">
<h3 class="card-subtitle">subhead - 21/03/2021</h3>
<p class="card-title display-5">This is the card title</p>
<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>
<p><a href="#" class="btn btn-light">light button</a></p>
<p class="mb-0"><a href="#" class="btn btn-outline-light">light button</a></p>
</div>
</div><div class="card text-white">
<img class="card-img" src="..." alt="...">
<div class="card-img-mask"></div>
<div class="card-img-overlay">
<h3 class="card-subtitle">subhead - 21/03/2021</h3>
<p class="card-title display-5">This is the card title</p>
<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 btn btn-link-light">
Light link
<img src="..." alt="...">
</a>
</div>
</div>This version is more compact but allows for a grid of several elements to optimise space.
<div class="card card-bg">
<div class="card-body p-4">
<h3 class="card-subtitle text-muted">subhead</h3>
<h1 class="card-title mb-5">This is the card title</h1>
<a href="#" class="card-link btn btn-link-secondary stretched-link">
secondary link
<i class="icon-add ml-1"></i>
</a>
</div>
</div>components
A slideshow component allowing you to scroll horizontally through images and texts. Be careful with the type of image used in order to avoid a poor readability of your content. It’s recommended not to push too much content, the more there is the less the user will go to the end and some content will be missed.
Includes only a caption for the information to be displayed.
<div
id="carouselExampleCaptions"
class="carousel slide"
data-ride="carousel"
data-interval="false"
>
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>First slide label</h3>
<p><small>Some representative placeholder content for the first slide.</small></p>
</div>
</div>
<div class="carousel-item">
<div
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p><small>Some representative placeholder content for the second slide.</small></p>
</div>
</div>
<div class="carousel-item">
<div
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p><small>Some representative placeholder content for the third slide.</small></p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Use the new AXA class carousel-title to add
titles elements at the center of the carousel.
<div id="carouselExampleTitle" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleTitle" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleTitle" data-slide-to="1"></li>
<li data-target="#carouselExampleTitle" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="" style="min-width: 800px; min-height: 400px;background-repeat:no-repeat;background-position: center center; background-size: cover; background-image: url('...');">
</div>
<div class="carousel-title d-block">
<h5 class="mb-3">subtitle</h5>
<p class="display-4">Carousel main title</p>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<div
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-title d-block">
<h5 class="mb-3">subtitle</h5>
<p class="display-4">Carousel second title</p>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<div
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-title d-block">
<h5 class="mb-3">subtitle</h5>
<p class="display-4">Carousel third title</p>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleTitle" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleTitle" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Use the new AXA class carousel-mask to add
opacity for each elements required inside
carousel-item (images, etc.).
<div id="carouselExampleTitleMask" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleTitleMask" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleTitleMask" data-slide-to="1"></li>
<li data-target="#carouselExampleTitleMask" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-mask"
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-title d-block">
<h5 class="mb-3">subtitle</h5>
<p class="display-4">Carousel main title</p>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-mask"
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-title d-block">
<h5 class="mb-3">subtitle</h5>
<p class="display-4">Carousel second title</p>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-mask"
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-title d-block">
<h5 class="mb-3">subtitle</h5>
<p class="display-4">Carousel third title</p>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleTitleMask" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleTitleMask" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Use the new AXA class carousel-dark to set
carousel texts, indicators and icons in dark mode.
<div id="carouselExampleCaptionDarkMode" class="carousel slide carousel-dark" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptionDarkMode" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptionDarkMode" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptionDarkMode" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>First slide label</h3>
<p><small>Some representative placeholder content for the first slide.</small></p>
</div>
</div>
<div class="carousel-item">
<div
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p><small>Some representative placeholder content for the second slide.</small></p>
</div>
</div>
<div class="carousel-item">
<div
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p><small>Some representative placeholder content for the third slide.</small></p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptionDarkMode" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptionDarkMode" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Adding a dark or light mask can help make the text more readable.
<div id="carouselExampleCaptionDarkModeMask" class="carousel slide carousel-dark carousel-mask" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptionDarkModeMask" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptionDarkModeMask" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptionDarkModeMask" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-mask"
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>First slide label</h3>
<p><small>Some representative placeholder content for the first slide.</small></p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-mask"
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p><small>Some representative placeholder content for the second slide.</small></p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-mask"
style="height: 400px;
background-image: url('...');
background-repeat:no-repeat;background-position: center center; background-size: cover;"
>
</div>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p><small>Some representative placeholder content for the third slide.</small></p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptionDarkModeMask" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptionDarkModeMask" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>components
A good way to display a long section of content by hiding it or revealing under a block thanks to the action of the user. This is mainly used for secondary content and it’s important to avoid hiding important information into this block.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>The buttons can also open several targets depending on the content.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="border py-4 px-3">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="border py-4 px-3">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>A more classic accordion version with disclosure to maximise space and display information only when requested by the user.
.show class.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<button class="btn btn-block" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
Accordion Item #1
</button>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<button class="btn btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<button class="btn btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<button class="btn btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseFour"
aria-expanded="false" aria-controls="collapseFour" disabled>
Accordion Item #4 (Disabled)
</button>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the fourth and final accordion panel. This panel is disabled.
</div>
</div>
</div>
</div>components
A dropdown displays a list of links with an overlay from which a user can select one or several options.
The simplest version uses a button. The latter can be adapted to the colours present in the default theme.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
primary button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>You can also use the split button to make a first selection before submitting.
<div class="btn-group">
<button type="button" class="btn btn-primary">primary button</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</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>
</div>The directions allow the unfolded menu to be displayed according to the position of the component.
<div class="dropdown dropup">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
primary button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
</div><div class="dropdown dropright">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
primary button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<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>
</div><div class="dropdown dropleft">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
primary button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<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>
</div><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><div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item active" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div><div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>You can add headings inside the unfolded menu to better separate your list items.
<div class="dropdown-menu">
<h5 class="dropdown-header">Dropdown header</h5>
<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>You can also add separators to separate entries.
<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>components
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
<form>
<div class="form-group">
<label for="exampleInputEmail1"><strong>Email address</strong></label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp1">
<small id="emailHelp1" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1"><strong>Password</strong></label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customexampleCheck1">
<label class="custom-control-label" for="customexampleCheck1">Check this custom checkbox</label>
</div>
<button type="submit" class="btn btn-primary">submit</button>
</form>
Textual form controls—like <input>s,
<select>s, and
<textarea>s—are styled with the
.form-control class. Included are styles for general
appearance, focus state, sizing, and more.
Be sure
to explore our custom forms to further style
<select>s.
<form>
<div class="form-group">
<label for="exampleFormControlInput1"><strong>Email address</strong></label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1"><strong>Label</strong></label>
<select class="form-control custom-select" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<small class="form-text text-muted">Help text</small>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1"><strong>Label</strong></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Placeholder"></textarea>
</div>
</form>
For file inputs, swap the .form-control for
.form-control-file.
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
Set heights using classes like
.form-control-lg and
.form-control-sm.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"><select class="form-control form-control-sm custom-select">
<option>Placeholder</option>
</select>
<select class="form-control custom-select">
<option>Placeholder</option>
</select>
<select class="form-control form-control-lg custom-select">
<option>Placeholder</option>
</select>
Create custom <input type="range"> controls
with .custom-range. The track (the background)
and thumb (the value) are both styled to appear the same
across browsers. As only IE and Firefox support “filling”
their track from the left or right of the thumb as a means to
visually indicate progress, we do not currently support it.
<input type="range" class="custom-range" id="customRange1">Default (stacked)
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2" disabled>
<label class="custom-control-label" for="customCheck2">Disabled custom checkbox</label>
</div><div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadio3">Disabled other custom radio</label>
</div>
Add the disabled boolean attribute on an input to
prevent user interactions and make it appear lighter.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Add the disabled attribute to a
<fieldset> to disable all the controls
within.
<form>
<fieldset disabled>
<div class="form-group">
<label for="exampleInputEmail1_1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1_1" aria-describedby="emailHelp" placeholder="Disabled input">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1_1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1_1" placeholder="Disabled input">
</div>
<div class="form-group custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="disabledcustomCheck2" disabled>
<label class="custom-control-label" for="disabledcustomCheck2">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Provide valuable, actionable feedback to your users with HTML5 form validation
<form class="needs-validation" novalidate>
<div class="form-row">
<label for="validationCustom01"><strong>First name</strong></label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
First name required.
</div>
</div>
<div class="form-row">
<label for="validationCustom02"><strong>Last name</strong></label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Last name required.
</div>
</div>
<div class="form-row">
<label for="validationCustom04"><strong>States</strong></label>
<select class="custom-select" id="validationCustom04" required>
<option selected="" disabled="" value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="form-group">
<div class="form-check custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="invalidCheck" required>
<label class="custom-control-label" for="invalidCheck">Agree to terms and conditions</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">submit</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>Switches
A switch has the markup of a custom checkbox but uses the
.custom-switch class to render a toggle switch.
Switches also support the disabled attribute.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Toggle this switch element</label>
</div>components
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam molestiae, atque ad sapiente, numquam explicabo dolor rerum perspiciatis laborum perferendis molestias iste eaque cum veniam deleniti fugit! Voluptatum, minus. Quas!
components
A specific category of input forms which improve the readability by adding directly the label, button, or button group as a “help text”, at the same level that the form itself.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-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="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>You can vary the sizes to make your form elements responsive.
<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" placeholder="Placeholder" 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" placeholder="Placeholder" 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" placeholder="Placeholder" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>components
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam molestiae, atque ad sapiente, numquam explicabo dolor rerum perspiciatis laborum perferendis molestias iste eaque cum veniam deleniti fugit! Voluptatum, minus. Quas!
components
Lists groups are a serie of vertical content. They display items with the same level of hierarchy. They improve the readability of the different items by creating a better structured organisation.
- An item
- An item
- An item
- An item
- An item
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
</ul>- An item
- An item
- An item
- An item
- An item
<ul class="list-group list-group-flush">
<li class="list-group-item active" aria-current="true">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
</ul>- An item
- An item
- An item
- An item
- An item
<ul class="list-group list-group-flush">
<li class="list-group-item disabled" aria-disabled="true">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
<li class="list-group-item">An item</li>
</ul><div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">An item</a>
<a href="#" class="list-group-item list-group-item-action">An item</a>
<a href="#" class="list-group-item list-group-item-action">An item</a>
<a href="#" class="list-group-item list-group-item-action">An item</a>
<a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">An item</a>
</div>
Specific to AXA design : use <a> and add
classes .btn,
.btn-link-secondary and
.list-group-item
<div class="list-group list-group-flush">
<a href="#" class="btn btn-link-secondary list-group-item mb-0" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<span>An item</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="valign-btn-icon ml-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</div>
</a>
<a href="#" class="btn btn-link-secondary list-group-item mb-0">
<div class="d-flex w-100 justify-content-between">
<span>An item</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="valign-btn-icon ml-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</div>
</a>
<a href="#" class="btn btn-link-secondary list-group-item mb-0">
<div class="d-flex w-100 justify-content-between">
<span>An item</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="valign-btn-icon ml-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</div>
</a>
<a href="#" class="btn btn-link-secondary list-group-item mb-0">
<div class="d-flex w-100 justify-content-between">
<span>An item</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="valign-btn-icon ml-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</div>
</a>
<a href="#" class="btn btn-link-secondary list-group-item mb-0 disabled" aria-disabled="true">
<div class="d-flex w-100 justify-content-between">
<span>An item</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="valign-btn-icon ml-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</div>
</a>
</div>List article elements are specifically designed for editorial content.
3 days ago
Some placeholder content in a paragraph. And some small print.
And some muted small print.3 days ago
Some placeholder content in a paragraph. And some small print.
And some muted small print.3 days ago
Some placeholder content in a paragraph. And some small print.
And some muted small print.3 days ago
Some placeholder content in a paragraph. And some small print.
And some muted small print.<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action px-3 py-4">
<div class="d-flex w-100 justify-content-left">
<h4 class="w-25 pt-2">3 days ago</h4>
<div>
<div class="display-5 mb-2">List group item heading</div>
<p>Some placeholder content in a paragraph. And some small print.</p>
<span class="h4 muted">And some muted small print.</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action px-3 py-4">
<div class="d-flex w-100 justify-content-left">
<h4 class="w-25 pt-2">3 days ago</h4>
<div>
<div class="display-5 mb-2">List group item heading</div>
<p>Some placeholder content in a paragraph. And some small print.</p>
<span class="h4 muted">And some muted small print.</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action px-3 py-4">
<div class="d-flex w-100 justify-content-left">
<h4 class="w-25 pt-2">3 days ago</h4>
<div>
<div class="display-5 mb-2">List group item heading</div>
<p>Some placeholder content in a paragraph. And some small print.</p>
<span class="h4 muted">And some muted small print.</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action px-3 py-4">
<div class="d-flex w-100 justify-content-left">
<h4 class="w-25 pt-2">3 days ago</h4>
<div>
<div class="display-5 mb-2">List group item heading</div>
<p>Some placeholder content in a paragraph. And some small print.</p>
<span class="h4 muted">And some muted small print.</span>
</div>
</div>
</a>
</div>components
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam molestiae, atque ad sapiente, numquam explicabo dolor rerum perspiciatis laborum perferendis molestias iste eaque cum veniam deleniti fugit! Voluptatum, minus. Quas!
components
A modal focus the user’s attention by adding an overlay which needs an immediate action from the user. This task to complete or piece of information to validate pops on top of the page content.
The modal component is displayed on top of any content. It can be easily closed if the user clicks on the cross and can allow for strong validation steps.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Modal title</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-sm btn-primary">Save changes</button>
</div>
</div>
</div>
</div>components
Pagination indicates a collection of related content divided into multiple pages.
<nav aria-label="Page navigation example">
<ul class="pagination text-uppercase h3">
<li class="page-item"><a class="page-link pr-4" 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="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">33</a></li>
<li class="page-item"><a class="page-link" href="#">34</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">35</a></li>
<li class="page-item"><a class="page-link pl-4" href="#">Next</a></li>
</ul>
</nav>
@AXA specific new class
pagination-control-prev-icon and
pagination-control-prev-icon
<nav aria-label="Page navigation example">
<ul class="pagination text-uppercase h3">
<li class="page-item"><a class="page-link pr-4 pagination-control-prev-icon" href="#">
<span class="sr-only">Previous</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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">35</a></li>
<li class="page-item"><a class="page-link pl-4 pagination-control-next-icon" href="#">
<span class="sr-only">Next</span>
</a></li>
</ul>
</nav><nav aria-label="Page navigation example">
<ul class="pagination text-uppercase h3">
<li class="page-item disabled"><a class="page-link pr-4" href="#">Previous</a></li>
<li class="page-item active" aria-current="page"><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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link pl-4" href="#">Next</a></li>
</ul>
</nav><nav aria-label="Page navigation example">
<ul class="pagination text-uppercase h3">
<li class="page-item disabled"><a class="page-link pr-4 pagination-control-prev-icon" href="#">
<span class="sr-only">Previous</span>
</a></li>
<li class="page-item active" aria-current="page"><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="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">33</a></li>
<li class="page-item"><a class="page-link" href="#">34</a></li>
<li class="page-item"><a class="page-link" href="#">35</a></li>
<li class="page-item"><a class="page-link pl-4 pagination-control-next-icon" href="#">
<span class="sr-only">Next</span>
</a></li>
</ul>
</nav>components
Popover displays an overlay giving the user access to additional content and action by hover over, focus on, or tap an element.
<button type="button" class="btn btn-secondary"
data-toggle="popover"
title="Popover title"
data-content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</button>
<!-- script to add after loading all required js dependencies (jquery/bootstrap/popper) -->
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>You can define the position where the tooltip will be displayed.
<button type="button" class="btn btn-primary m-1" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-primary m-1" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-primary m-1" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-primary m-1" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Add custom data-template to change arrow color
when popover with title shown at the bottom (arrow with same
gray color as title background)
<button type="button" class="btn btn-primary"
data-container="body"
data-toggle="popover"
title="Popover title"
data-template='<div class="popover" role="tooltip"><div class="arrow arrow-header"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
data-placement="bottom" data-content="Bottom popover"
>
Popover on bottom
</button>components
Display the completion of a task by showing visually how much is done and how much is left. The longer or difficult the journey is, the higher the progress bar will be useful to guide the user to the end.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div>components
A dynamic navigation based on scroll position to indicate which link is currently active in the viewport.
@AXA specific class nav-scrollspy to design
correctly the nav/navbar within flex-column
Item 1
Placeholder content for the scrollspy example. This one relates to item 1. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
Item 2
Placeholder content for the scrollspy example. This one relates to item 2. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
Item 3
Placeholder content for the scrollspy example. This one relates to item 3. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
Item 4
Placeholder content for the scrollspy example. This
one relates to item 4. Takes you miles high, so high,
'cause she’s got that one international smile. There's
a stranger in my bed, there's a pounding in my head.
Oh, no. In another life I would make you stay. ‘Cause
I, I’m capable of anything. Suiting up for my crowning
battle. Used to steal your parents' liquor and climb
to the roof. Tone, tan fit and ready, turn it up cause
its gettin' heavy. Her love is like a drug. I guess
that I forgot I had a choice.
Placeholder content for the scrollspy example. This
one relates to item 4. Takes you miles high, so high,
'cause she’s got that one international smile. There's
a stranger in my bed, there's a pounding in my head.
Oh, no. In another life I would make you stay. ‘Cause
I, I’m capable of anything. Suiting up for my crowning
battle. Used to steal your parents' liquor and climb
to the roof. Tone, tan fit and ready, turn it up cause
its gettin' heavy. Her love is like a drug. I guess
that I forgot I had a choice.
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<div class="pb-4 h2 w-100">Navbar</div>
<nav class="nav nav-pills flex-column nav-scrollspy">
<a class="nav-link active" href="#item-1">Item 1</a>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<a class="nav-link" href="#item-4">Item 4</a>
</nav>
</nav>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0" style="overflow: auto;position: relative; height: 350px;">
<h2 id="item-1">Item 1</h2>
<p>...</p>
<h2 id="item-2">Item 2</h2>
<p>...</p>
<h2 id="item-3">Item 3</h2>
<p>...</p>
<h2 id="item-4">Item 4</h2>
<p>...</p>
</div>
</div>
</div>components
Indicate the loading state of a component or page.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-axa-teal" role="status">
<span class="sr-only">Loading...</span>
</div>components
A push notification that appears at the bottom of the screen and provides information, feedback, alert on the outcome of an action without interrupting the user experience.
Toast
11 mins ago<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="blue square" preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#00008f"></rect></svg>
<h2 class="mr-auto mb-0">Toast</h2>
11 mins ago
<button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>Toast
11 mins ago<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="4000">
<div class="toast-header">
<svg class="mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="blue square" preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#00008f"></rect></svg>
<h2 class="mr-auto mb-0">Toast</h2>
11 mins ago
<button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>components
It displays a label explaining the function of a user interface element or feature when the user hover over, focus on, or tap an element.
<button type="button" class="btn btn-primary tooltip-demo" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-primary tooltip-demo" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-primary tooltip-demo" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-primary tooltip-demo" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<!-- script to add after loading all required js dependencies (jquery/bootstrap/popper) -->
<script>
$(function () {
$('.tooltip-demo').tooltip();
});
</script>components
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam molestiae, atque ad sapiente, numquam explicabo dolor rerum perspiciatis laborum perferendis molestias iste eaque cum veniam deleniti fugit! Voluptatum, minus. Quas!
components
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam molestiae, atque ad sapiente, numquam explicabo dolor rerum perspiciatis laborum perferendis molestias iste eaque cum veniam deleniti fugit! Voluptatum, minus. Quas!
components
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam molestiae, atque ad sapiente, numquam explicabo dolor rerum perspiciatis laborum perferendis molestias iste eaque cum veniam deleniti fugit! Voluptatum, minus. Quas!
Part title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet,
.text-primary
.text-secondary
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>