Über den Wolken, muss die Beinfreiheit grenzenlos sein …

colors

primary
#00224a
info
#d6358d
success
#5cb85c
warning
#009fd9
danger
#a94442
primary-light
#f0fbff

typography

Basic font-size: 16px
Basic line-height: 1.875

headlines

H1 Überschrift <h1>

H2 Überschrift <h2>

H3 Überschrift <h3>

H4 Überschrift <h4>

H5 Überschrift <h5>
H6 Überschrift <h6>

headlines mit small

Überschrift mit <small>-tag in headlines

<h4>Überschrift <small>mit small in headlines</small></h4>


textformatting

Class Description Example
.lead Makes a paragraph stand out Beispieltext mit Formatierung lead
.small Schriftgröße 85% (wie <small>-tag) Beispieltext mit Formatierung small
.text-left Linksbündiger Text Beispieltext mit Formatierung text-left
.text-center Zentrierter Text Beispieltext mit Formatierung text-center
.text-right Rechtsbündiger Text Beispieltext mit Formatierung text-right
.text-justify Blocksatz Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify
.text-nowrap Text macht keinen Zeilenumbruch Beispieltext mit Formatierung text-nowrap
.text-lowercase In Kleinbuchstaben umwandeln Beispieltext mit Formatierung text-lowercase
.text-uppercase In Großbuchstaben umwandeln Beispieltext mit Formatierung text-uppercase
.text-capitalize Jedes Wort beginnt mit Großbuchstaben Beispieltext mit Formatierung text-capitalize
.text-primary
.text-info
.text-success
.text-warning
.text-danger
Text Colors text-primary (default text color)
text-info
text-success
text-warning
text-danger
.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
.bg-gray
Text Background-Colors bg-primary
bg-info
bg-success
bg-warning
bg-danger
bg-gray (same as this table-row so can’t see it 😉 )

grid

12 column grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Codebeispiel

<div class="row">
<div class="col-xs-12 col-md-4">col-xs-12 col-md-4</div>
<div class="col-xs-12 col-md-6">col-xs-12 col-md-6</div>
<div class="col-xs-12 col-md-2">col-xs-12 col-md-2</div>
</div>

buttons

The button classes can be used on an <a>, <button>, or <input> element

btn

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>


btn-sizes

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>


btn-block

Add class .btn-block to create a block level button

<button type="button" class="btn btn-primary btn-block">Block (volle Breite)</button>


btn disabled/active

The class .active makes a button appear pressed, and the class .disabled makes a button unclickable

<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-primary disabled">Disabled</button>

button-groups

Use a <div> element with class .btn-group to create a button group

horizontal button-groups (default)

 

<div class="btn-group">
<button type="button" class="btn btn-info">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-info">Button 3</button>
</div>

Use a <div> element with classes .btn-group .btn-group-justified to create a justified button group.
Doesn’t work with <button></button> – must be <a></a>

horizontal button-groups justified

 

<div class="btn-group btn-group-justified">
<a type="button" class="btn btn-primary">Button 1</a>
<a type="button" class="btn btn-primary">Button 2</a>
<a type="button" class="btn btn-primary">Button 3</a>
</div>

button-group sizes

Tip: Instead of applying button sizes to every button in a group, use class .btn-group-* to size all buttons in the group

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-info">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-info">Button 3</button>
</div>


vertical button-groups

Use class .btn-group-vertical for vertical button groups

 

<div class="btn-group-vertical">
<button type="button" class="btn btn-info">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-info">Button 3</button>
</div>


justified button-groups

Wrap all buttons in a <div> with class .btn-group btn-group-justified and each button within into a <div&rt; with class .btn-group for full width button groups

 

<div class="btn-group btn-group-justified">
<div class="btn-group"><button class="btn btn-primary" type="button">Button 1</button></div>
<div class="btn-group"><button class="btn btn-primary" type="button">Button 2</button></div>
<div class="btn-group"><button class="btn btn-primary" type="button">Button 3</button></div>
</div>

tables

standard

<table class=“table“>
.table

Tabellenüberschrift <caption>Caption</caption>
th head th head th head
th body td td
th body td td

table-styling

each table can have the following classes to be style differently. Classes can be combined (the table below has each of those classes combined)

Class Description Usage
.table-striped Rows have striped background <table class=“table table-striped“>
.table-bordered Each table-cell has vertical borders <table class=“table table-bordered“>
.table-condensed Table-cells habe less padding for saving space <table class=“table table-condensed“>
.table-hover Row changes background-color while hovering <table class=“table table-hover“>

responsive tables

Wrap any table in a div with class .table-responsive. The table will then scroll horizontally on small devices (under 768px)
<div class="table-responsive">
<table>...</table>
</div>

th head th head th head
th body td td
th body td td

list groups

List Groups are styled Lists or Links.

List (<li> inside <ul>)

  • List-item 1 (class .list-group-item-success)
  • List-item 2 (class .list-group-item-success)
  • List-item 3 (class .list-group-item-warning)
  • List-item 4 (class .list-group-item-danger)

<ul class="list-group">
<li class="list-group-item list-group-item-success">List-item 1 (class .list-group-item-success)</li>
<li class="list-group-item list-group-item-info">List-item 2 (class .list-group-item-success)</li>
<li class="list-group-item list-group-item-warning">List-item 3 (class .list-group-item-warning)</li>
<li class="list-group-item list-group-item-danger">List-item 4 (class .list-group-item-danger)</li>
</ul>

Linked items (<a> inside <div>)

Linked items have to be in one line. Otherwise tags will be added around each <a></a>

<div class="list-group"><a class="list-group-item active" href="#">Linked item (class .active)</a><a class="list-group-item" href="#"><span class="badge">500.000.000</span>linked item with badge</a><a class="list-group-item disabled" href="#">Third item (.disabled)</a><a class="list-group-item bg-info" href="#">Third item (.bg-info)</a></div>

jumbotron & minitron

Make content really stand out with .jumbotron or .minitron
Can be combined with contextual bg-classes like .bg-info (see Minitron-Example)

Jumbotron Headline (h1-h4)

wow this is huuuuuuuuuge!

<div class="jumbotron">
<h1>Jumbotron Headline (h1-h4)</h1>
<p>wow this is huuuuuuuuuge!</p>
</div>

Minitron Headline (h1-h4)

this is not that huuuuuuuuuge!

<div class="minitron bg-info">
<h1>Minitron Headline (h1-h4)</h1>
<p>this is not that huuuuuuuuuge!</p>
</div>

Section Shortcode

Shortcode zum Beginnen einer neuen Section.
sectionSection-Content

Optionale Parameter

  • id=“section-id“
  • class=“section-class“

Section blau mit Wolken

section class="cloudy"Section-Content
Blaue Section mit class=“cloudy“