Everything the heart desires

UI elements

Breakpoints

Die Bootstrap Breakpoints sind wie folgt definiert:

  • XS: >= 0 (standart)

  • SM: >= 512

  • MD: >= 768

  • LG: >= 992

  • XL: >= 1200

Falls davon abweichend Breakpoints benötigt werden, müssen diese mit eigenen Klassen ergänzt werden oder alternativ die bestehenden überschrieben werden. Ein Workflow zum Überschreiben sieht wie folgt aus:

  • 1. Die bestehenden Breakpoint Größen müssen gesucht werden und
  • 2. mit ggf. CCS-Variablen ersetzt werden, sodass diese zentral angesteuert werden können.

Ein Beispiel dazu:

/* Neue CSS Variable erstellen */
    root {
        --new-breakpoint: 1000px;
    }
    /* Hier den vorher gesuchten Wert von min-witdth mit der Variablen ersetzen */
    @media screen and (min-width: var(--new-breakpoint)) {
        ...
    }

Buttons

btn

btn-outline

alignment

More information on alignment via flex can be found in the Bootstrap 4 documentation.

table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Alerts

Primary! This alert needs your attention, but it's not super important.

Cards

  • Secondary card title

    Some quick example text to build on the card title and make up the bulk of the card's content.

  • Card title

    Card subtitle

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Card link Another link
  • Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Go somewhere

Tooltip

Positions

Pagination

Progress

Forms

Validation

Sorry, that username's taken. Try another?

Input fields Text

Input fields special

Syntactically incorrect email address

File upload

Radio / Checkbox / Toggle

Send