Mes besoins
Nos valeurs & expertises

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)

placeholder

Rounded (.rounded)

placeholder

Thumbnails (.img-thumbnail)

placeholder

Figures

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

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 courrier
Warning 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 courrier
Success 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 courrier
Information 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 courrier
Information 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 courrier
Information 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 courrier

Badges

  • Offre spéciale
  • Nouveauté
  • Livraison offerte
  • Promotion
  • Stock limité
  • Badge Status


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 somewhere
Card title

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

Go somewhere
Card 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
placeholder

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

placeholder

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.

placeholder
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
  • An item
  • A second item
  • A third item
placeholder
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 with captions


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

Legend
We'll never share your email with anyone else.
Error message here
Checkboxes
Checkbox card select
Checkboxes
Radio card select
Radio buttons

Success! You've done it.
Sorry, that username's taken. Try another?
Warning, that username's taken. Try another?
$ .00
Switch & select

SOLARIS SELECTS VARIANTS

There is no placeholder because each projects have to integrate it dynamically (he's present in the code)

Solaris Textarea

Error message
Error message
This is a warning message

Example form

Instruction pour la livraison (facultatif)

à avoir recueilli l’accord éclairé de mon parent sur la mise en place du service dont il sera le bénéficiaire avant a mise en place du service.Je comprends qu’à défaut, la prestation ne saurait être maintenue.


Radio buttons
Checkbox buttons

Segmented Button

Solaris input

SOLARIS INPUT VARIANTS

This is an info message
This field is required
This is a warning message

Solaris TypeAhead

  • test 1
  • test 2
  • test 3
Le champ est requis
  • test 1
  • test 2
  • test 3
This is an info message
  • test 1
  • test 2
  • test 3
Enter 3 characters minimum
  • test 1
  • test 2
  • test 3
Loading...

Input group

Basic example

@
@example.com
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


Jumbotron

Hello, world!

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

Learn more




Pagination


Popovers

Popovers

Your content here
Test

ALERT BOXES

Default

Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.

Closable

Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.

Collapsible Closed

Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.

Collapsible open

Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.
Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.

Notification title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla sollicitudin.

Progress

Basic

Contextual alternatives

Multiple bars

Striped

Animated

Height

Labels

25%
25%

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

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

Dark

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

Head dark

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

Striped rows

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

Striped rows dark

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

Bordered

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

Bordered dark

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

Hoverable rows

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

Hoverable rows dark

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

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

Dismissable

Live


Tooltips


Stepper

Champ obligatoire

Datepicker


Périmètre de consultation

Fermer le Périmètre de consultation

Périmètre de consultation