Es gibt zwei praktisce Möglichkeiten, um die von Bootstrap mitgelieferten CSS-Befehle zu überschreiben.
- Bootstrap-Klassen in separater Datei überschreiben
- Eigene CSS-Klassen verwenden
In der ersten Möglichkeit erstellst du eine separate css-Datei und verlinkst diese, nachdem die Bootstrap-Datei verlinkt wurde. So werden die Bootstrap-Regeln nicht überschrieben, sondern die neuen Regeln haben eine höhere Gewichtung.
Du kannst auch die zweite M-öglichkeit nuten eigene Klassen anlegen, um die Eigenschaften zu überschreiben. Beispiel: <button class="btn my-btn">Click me</button> und in css .my-custom-btn{ font-size: 1.5rem }. Der Vorteil der zweiten Variante liegt darin, dass die Bootstrap-Klassen nicht verändert werden.
Statt die Bootstrap CSS zu überschreiben, bietet es sich ebenfalls an, die Sass-Variablen anzupassen und sich so eine individuelle Bootstrap-CSS-Datei erstellen zu lassen.
<!-- 1. Bootstrap-Klassen in separater Datei überschreiben -->
<!-- Inhalt von index.html -->
<html>
<head>
<link rel="stylesheet" src="bootstrap.min.css" />
<link rel="stylesheet" src="my1.css" />
</head>
<body>
<button class="btn">Button in Schriftgröße 1.5rem</button>
</body>
</html>
<!-- Inhalt von my1.css -->
.btn {
font-size:1.5rem;
}
<!-- 2. Eigene CSS-Klassen verwenden -->
<html>
<head>
<link rel="stylesheet" src="bootstrap.min.css" />
<link rel="stylesheet" src="my2.css" />
</head>
<body>
<button class="btn my-btn">Button in Schriftgröße 1.5rem</button>
</body>
</html>
<!-- Inhalt von my2.css -->
.my-btn {
font-size:1.5rem;
}