Alles was das Herz begehrt

UI-Elemente

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

Mehr Informationen zur Ausrichtung via flex sind in der Bootstrap 4 Dokumentation zu finden.

Tabellen

# 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

Positionen

Pagination

Formular

Validation

Success! You've done it.
Sorry, that username's taken. Try another?
Success! You've done it.
Sorry, that username's taken. Try another?

Eingabefelder Text

Eingabefelder Spezial

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Datei-Upload

Radio / Checkbox / Toggle

Senden