

   	<h1>Typography</h1>

<!-- ### Headings (H1, H2, H3, H4, H5, H6) -->
    <h1>h1 Bootstrap heading (36px)</h1>
    <h2>h2 Bootstrap heading (30px)</h2>
    <h3>h3 Bootstrap heading (24px)</h3>
    <h4>h4 Bootstrap heading (18px)</h4>
    <h5>h5 Bootstrap heading (14px)</h5>
    <h6>h6 Bootstrap heading (12px)</h6>
		<br>

 	<h1>Lighter, Secondary Text</h1>
	  <h1>h1 heading <small>secondary text</small></h1>
	  <h2>h2 heading <small>secondary text</small></h2>
	  <h3>h3 heading <small>secondary text</small></h3>
	  <h4>h4 heading <small>secondary text</small></h4>
	  <h5>h5 heading <small>secondary text</small></h5>
	  <h6>h6 heading <small>secondary text</small></h6>
  	<br>

    <h1 class="display-1">Display 1 etc.. om echt op te vallen...</h1>
    <br>



<!-- ### Body copy (BODY – P) -->
	<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.

	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.
	</p>
	<br>



<!-- ### Inline text elements -->
		<p>You can use the mark tag to <mark>highlight</mark> text.</p>
		<p><del>This line of text is meant to be treated as deleted text.</del></p>
		<p><u>This line of text will render as underlined</u></p>
		<p><small>This line of text is meant to be treated as fine print.</small></p>
		<p><em>rendered as italicized text</em></p>
	<br>



<!-- ### Alignment classes -->
		<p class="text-left">Left aligned text.</p>
		<p class="text-center">Center aligned text.</p>
		<p class="text-right">Right aligned text.</p>
		<p class="text-justify">Justified text.</p>
		<p class="text-nowrap">No wrap text.</p>
	<br>


<!-- ### Contextual Colors and Backgrounds classes -->
  		<!-- TEXT COLORS -->
        <h2>Kleur van de tekst</h2>
        <p class="text-primary">Text Primary Color</p>
        <p class="text-secondary">Text Secondary Color</p>
        <p class="text-success">Text Success Color</p>
        <p class="text-info">Text Info Color</p>
        <p class="text-warning">Text Warning Color</p>
        <p class="text-danger">Text Danger Color</p>
        <p class="text-light">Text Light Color</p>
        <p class="text-dark">Text Dark Color</p>
        <p class="text-white">Text White Color</p>
	<br>

        <!-- BACKGROUND COLORS -->
        <h2>Background van de text</h2>
        <div class="bg-primary text-white">Background Primary Color</div>
        <div class="bg-secondary">Background Secondary Color</div>
        <div class="bg-success text-white">Background Success Color</div>
        <div class="bg-info text-white">Background Info Color</div>
        <div class="bg-warning">Background Warning Color</div>
        <div class="bg-danger text-white">Background Danger Color</div>
        <div class="bg-light">Background Light Color</div>
        <div class="bg-dark text-light">Background Dark Color</div>
        <div class="bg-white">Background White Color</div>

	<br>

<!-- ### Transformation classes -->
		<p class="text-lowercase">Lowercased text.</p>
		<p class="text-uppercase">Uppercased text.</p>
		<p class="text-capitalize">Capitalized text.</p>

	<br>

<!-- ### Blockquotes -->
	<blockquote class="blockquote text-left">
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	</blockquote>
	<blockquote class="blockquote text-right">
	  <p>Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</blockquote>



<!-- ### Lists -->
    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>

    <br>

    <ul class="list-group">
      <li class="list-group-item">First item</li>
      <li class="list-group-item active">Second item</li>
      <li class="list-group-item">Third item</li>
    </ul>

    <br>

    <ul class="list-group">
      <li class="list-group-item">New <span class="badge badge-primary badge-pill">2</span></li>
      <li class="list-group-item">Deleted <span class="badge">5</span></li>
      <li class="list-group-item">Warnings <span class="badge">3</span></li>
    </ul>



