Style Guide

see also: Site Guide, Samples

colors

primary
#00aeef
info
#f02736
success
#78c800
warning
#ff9632
danger
#e9274c

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 Linie

<h3 class="hr">Überschrift mit class="hr"</h3>


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

24 column grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.col-md-4
.col-md-8
.col-md-4
.col-md-8
.col-md-8
.col-md-8
.col-md-8
.col-md-12
.col-md-12

Codebeispiel

<div class="row">
<div class="col-xs-24 col-md-8">col-xs-24 col-md-8</div>
<div class="col-xs-24 col-md-12">col-xs-24 col-md-12</div>
<div class="col-xs-24 col-md-4">col-xs-24 col-md-4</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-dot

Add class .btn-dot to create the unique TravelScout24 dot button

<button type="button" class="btn btn-primary btn-dot btn-lg">Dot (der mit dem Kreis)</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>

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>

alert boxes

Use a <div> element with class alert to creat a box with padding and margin

different colors

You can use contextual classes to add/change color

  • alert-primary
  • alert-info
  • alert-success
  • alert-warning
  • alert-danger

Codebeispiele

<div class=“alert alert-primary“></div>
<div class=“alert alert-info“></div>
<div class=“alert alert-success“></div>
<div class=“alert alert-warning“></div>
<div class=“alert alert-danger“></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

<div class="list-group"><a class="list-group-item active" href="#">Firstc item (.active)</a><a class="list-group-item" href="#">Second item</a><a class="list-group-item disabled" href="#">Third item (.disabled)</a><a class="list-group-item" href="#">Fourth item</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>

blockquotes (Zitate)

Make content really stand out with .jumbotron or .minitron