Vous êtesEntreprise
Vous êtes Entreprise
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading with muted text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
An abbreviation of the word attribute is attr.
Blockquote
Name Surname Job title
“ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. ”
Lists
Unstyled
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
- Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- This may still come in handy in some situations.
Inline
- This is a list item.
- And another one.
- But they're displayed inline.
Description list alignment
- Description lists
- A description list is perfect for defining terms.
- Term
-
Definition for the term.
And some more placeholder definition text.
- Another term
- This definition is short, so no extra paragraphs or anything.
- Truncated term is truncated
- This can be useful when space is tight. Adds an ellipsis at the end.
- Nesting
-
- Nested definition list
- I heard you like definition lists. Let me put a definition list inside your definition list.
Icons
Grid and structure
Summary
|
XS <640px |
S ≥640px |
M ≥992px |
L ≥1280px |
XL ≥1440px |
|
|---|---|---|---|---|---|
| Max container width | 288px | 608px | 920px | 1208px | 1376px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Number of columns | 12 | ||||
| Gutter width | 16px (8px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Breakpoints
| XS | 320 => 639 |
|---|---|
| S > M | 640 => 1279 |
| L | 1280 => 1439 |
| XL | 1440 => 1680 |
Example
.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Images
Responsive images (.img-fluid)
Rounded (.rounded)
Thumbnails (.img-thumbnail)
Figures
Alerts
Error notification
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin sapien, vitae aliquet lacus convallis vitae. Morbi magna urna
Envoyer un courrier Envoyer un courrierWarning notification
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin sapien, vitae aliquet lacus convallis vitae. Morbi magna urna
Envoyer un courrier Envoyer un courrierSuccess notification
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin sapien, vitae aliquet lacus convallis vitae. Morbi magna urna
Envoyer un courrier Envoyer un courrierInformation notification
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin sapien, vitae aliquet lacus convallis vitae. Morbi magna urna
Envoyer un courrier Envoyer un courrierInformation quiet notification
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin sapien, vitae aliquet lacus convallis vitae. Morbi magna urna
Envoyer un courrier Envoyer un courrierInformation ghost notification
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin sapien, vitae aliquet lacus convallis vitae. Morbi magna urna
Envoyer un courrier Envoyer un courrierBadges
- Offre spéciale
- Nouveauté
- Livraison offerte
- Promotion
- Stock limité
- Badge Status
Breadcrumb
Buttons
Button group
Basic example
Button toolbar
Sizing
Nesting
Vertical variation
Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere- An item
- A second item
- A third item
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Carousel
Carousel with captions
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
Collapse
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Multiple targets
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.
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.
Accordion
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the
.show class.
Some placeholder content for the second accordion panel. This panel is hidden by default.
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
Forms
Example form
Input group
Basic example
@
https://example.com/users/
$
.00
With textarea
Sizing
Small
Default
Large
Checkboxes and radios
Multiple inputs
First and last name
Multiple addons
$
0.00
$
0.00
Button addons
Buttons with dropdowns
Jumbotron
Hello, world!
It uses utility classes for typography and spacing to space content out within the larger container.
List group
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Modal
Pagination
Popovers
Progress
Basic
Contextual alternatives
Multiple bars
Striped
Animated
Height
Labels
Spinners
Border spinner
Loading...
Loading...
Loading...
Loading...
Loading...
Border spinner with text
45%
Loading text...
45%
Loading text...
45%
Loading text...
45%
Loading text...
45%
Loading text...
Buttons
Input
Loading...
Tables
Basic example
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Head dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Striped rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Striped rows dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Bordered
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Bordered dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Hoverable rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Hoverable rows dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Datatables
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011-04-25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011-07-25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012-03-29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008-11-28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012-12-02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012-08-06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010-10-14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009-09-15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008-12-13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008-12-19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013-03-03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008-10-16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012-12-18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010-03-17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012-11-27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010-06-09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009-04-10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012-10-13 | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012-09-26 | $217,500 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011-09-03 | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009-06-25 | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011-12-12 | $106,450 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010-09-20 | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009-10-09 | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010-12-22 | $92,575 |
| Jennifer Chang | Regional Director | Singapore | 28 | 2010-11-14 | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011-06-07 | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010-03-11 | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | 20 | 2011-08-14 | $163,000 |
| Michelle House | Integration Specialist | Sydney | 37 | 2011-06-02 | $95,400 |
| Suki Burks | Developer | London | 53 | 2009-10-22 | $114,500 |
| Prescott Bartlett | Technical Author | London | 27 | 2011-05-07 | $145,000 |
| Gavin Cortez | Team Leader | San Francisco | 22 | 2008-10-26 | $235,500 |
| Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011-03-09 | $324,050 |
| Unity Butler | Marketing Designer | San Francisco | 47 | 2009-12-09 | $85,675 |
| Howard Hatfield | Office Manager | San Francisco | 51 | 2008-12-16 | $164,500 |
| Hope Fuentes | Secretary | San Francisco | 41 | 2010-02-12 | $109,850 |
| Vivian Harrell | Financial Controller | San Francisco | 62 | 2009-02-14 | $452,500 |
| Timothy Mooney | Office Manager | London | 37 | 2008-12-11 | $136,200 |
| Jackson Bradshaw | Director | New York | 65 | 2008-09-26 | $645,750 |
| Olivia Liang | Support Engineer | Singapore | 64 | 2011-02-03 | $234,500 |
| Bruno Nash | Software Engineer | London | 38 | 2011-05-03 | $163,500 |
| Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009-08-19 | $139,575 |
| Thor Walton | Developer | New York | 61 | 2013-08-11 | $98,540 |
| Finn Camacho | Support Engineer | San Francisco | 47 | 2009-07-07 | $87,500 |
| Serge Baldwin | Data Coordinator | Singapore | 64 | 2012-04-09 | $138,575 |
| Zenaida Frank | Software Engineer | New York | 63 | 2010-01-04 | $125,250 |
| Zorita Serrano | Software Engineer | San Francisco | 56 | 2012-06-01 | $115,000 |
| Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013-02-01 | $75,650 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011-12-06 | $145,600 |
| Hermione Butler | Regional Director | London | 47 | 2011-03-21 | $356,250 |
| Lael Greer | Systems Administrator | London | 21 | 2009-02-27 | $103,500 |
| Jonas Alexander | Developer | San Francisco | 30 | 2010-07-14 | $86,500 |
| Shad Decker | Regional Director | Edinburgh | 51 | 2008-11-13 | $183,000 |
| Michael Bruce | Javascript Developer | Singapore | 29 | 2011-06-27 | $183,000 |
| Donna Snider | Customer Support | New York | 27 | 2011-01-25 | $112,000 |
| Name | Position | Office | Age | Start date | Salary |
Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Toasts
Basic example
Votre demande est bien enregistrée !
Votre demande est bien enregistrée !
Votre demande est bien enregistrée !
Votre demande est bien enregistrée !
Dismissable
Votre demande est bien enregistrée !
Votre demande est bien enregistrée !
Votre demande est bien enregistrée !
Votre demande est bien enregistrée !
Votre demande est bien enregistrée !
Live
Tooltips
Stepper
Datepicker
Périmètre de consultation
Fermer le Périmètre de consultation