see also: Site Guide, Samples

colors

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

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

Default Primary Info Success Warning Danger Link
<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

Size-classes can be added to btn-class: btn-lg, btn-sm, btn-xs
Large Default Small XSmall

<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

Dot (der mit dem Kreis)

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

btn-rnd

Add class .btn-rnd to create the round button

Round
Button

<button type="button" class="btn btn-primary btn-rnd btn-lg">Round<br/>Button</button>

btn-block

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

Block (volle Breite)

<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

Active Disabled

<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
The size of all buttons inside a button-group can be changed via the following class: btn-group-xs, btn-group-sm, btn-group-lg (default size is btn-group-md).

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

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)

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>

tabs

<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true">Home</a></li>
<li role="presentation" class=""><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false">Profile</a></li>
<li role="presentation" class=""><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" aria-expanded="false">Messages</a></li>
<li role="presentation" class=""><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" aria-expanded="false">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">1</div>
<div role="tabpanel" class="tab-pane" id="profile">2</div>
<div role="tabpanel" class="tab-pane" id="messages">3</div>
<div role="tabpanel" class="tab-pane" id="settings">4</div>
</div>
</div>

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>

blockquotes (Zitate)

Make content really stand out with .jumbotron or .minitron