Style Guide
see also: Site Guide
colors
#003468
#4d9100
#408d27
#FFAE00
#E74C3C
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
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
tables
standard
<table class=“table“> .table
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>