Styles:

PreviewHtml Code

Headline (Heading 1)

 
<h1>Headline (Heading 1)</h1>
 

Subheadline (Heading 2)

 
<h2>Subheadline (Heading 2)</h2>
 

Subheadline (Heading 3)

 
<h3>Subheadline (Heading 3)</h3>

Lorem ipsum dolor sit amet, ...

 
<p>Lorem ipsum dolor sit amet, ...</p>

 

Links and Buttons:

PreviewHtml Code
A simple link 
<a href="https://google.com">A simple link</a>
A button link 
<a class="btn btn-primary" href="https://google.com">A button link</a>
 
<button class="btn"><i class="fas fa-filter"></i> Default button</button>
  
<button class="btn btn-primary"><i class="fas fa-filter"></i> Primary button</button>
  
<button class="btn btn-lg"><i class="fas fa-filter"></i> Large button</button>

 

Icons:

PreviewHtml Code
<i class="fas fa-search"></i>
 
<i class="fas fa-2x fa-search"></i>
 
 <i class="fas fa-circle-notch fa-spin"></i>
 
<i class="fas fa-search" style="color: #fe0000"></i>

 

Layouts:

2 columns
Preview
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Html Code
<div class="row">
    <div class="col-sm">Lorem ipsum ...</div>
    <div class="col-sm">Lorem ipsum ...</div>
</div>
2 columns with image
Preview
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
logo tw
Html Code
<div class="row">
    <div class="col-sm-8">Lorem ipsum ...</div>
    <div class="col-sm-4"><img src="/images/logo_tw.png" class="img-fluid" /></div>
</div>

 

ETC:

 

PreviewHtml Code
Info box
 
<div class="alert alert-primary">
  <span class="icon align-middle"><i class="fas fa-info-circle"></i></span>
  <span class="align-middle">Info box</span>
</div>
Info box
 
<div class="alert alert-light" >
  <span class="icon align-middle"><i class="fas fa-info-circle"></i></span>
  <span class="align-middle">Info box</span>
</div>
Info box
 
<div class="alert alert-light alert-large" >
  <span class="icon align-middle"><i class="fas fa-info-circle"></i></span>
  <span class="align-middle">Info box</span>
</div>