UI - UX


Input groups


Form

Ce champ est obligatoire.
Ce champ est obligatoire.
Ce champ est obligatoire.
Ce champ est obligatoire.

Checkbox

Toggle

Radio bloc


Alerts

.alert .alert-success

.alert .alert-warning

.alert .alert-danger

.alert .alert-info


Labels

  • .label .label-default
  • .label .label-primary
  • .label .label-info
  • .label .label-success
  • .label .label-warning
  • .label .label-danger



Panel group

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.


Table

.table Deux
Un Deux
Un Deux
.table .table-bordered Deux
Un Deux
Un Deux
.table .table-striped Deux
Un Deux
Un Deux

Cards

.card

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

.card .card--sm .bg-primary .text-white

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

.card .card--lg .bg-secondary

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?



Texts

Text colors

  • .text-primary
  • .text-secondary
  • .text-success
  • .text-warning
  • .text-danger
  • .text-info

Text sizes

text default
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!

.text-xs
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!

.text-sm
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!

.text-lg
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum illo, nulla at sequi consequuntur nostrum iste modi suscipit necessitatibus magni unde voluptatem mollitia eum blanditiis error molestias architecto. Vitae, repellat!

.lead
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum illo, nulla at sequi consequuntur nostrum iste modi suscipit necessitatibus magni unde voluptatem mollitia eum blanditiis error molestias architecto. Vitae, repellat!

Titles

h1 / .h1
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

h2 / .h2
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

h3 / .h3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

h4 / .h4
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

h5 / .h5
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim
h6 / .h6
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

Text formatted

Title

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

Title

  • list 1
  • list 2
  • list 3

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

Title

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

  • list 1
  • list 2
  • list 3