Textstyles

Headline 1

Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Headline 2

Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Headline 3

Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Headline 4

Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Headline 5

Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Headline 6

Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Listen

  • Aufzählung 1 Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.
    • Bacon ipsum dolor amet meatball meatloaf drumstick.
    • Bacon ipsum dolor amet meatball meatloaf drumstick.
  • Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.
  • Aufzählung 2 Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.
  • Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Formulare

Meldungen

Sorry, an error occured. Please try again later.

This form has following errors:

  • Bäääh, da ist etas schief gelaufen. Das ist eine Fehlermeldung.
  • Fehlermeldung
It worked.

Na super, das hat geklappt. Das ist eine Erfolgsmeldung.

Eingabefelder

Buttons

Panels

Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Standard Panel

Bacon ipsum dolor amet meatball meatloaf drumstick, tenderloin kielbasa tail doner sausage pork chop cupim jowl landjaeger andouille.

Tabellen

Standard

Standort Berufsfeld Startdatum
Auszubildender Controlling
Auszubildender im Bereich Controlling Controlling

Striped

Standort Berufsfeld Startdatum
Auszubildender Controlling
Auszubildender im Bereich Controlling Controlling

Table with actions

Usually for table column containing actions we use the class .column-actions on th element, and we use .action-btn for each action button within th. The width of the column is recommended to be set 5% if there is one icon and 10% if there are 3 icons.

Job Abo Titel Zustellung Erstellt am Aktionen
2. Test Jobabo
per E-Mail... 10.01.2017

Table responsive for mobile

Resize your browser window to smartphone width to see an effect.

Standard inline

Spalte 1 Spalte 2 Spalte 3
Ein Inhalt der Zelle ein Wert 10.01.2017

50% column

Spalte 1 Spalte 2 Spalte 3
Ein Inhalt der Zelle ein Wert 10.01.2017

100% with headline and content

Spalte 1 Spalte 2 Spalte 3
Ein Inhalt der Zelle ein Wert 10.01.2017

100% only content

Ein Inhalt der Zelle ein Wert 10.01.2017

Mix

Spalte 2 Spalte 3
Ein Inhalt der Zelle, wenn class="hidden-xs in "th (table head)" benutzt wird, wird dies Zelle für das Mobile nicht gezeigt
ein Wert 10.01.2017

Tabs

Nav tabs regular

Nav tabs justified

Nav tabs justified (container-width, as in applicationform)

Implemented the same way as in application form. This is a little buggy since there is container nested within another container.

Pagination

Klein

Normal

Groß

Modals

Modal content

The following content will be moved from here and injected into the modal.

Popovers

Glyphicons

See also http://glyphicons.com/ for a page with search function.

.glyphicons .glyphicons-dog
.glyphicons .glyphicons-dog .light
.glyphicons .glyphicons-dog .drop
.glyphicons .glyphicons-dog .flip
.glyphicons .glyphicons-dog .flipv
.glyphicons .glyphicons-dog .rotate90
.glyphicons .glyphicons-dog .rotate180
.glyphicons .glyphicons-dog .rotate270
.glyphicons .glyphicons-dog .x05
.glyphicons .glyphicons-dog
.glyphicons .glyphicons-dog .x2
.glyphicons .glyphicons-dog .x3
.glyphicons .glyphicons-dog .x4
.glyphicons .glyphicons-dog .x5

Unsere Benefits

Map

Leaflet Map

Google Map

Please put a map key in frontend/data/key_store/key_google_maps_api.txt.
NOTE: Development key allows only 200 requests per day.

Grid (auto clear)

When using the .auto-clear class, you must ensure that it is only used if all elements use the same grid columns

<div class="row auto-clear">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    ...
</div>

Demo:

lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem

Mixed grid columns

auto-clear supports multiple screen sizes with same column count like this: col-sm-6 col-md-4 col-lg-3

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    ...
</div>
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem

There is no automated solution for grid columns with different column count and same screen sizes. Here, a Clearfix must be integrated at the desired breaking point.
More info: https://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap

lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>

    <div class="clearfix"></div>

    <div class="col-md-6"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    ...
</div>

Result with clearfix - mixed grid columns

lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem