Buttons

Normale Buttons

Primary Mobility Energy Baths Green Internet Internet Secondary Internet Tertiary Water

<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-mobility">Mobility</a>
<a href="#" class="btn btn-energy">Energy</a>
<a href="#" class="btn btn-baths">Baths</a>
<a href="#" class="btn btn-green">Green</a>
<a href="#" class="btn btn-internet">Internet</a>
<a href="#" class="btn btn-internet-secondary">Internet Secondary</a>
<a href="#" class="btn btn-internet-tertiary">Internet Tertiary</a>
<a href="#" class="btn btn-water">Water</a>

Buttons mit Outline

Primary Mobility Energy Baths Green Internet Internet Secondary Internet Tertiary Water

<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-mobility">Mobility</a>
<a href="#" class="btn btn-outline-energy">Energy</a>
<a href="#" class="btn btn-outline-baths">Baths</a>
<a href="#" class="btn btn-outline-green">Green</a>
<a href="#" class="btn btn-outline-internet">Internet</a>
<a href="#" class="btn btn-outline-internet-secondary">Internet Secondary</a>
<a href="#" class="btn btn-outline-internet-tertiary">Internet Tertiary</a>
<a href="#" class="btn btn-outline-water">Water</a>

Varianten der Buttons

Großer Button Großer Button

<a href="#" class="btn btn-primary btn-lg">Großer Button</a>
<a href="#" class="btn btn-outline-primary btn-lg">Großer Button</a>

Kleiner Button Kleiner Button

<a href="#" class="btn btn-primary btn-sm">Kleiner Button</a>
<a href="#" class="btn btn-outline-primary btn-sm">Kleiner Button</a>

Sehr kleiner Button Sehr kleiner Button

<a href="#" class="btn btn-primary btn-xs">Sehr kleiner Button</a>
<a href="#" class="btn btn-outline-primary btn-xs">Sehr kleiner Button</a>

Runder Button Runder Button

<a href="#" class="btn btn-primary btn-pill">Runder Button</a>
<a href="#" class="btn btn-outline-primary btn-pill">Runder Button</a>

Buttons mit Icon

Button mit Icon Button mit Icon

<a href="#" class="btn btn-primary">Button mit Icon <i class="icon-primary"></i></a>
<a href="#" class="btn btn-outline-primary">Button mit Icon <i class="icon-primary"></i></a>

Button-Gruppen

Button Button Button

<div class="btn-group">
    <a href="#" class="btn btn-primary">Button</a>
    <a href="#" class="btn btn-outline-primary">Button</a>
    <a href="#" class="btn btn-outline-primary">Button</a>
</div>

Button-Toolbar

<div class="btn-toolbar">
    <div class="btn-group mr-2">
        <a href="#" class="btn btn-outline-primary">1</a>
        <a href="#" class="btn btn-outline-primary">2</a>
        <a href="#" class="btn btn-outline-primary">3</a>
    </div>
    <div class="btn-group">
        <a href="#" class="btn btn-outline-primary">4</a>
        <a href="#" class="btn btn-outline-primary">5</a>
    </div>
</div>

Einfache Links

Link Link Link Link Link Link

<a href="#">Link</a>
<a href="#" class="link-primary">Link</a>
<a href="#" class="link-mobility">Link</a>
<a href="#" class="link-energy">Link</a>
<a href="#" class="link-baths">Link</a>
<a href="#" class="link-green">Link</a>