E-shop

Pictogrammen (.icon)

VoorbeeldCSS-klasse
 .icon-chevron-down
 .icon-chevron-left
 .icon-plus
 .icon-prullenbak
 .icon-zoeken
 .icon-winkelwagen
 .icon-minus
 .icon-chevron-rechts
 .icon-chevron-up
 .icon-pijl-omlaag
 .icon-arrow-left
 .icon-arrow-right
 .icon-pijl-omhoog
 .icon-check
 .icon-annuleren
 .icon-potlood
 .icon-mail
 .icon-home
 .icon-fabriek
 .icon-facebook
 .icon-cart-plus
 .icon-cart-plus

Krantenkoppen

Kop op het eerste niveau (.h1)

Kop op het tweede niveau (.h2)

Kop van niveau 3 (.h3)

Kop op het vierde niveau (.h4)

Kop op het vijfde niveau (.h5)
Kop van niveau 6 (.h6)

Tekstparagraaf (<p>)

De wind waait nauwelijks, dus op het eerste gezicht lijkt het alsof de ballonnen helemaal niet bewegen. Ze zweven gewoon rustig in de lucht. Terwijl de zon helder schijnt en je tevergeefs in de lucht naar de wolk van oost naar west zou kijken, gedragen de ballonnen zich als een fata morgana in het midden van de woestijn. Kortom, niets ver weg, alleen groen gras, een helderblauwe lucht en drie felgekleurde kermisballonnen die bijna onmerkbaar zwaaien, niet te hoog en niet te laag boven de grond. Als er geen diepgroen gras onder de ballonnen was, maar een droge weg of beton, dan waren misschien hun gekleurde schaduwen te zien - hoe scherpe zonnestralen passeren door de doorschijnende gekleurde ballonnen.

Tekstkleuren

Ze zweven gewoon rustig in de lucht. (.text-primair)

Ze zweven gewoon rustig in de lucht. (.text-secundair)

Ze zweven gewoon rustig in de lucht. (.text-succes)

Ze zweven gewoon rustig in de lucht. (.text-info)

Ze zweven gewoon rustig in de lucht. (.text-waarschuwing)

Ze zweven gewoon rustig in de lucht. (.text-gevaar)

Ze zweven gewoon rustig in de lucht. (.text-light)

Ze zweven gewoon rustig in de lucht. (.text-donker)

Ze zweven gewoon rustig in de lucht. (.text-wit)

Ze zweven gewoon rustig in de lucht. (.text-body)

Ze zweven gewoon rustig in de lucht. (.text-gedempt)

Ze zweven gewoon rustig in de lucht. (.text-zwart-50)

Ze zweven gewoon rustig in de lucht. (.text-white-50)

Backround kleur

Ze zweven gewoon rustig in de lucht. (.bg-primair)

Ze zweven gewoon rustig in de lucht. (.bg-secundair)

Ze zweven gewoon rustig in de lucht. (.bg-succes)

Ze zweven gewoon rustig in de lucht. (.bg-info)

Ze zweven gewoon rustig in de lucht. (.bg-waarschuwing)

Ze zweven gewoon rustig in de lucht. (.bg-gevaar)

Ze zweven gewoon rustig in de lucht. (.bg-light)

Ze zweven gewoon rustig in de lucht. (.bg-donker)

Ze zweven gewoon rustig in de lucht. (.bg-wit)

Ze zweven gewoon rustig in de lucht. (.bg-transparant)


.Btn-knoppen

Grootte .sm

.btn-link .btn-primair .btn-secundair .btn-waarschuwing .btn-info .btn-gevaar .btn-succes .btn-light .btn-dark

Middelgroot

.btn-link .btn-primair .btn-secundair .btn-waarschuwing .btn-info .btn-gevaar .btn-succes .btn-light .btn-dark

Maat .lg

.btn-link .btn-primair .btn-secundair .btn-waarschuwing .btn-info .btn-gevaar .btn-succes .btn-light .btn-dark

Overzicht

.btn-outline-primary .btn-outline-secundair .btn-outline-waarschuwing .btn-outline-info .btn-outline-gevaar .btn-outline-succes .btn-outline-light .btn-outline-dark


Tabellen

Basic (.table)

#NaamAchternaam
1VaclavFoobar
2JohnFoobar
3MilaanFoobar

Gestreept (.table-gestreept)

#NaamAchternaam
1VaclavFoobar
2JohnFoobar
3MilaanFoobar

Ingelijst (.tabel-omrand)

#NaamAchternaam
1VaclavFoobar
2JohnFoobar
3MilaanFoobar

Geen grens (.table-borderless)

#NaamAchternaam
1VaclavFoobar
2JohnFoobar
3MilaanFoobar

Kleinere tafel (.table-sm)

#NaamAchternaam
1VaclavFoobar
2JohnFoobar
3MilaanFoobar

Lijsten

Ongenummerde lijst (<ul>)

  • Lijstitem
  • Lijstitem
  • Lijstitem
  • Lijstitem

Genummerde lijst (<ol>)

  1. Lijstitem
  2. Lijstitem
  3. Lijstitem
  4. Lijstitem

Systeemberichten

Primair bericht via link . (.alert-primair)

Secundair bericht door verwijzing . (.alert-secundair)

Foutmelding met link . (.alert-gevaar)

Infobericht met link . (.alert-info)

Succesvol verwerkt met een link . (.alert-succes)

Houd er rekening mee dat de pagina is verplaatst naar een link . (.alert-waarschuwing)

Heldere boodschap koppeling . (.alert-licht)

Link naar donkere berichten . (.alert-donker)


Afbeeldingen

Responsieve afbeeldingen (.img-vloeistof)

Voorbeeldafbeelding (.img-miniatuur)


Embedy

<div class = "embed-responsive embed-responsive-16by9">
<iframe class = "embed-responsive-item" src = "..."> </iframe>
</div>

Beeldverhouding

21: 9 (.embed-responsive-21by9)

16: 9 (.embed-responsive-16by9)

4: 3 (.embed-responsive-4by3)

1: 1 (.embed-responsive-1by1)


Formulieren

Basis vorm

Label onder het formulierveld.

Veldgroottes

Aangepaste formuliervelden

Selecty

Radio en checkbox

het dossier

Bereik


Oproepen