Examples
Default styling
Link Button
.btn
Use this class to indicate that the button is the primary feature of this form.
Link Button
.btn-primary
Provides extra visual weight and identifies the primary action in a set of buttons.
Link Button
.btn-secondary
Secondary, outline button.
Link Button
.btn-success
Indicates a successful or positive action.
Link Button
.btn-info
Contextual button for informational alert messages.
Link Button
.btn-warning
Indicates caution should be taken with this action.
Link Button
.btn-danger
Indicates a dangerous or potentially negative action.
Link Button
.btn-link
Deemphasize a button by making it look like a link while maintaining button behavior.
Link Button
.hover
Highlight the button when hovered.
Link Button
.disabled
Make the button change appearance to reflect it being disabled.
Link Button
.active
"Press" the button down when clicked.
Link Button
Markup: components/atoms/buttons/buttons.twig
<a href="#" class="btn [modifier class]">Link Button</a>
<button class="btn [modifier class]">Button element</button>
<input class="btn [modifier class]" type="button" value="input type button"></input>
Source: components/atoms/buttons/_buttons.scss, line 1

1.2 atoms.forms Form elements

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A majority of forms in the site are built from the same base class. See http://v4-alpha.getbootstrap.com/components/forms/ for more information about bootstrap and forms.

Example
We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
Radios
Markup: components/atoms/forms/forms.twig
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <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">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
    <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </div>
  <fieldset class="form-group">
    <legend><span>Radio buttons</span></legend>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="form-check">
    <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="form-check disabled">
    <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
      </label>
    </div>
  </fieldset>
  <div class="form-group">
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2"><span>Radios</span></legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            Option one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            Option two can be something else and selecting it will deselect option one
          </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            Option three is disabled
          </label>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <label class="col-sm-2">Checkbox</label>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Check me out
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>
</div>
Source: components/atoms/forms/_forms.scss, line 1
Examples
Default styling
Example help text that remains unchanged.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

.has-success
Danger is great for when there’s a blocking or required field. A user must fill in this field properly to submit the form.
Example help text that remains unchanged.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

.has-warning
Warning works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form.
Example help text that remains unchanged.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

.has-danger
Danger is great for when there’s a blocking or required field. A user must fill in this field properly to submit the form.
Example help text that remains unchanged.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Markup: components/atoms/forms/forms-custom.twig
<form>
  <div class="form-group [modifier class]">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control " id="inputEmail3" placeholder="Email">
      <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
      <small class="form-text text-muted">Example help text that remains unchanged.</small>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10 clearfix">
      <input type="password" class="form-control " id="inputPassword3" placeholder="Password">
      <p id="passwordHelpBlock" class="form-text text-muted">
      Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
    </p>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label class="col-sm-2">Radios</label>
    <div class="col-sm-10">
      <div class="radio">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
        </label>
      </div>
      <div class="radio disabled">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three is disabled
        </label>
      </div>
      <div class="radio" >
       <label class="custom-control custom-radio">
        <input id="radio1" name="radio" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Toggle this custom radio</span>
      </label>
      <label class="custom-control custom-radio">
        <input id="radio2" name="radio" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Or toggle this other custom radio</span>
      </label>
      </div>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label class="col-sm-2">Checkbox</label>
    <div class="col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">Check this custom checkbox</span>
        </label>
      </div>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-secondary">Sign in</button>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label>Range input</label>
    <input id="range" type="range" min="0" max="25" step="0.02">
  </div>
  <div class="form-group [modifier class]">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" disabled="disabled">
  </div>
  <div class="form-group [modifier class]">
    <select class="custom-select">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="form-group [modifier class]">
    <label class="custom-file">
      <input type="file" id="file" class="custom-file-input">
      <span class="custom-file-control"></span>
    </label>
  </div>
</form>
Source: components/atoms/forms/_forms.scss, line 35

1.4 atoms.grouping HTML5 Elements; Grouping content

All HTML elements for grouping content, see https://www.w3.org/TR/html51/grouping-content.html p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption ,div

Source: components/atoms/grouping/_grouping.scss, line 1

1.4.1 atoms.grouping.p Body copy

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive a top and bottom margin.

Example

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Markup: components/atoms/grouping/grouping-p.twig
<p class="">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.</p>

<p class="">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

<p class="">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit.</p>
Source: components/atoms/grouping/_grouping.scss, line 116

1.4.2 atoms.grouping.blockquote Block quotes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <blockquote> element is for quoting blocks of content from another source within your document. Wrap the <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Optionally, add a <footer> to identify the source of the quote, wrapping the name of the source work in <cite>.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

J. Smith in Source Title
Markup: components/atoms/grouping/grouping-blockquote.twig
<blockquote class="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
  erat a ante.</p>
</blockquote>

<blockquote class="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
  erat a ante.</p>
  <footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
  Title</cite></footer>
</blockquote>
Source: components/atoms/grouping/_grouping.scss, line 9

1.4.3 atoms.grouping.figure Figures

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <figure> element can be used to annotate illustrations, diagrams, photos, code listings, etc.

Optionally, a <figcaption> element inside the <figure> represents the caption of the figure.

Example
An illustration, diagram, photo, code listing, etc.

A generic square placeholder image.
A caption for the above image.

A generic square placeholder image.
A caption for the above image.
Markup: components/atoms/grouping/grouping-figure.twig
<figure class="">
  An illustration, diagram, photo, code listing, etc.
</figure>
<hr/>
<figure class="figure">
  <img src="http://placehold.it/350x150/" class="figure-img img-fluid" alt="A generic square placeholder image.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<hr/>
<figure class="figure">
  <img src="http://placehold.it/350x150" class="figure-img img-fluid" alt="A generic square placeholder image.">
  <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
</figure>
Source: components/atoms/grouping/_grouping.scss, line 90

1.4.4 atoms.grouping.hr Horizontal rule

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Example

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.


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

Markup: components/atoms/grouping/grouping-hr.twig
<p>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.</p>

<hr class="">

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
Source: components/atoms/grouping/_grouping.scss, line 105
Source: components/atoms/grouping/_grouping.scss, line 27
Example
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Markup: components/atoms/grouping/grouping-ol.twig
<ol class="">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ol class="">
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ol>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>
Source: components/atoms/grouping/_grouping.scss, line 40
Example
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Markup: components/atoms/grouping/grouping-ul.twig
<ul class="">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul class="">
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
Source: components/atoms/grouping/_grouping.scss, line 31
Example
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Markup: components/atoms/grouping/grouping-dl.twig
<dl class="">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
Source: components/atoms/grouping/_grouping.scss, line 49

1.4.6 atoms.grouping.pre Preformatted text

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <pre> element represents a block of preformatted text, such as fragments of computer code, ASCII art, etc.

Example
The following text is preformatted:
(ノ゜Д゜)ノ ︵ ┻━┻
Markup: components/atoms/grouping/grouping-pre.twig
The following text is preformatted:
<pre class="">
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
Source: components/atoms/grouping/_grouping.scss, line 136
Examples
Default styling

.icon-groep-mensen-torso
groep mensen torso

.icon-klantencontactcenter
klantencontactcenter

.icon-servicedesk-telefonie
servicedesk telefonie

.icon-servicedesk-ict
servicedesk ict

.icon-vind-je-collega
vind je collega

.icon-aanmelden-bezoek
aanmelden bezoek

.icon-meldpunt-incidenten
meldpunt incidenten

.icon-pijl-links
pijl links
.icon-pijl-beneden
pijl beneden

.icon-pijl-rechts
pijl rechts

.icon-pijl-boven
pijl boven

.icon-kaart
kaart

.icon-filter
filter

.icon-locatie-marker
locatie marker

.icon-oog
oog

.icon-kaart-lagen
kaart lagen

.icon-brede-blik
brede blik

.icon-maatwerk
maatwerk

.icon-rijkspas
rijkspas

.icon-facts-and-figures
facts and figures

.icon-planning
planning

.icon-actueel
actueel

.icon-ster
ster

.icon-bel
bel

.icon-routevlag
routevlag

.icon-hart
hart

.icon-raamwerk
raamwerk

.icon-verbetering-proces
verbetering proces

.icon-verbinding
verbinding

.icon-som-der-delen
som der delen

.icon-gereedschap
gereedschap

.icon-start
start

.icon-rekenmachine
rekenmachine

.icon-publiek
publiek

.icon-gemeenschappelijk-doel
gemeenschappelijk doel

.icon-alarmering-functionarissen
alarmering functionarissen

.icon-proces
proces

.icon-keten
keten

.icon-balie
balie

.icon-consult
consult

.icon-uit-aanknop
uit aanknop

.icon-activiteit
activiteit

.icon-ketting
ketting

.icon-afschaling
afschaling

.icon-zandloper
zandloper

.icon-boeket
boeket

.icon-kantoorbenodigdheden
kantoorbenodigdheden

.icon-automaten
automaten

.icon-adresboek
adresboek

.icon-kalender
kalender

.icon-info
info

.icon-hulp
hulp

.icon-home
home

.icon-contact
contact

.icon-settings
settings

.icon-printer
printer

.icon-computer
computer

.icon-laptop
laptop

.icon-klok
klok

.icon-winkelwagen
winkelwagen

.icon-email
email

.icon-externe-link
externe link
.icon-nieuws
nieuws

.icon-rss
rss

.icon-vraag-en-antwoord
vraag en antwoord

.icon-afspelen
afspelen

.icon-pause
pause

.icon-stop
stop

.icon-audio
audio

.icon-formulier
formulier

.icon-weblogbericht
weblogbericht

.icon-overig
overig

.icon-communicatie
communicatie

.icon-informatiemanagement
informatiemanagement

.icon-media
media

.icon-dataverkeer
dataverkeer

.icon-ict
ict

.icon-klachten
klachten

.icon-delen
delen

.icon-upload
upload

.icon-download-CSV-bestand
download CSV bestand

.icon-download-geoJSON-bestand
download geoJSON bestand

.icon-maak-eigen-kaart
maak eigen kaart

.icon-voeg-iconenset-toe
voeg iconenset toe

.icon-buzzer
buzzer

.icon-foto-toevoegen
foto toevoegen

.icon-ga-naar-www
ga naar www

.icon-gallery
gallery
.icon-instellingen
instellingen

.icon-naslag-internet
naslag internet

.icon-nieuws-toevoegen
nieuws toevoegen

.icon-video-camera
video camera

.icon-video-toevoegen
video toevoegen

.icon-video
video

.icon-www
www

.icon-volgorde
volgorde

.icon-usb-lader
usb lader

.icon-samenhang-van-documenten
samenhang van documenten

.icon-kwaliteit
kwaliteit

.icon-conferentie-of-event
conferentie of event

.icon-videovergaderen
videovergaderen

.icon-electronische-paraaf
electronische paraaf

.icon-digitaal-archief
digitaal archief

.icon-fysiek-archief
fysiek archief

.icon-smartphone
smartphone

.icon-tablet
tablet

.icon-hybride-laptop
hybride laptop

.icon-online-veiligheid
online veiligheid

.icon-games
games

.icon-digitale-uitwisseling
digitale uitwisseling

.icon-netwerk
netwerk

.icon-gegevens
gegevens

.icon-dashboardmonitor
dashboardmonitor

.icon-woordenboek
woordenboek

.icon-chip
chip

.icon-server
server

.icon-postzak
postzak

.icon-tolk
tolk

.icon-interculturele-communicatie
interculturele communicatie

.icon-invulformulier
invulformulier

.icon-gum
gum

.icon-digitaliseren-documenten
digitaliseren documenten

.icon-repro
repro

.icon-vergaderservice
vergaderservice

.icon-externe-vergaderruimte
externe vergaderruimte

.icon-narrowcasting
narrowcasting

.icon-bewerken
bewerken

.icon-downloaden
downloaden

.icon-klaarzetten
klaarzetten

.icon-menu
menu

.icon-terug
terug

.icon-user
user

.icon-verwijderen
verwijderen

.icon-zoek
icon zoek

.icon-hashtag
hashtag

.icon-kruis
kruis

.icon-list
list

.icon-th
th

.icon-blanco
blanco

.icon-facebook
facebook

.icon-googleplus
googleplus

.icon-linked-in
linked in

.icon-phone
phone

.icon-pintrest
pintrest

.icon-twitter
twitter

.icon-plus
plus

.icon-min
minus

.icon-chevron-up
chevron omhoog

.icon-chevron-down
chevron omlaag

.icon-caret-left
caret links

.icon-caret-right
caret rechts

.icon-caret-up
caret omhoog

.icon-caret-down
caret omlaag

.icon-angle-left
angle omhoog

.icon-angle-right
angle rechts

.icon-angle-up
angle omhoog

.icon-angle-down
angle omlaag

Markup: components/atoms/icons/icons.twig
<p class="h1 icon [modifier class]"></p>
Source: components/atoms/icons/_icons.scss, line 3
Examples
Default styling
.pagination-sm
Small pagination.
.pagination-lg
Large pagination.
Markup: components/atoms/pagination/pagination.twig
<ul class="pagination [modifier class]">
    <li class="page-item disabled">
        <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Vorige</span>
        </a>
    </li>
    <li class="page-item active">
        <a class="page-link" href="#">1 <span class="sr-only">(current)</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="#" aria-label="Next">
            <span aria-hidden="true">&raquo; </span>
            <span>Volgende</span>
        </a>
    </li>
</ul>
Source: components/atoms/pagination/_pagination.scss, line 1
Examples
Default styling
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-inverse
Table inverse.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.thead-inverse
Thead inverse.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.thead-default
Thead default.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-striped
Use .table-striped to add zebra-striping to any table row within the .
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-bordered
Add .table-bordered for borders on all sides of the table and cells.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-hover
Add .table-hover to enable a hover state on table rows within a .
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-sm
Add .table-sm to make tables more compact by cutting cell padding in half.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-active
Applies the hover color to a particular row or cell.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-success
Indicates a successful or positive action.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-info
Indicates a neutral informative change or action.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-warning
Indicates a warning that might need attention.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-danger
Indicates a dangerous or potentially negative action.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Markup: components/atoms/tables/tables.twig
<table class="table [modifier class]">
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead class="[modifier class]">
    <tr class="[modifier class]">
      <th class="[modifier class]">Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="[modifier class]">
      <td class="[modifier class]">Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr class="[modifier class]">
      <td class="[modifier class]">Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr class="[modifier class]">
      <td class="[modifier class]">Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>
Source: components/atoms/tables/_tables.scss, line 1