Buttons erstellen – Bootstrap 4 Tutorial für Einsteiger

Daniel - LerneProgrammieren
August 13, 2020

In diesem simplen Tutorial zu Bootstrap 4, lernst du, wie du das beliebte Framework benutzt, um stylishe Buttons zu erstellen. Du benötigst dafür keine Vorerfahrung mit Bootstrap.

Wir gehen Schritt-für-Schritt vor, indem wir zunächst ein HTML-Gerüst erstellen, dann Bootstrap über einen CDN einbinden (mehr dazu später) und schließlich einen Button nach unserer Vorstellung gestalten.

Los geht's mit unserem Tutorial!

1. Das HTML-Gerüst erstellen

Öffne einen Texteditor deiner Wahl (z.B. Notepad++, Windows-Editor, Visual Studio Code o.ä.) und füge folgenden Code ein, um ein Standard-HTML Gerüst zu erstellen.:

Jetzt Coden lernen

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  </head>
  <body>

  </body>
</html>

Mit diesem Code können wir gleich Bootstrap einbinden.

Gut zu wissen: Das Gute ist, dass wir mit dem <meta>-Tag name="viewport" Bootstrap darauf vorzubereiten, die Breite der Website identisch mit der Bildschirmbreite des jeweiligen Geräts (Smartphone, Tablet, Desktop-Computer) festzulegen. Der Teil initial-scale=1 legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.

Speichere deine Datei mit einem beliebigen Namen und der Endung .html z.B. index.html

Du solltest jetzt eine HTML-Datei (index.html) mit dem oben gezeigten Code haben. Um Bootstrap nutzen zu können, musst du es erst in deine HTML-Datei einbinden. Wie das geht zeige ich dir im nächsten Schritt des Tutorials.

2. Woher bekommst du Bootstrap?

Es gibt zwei Möglichkeiten, um Bootstrap für dein Projekt zu benutzen.

Du kannst es entweder auf der Bootstrap-Website (getbootstrap.com) herunterladen oder über einen CDN einbinden.

Ich zeige dir nachfolgend beide Möglichkeiten, wie du es einbinden kannst. Die Methode über den CDN ist für den Anfang jedoch einfacher.

Methode 1 - Bootstrap über den CDN einbinden (Empfehlung für Anfänger)

Wenn du Bootstrap 4 nicht selbst herunterladen und hosten möchtest, kannst du es über ein CDN (Content Delivery Network) einbinden.

MaxCDN bietet einen CDN für Bootstrap's CSS und JavaScript. Du musst ebenfalls jQuery einbinden. Der obige Code sieht mit Bootstrap-Einbindung dann wie folgt aus:

Jetzt Coden lernen

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  </head>
  <body>


    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

Methode 2 - Aktuelles Bootstrap herunterladen

Wenn du Bootstrap selbst herunterladen und hosten möchtest, gehe auf die Website von Bootstrap (Link) und folge dort der Anleitung.

3. Deinen ersten Bootstrap-Button erstellen

Jetzt bist du bereit, deinen ersten Bootstrap-Button zu erstellen.

Erstelle zunächst eine Schaltfläche/Button in HTML. Wenn du den Code dafür noch nicht kennst, kannst du folgende Zeile in deine HTML-Datei, unter das öffnende <body>-Element einfügen:

Jetzt Coden lernen

<button type="button">Ich bin ein Button</button>

Speichere deine Datei und schau sie dir im Browser an. Du solltest jetzt eine recht "langweilige" Schaltfläche mit dem Text "Ich bin ein Button" sehen.

Das Schöne an Bootstrap ist, dass du dich kaum um das Styling deiner HTML-Elemente (wie bspw. Buttons) kümmern musst. Du kannst für das Styling einfach auf die vorgefertigten CSS-Klassen, die Bootstrap dir bereitstellt, zugreifen, um das Aussehen jeglicher Elemente in wenigen Sekunden zu ändern.

Farbe des Buttons ändern

Damit Bootstrap weiß, dass es sich hier um einen Button handelt, benutzt du die CSS-Klasse "btn". Um die Farben der Schaltfläche zu ändern, benutzt du eine weitere vordefinierte Klasse z. B.: "btn-primary" (macht den Button blau).

Wichtig zu wissen ist, dass du mehrere CSS-Klassen für ein Button-Element verwenden kannst. Du musst die verschiedenen CSS-Klassennamen nur mit einem Leerzeichen trennen.

So sieht der Code aus, wenn ich die Bootstrap CSS-Klasse "btn-primary" benutzen möchte:

Jetzt Coden lernen

<button type="button" class="btn btn-primary">Ich bin ein Button</button>

Hier sind sämtliche bereitgestellten Klassen, zur Änderung der Button-Hintergrundfarbe:

Jetzt Coden lernen

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Kostenloser Crashkurs für Anfänger

Jetzt kostenlosen Crashkurs sichern (Online Programmieren, keine Installation nötig)

Größe des Buttons ändern

Doch was, wenn dir der Button zu klein oder zu groß ist?

Auch hier fügst du nur eine CSS-Klasse ein, die von Bootstrap vorgegeben ist. Damit hast du die sofortige Kontrolle über die Größe deiner Elemente.

Button-Größe ändern:

Jetzt Coden lernen

<button type="button" class="btn btn-primary btn-lg">Groß/Large</button>

Probiere es selbst aus: Was passiert, wenn du die Klasse "btn-sm" benutzt?

Weitere Möglichkeiten den Button zu verändern

Es gibt noch viele weitere Bootstrap-Klassen, um deine Buttons zu personalisieren. Du kannst die Schaltflächen bspw. aktivieren (active) oder deaktivieren (disabled), einen Spinner hinzufügen (spinner-border), den Button über die ganze Bildschirmbreite strecken (btn-block) uvm.

Fazit

In diesem einfachen Bootstrap Tutorial hast du gelernt, wie einfach es ist Bootstrap in eine HTML-Datei einzubinden und einen Button zu erstellen. Danach hast du den Button über die vielen vordefinierten Bootstrap CSS-Klassen verändert.

Schaue dir auch die vielen weiteren Tutorials zu Bootstrap in unserem Blog an, um das Twitter-Framework schneller zu verstehen und es zielgerichtet in deinen Web-Projekten einzusetzen.

Programmierer-Crashkurs für Anfänger...kostenlos!

Baue echte Apps, ohne Vorwissen, ohne Installation!