Bootstrap 5 verfügt über viele Hilfs-/Hilfsklassen, um Elemente schnell zu formatieren, ohne CSS-Code zu verwenden.
Verwenden Sie die Klassen border
, um einem Element Rahmen hinzuzufügen oder zu entfernen:
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Use the border classes to add or remove borders from an element:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
</div>
</body>
</html>
Verwenden Sie .border-1
bis .border-5
, um die Breite des Rahmens zu ändern:
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Border Width</h2>
<p>Use .border-1 to .border-5 to change the width of the border:</p>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
</div>
</body>
</html>
Fügen Sie dem Rahmen eine Farbe mit einer der kontextbezogenen Rahmenfarbklassen hinzu:
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Use a contextual border color to add a color to the border:</p>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
</body>
</html>
Fügen Sie abgerundete Ecken zu einem Element mit den Klassen abgerundet
hinzu:
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<br>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
</div>
</body>
</html>
Gleiten Sie ein Element mit der Klasse .float-end
nach rechts oder mit .float-start
nach links und löschen Sie Floats mit der Klasse .clearfix
:
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Float</h2>
<p>Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class.</p>
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
</div>
</body>
</html>
Lassen Sie ein Element je nach Bildschirmbreite mit den reaktionsfähigen Float-Klassen (.float-*-start|end
- wobei * für sm
(>=576px), md
(>=768px), lg
(>=992px), xl
(>=1200px) oder xxl
(>=1400px )):
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Responsive Floats</h2>
<p>Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg, xl or xxl).</p>
<p>Resize the browser window to see the effect.</p>
<div class="clearfix">
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>
</div>
</div>
</body>
</html>
Zentrieren Sie ein Element mit der Klasse .mx-auto
(fügt margin-left
und margin-right: auto
):
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Horizontal Centering</h1>
<p>Center an element with the .mx-auto class:</p>
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
</div>
</body>
</html>
Legen Sie die Breite eines Elements mit den w-*-Klassen fest (.w-25
, .w-50
, .w-75
, .w-100
, . w-auto
und .mw-100
):
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Width Utilities</h1>
<p>Set the width of an element with the w-* classes:</p>
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
</div>
</body>
</html>
Legen Sie die Höhe eines Elements mit den h-*-Klassen fest (.h-25
, .h-50
, .h-75
, .h-100
, . h-auto
und .mh-100
):
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="h-auto bg-warning">Auto Height</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Height Utilities</h1>
<p>Set the height of an element with the h-* classes:</p>
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">Height 25%</div>
<div class="h-50 d-inline-block p-2 bg-warning">Height 50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">Height 75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">Height 100%</div>
<div class="h-auto d-inline-block p-2 bg-warning">Auto Height</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
</div>
</div>
</body>
</html>
Bootstrap 5 verfügt über eine große Auswahl an responsiven Margin- und Padding-Utility-Klassen. Sie funktionieren für alle Haltepunkte: xs
(<=576px), sm
(>=576px), md
(>=768px), lg
(>=992px), xl
(>=1200px) oder xxl
(>=1400px)):
Die Klassen werden im Format verwendet: {property}{sides}-{size}
für xs
und < Code class="w3-codespan">{property}{sides}-{breakpoint}-{size} für sm
, md
, lg
, xl
und xxl
.
Wobei Eigenschaft eines von Folgendem ist:
m
- legt den Margin
fest
p
- legt Padding
fest
Wobei sides eines von Folgendem ist:
t
- legt margin-top
oder padding-top
fest
b
- legt margin-bottom
oder padding-bottom
fest
s
- legt margin-left
oder padding-left
fest
e
- legt margin-right
oder padding-right
fest
x
- legt sowohl padding-left
als auch padding-right
fest oder margin-left
und margin-right
y
- legt sowohl padding-top
als auch padding-bottom
fest oder margin-top
und margin-bottom
leer - legt einen Rand
oder Abstand
auf allen vier Seiten des Elements fest
Wobei size eines von Folgendem ist:
0
- setzt Margin
oder Padding
auf < Codeklasse="w3-codespan">0
1
- setzt Margin
oder Padding
auf < Codeklasse="w3-codespan">.25rem
2
- setzt Margin
oder Padding
auf < Codeklasse="w3-codespan">.5rem
3
- setzt Margin
oder Padding
auf < Codeklasse="w3-codespan">1rem
4
- setzt Margin
oder Padding
auf < Codeklasse="w3-codespan">1.5rem
5
- setzt Margin
oder Padding
auf < Codeklasse="w3-codespan">3rem
auto
- setzt margin
auf automatisch
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>
</body>
</html>
.m-# / m-*-#
Beschreibung: Rand auf allen Seiten
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>
</body>
</html>
.mt-# / mt-*-#
Beschreibung: Rand oben
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Top Utilities</h1>
<div class="mt-0 bg-warning">Margin Top 0</div>
<div class="mt-1 bg-warning">Margin Top 1</div>
<div class="mt-2 bg-warning">Margin Top 2</div>
<div class="mt-3 bg-warning">Margin Top 3</div>
<div class="mt-4 bg-warning">Margin Top 4</div>
<div class="mt-5 bg-warning">Margin Top 5</div>
<div class="mt-auto bg-warning" style="width:150px">Margin Top Auto</div>
<br>
<p>Responsive margin top utilities. Resize the browser window to see the effect:</p>
<div class="mt-sm-5 bg-warning">Margin Top 5 on SM screens</div>
<div class="mt-md-5 bg-warning">Margin Top 5 on MD screens</div>
<div class="mt-lg-5 bg-warning">Margin Top 5 on LG screens</div>
<div class="mt-xl-5 bg-warning">Margin Top 5 on XL screens</div>
</div>
</body>
</html>
.mb-# / mb-*-#
Beschreibung: Rand unten
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Bottom Utilities</h1>
<div class="mb-0 bg-warning">Margin Bottom 0</div>
<div class="mb-1 bg-warning">Margin Bottom 1</div>
<div class="mb-2 bg-warning">Margin Bottom 2</div>
<div class="mb-3 bg-warning">Margin Bottom 3</div>
<div class="mb-4 bg-warning">Margin Bottom 4</div>
<div class="mb-5 bg-warning">Margin Bottom 5</div>
<div class="mb-auto bg-warning" style="width:150px">Margin Bottom Auto</div>
<br>
<p>Responsive margin bottom utilities. Resize the browser window to see the effect:</p>
<div class="mb-sm-5 bg-warning">Margin Bottom 5 on SM screens</div>
<div class="mb-md-5 bg-warning">Margin Bottom 5 on MD screens</div>
<div class="mb-lg-5 bg-warning">Margin Bottom 5 on LG screens</div>
<div class="mb-xl-5 bg-warning">Margin Bottom 5 on XL screens</div>
</div>
</body>
</html>
.ms-# / ms-*-#
Beschreibung: Rand links
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Left Utilities</h1>
<div class="ms-0 bg-warning">Margin Left 0</div>
<div class="ms-1 bg-warning">Margin Left 1</div>
<div class="ms-2 bg-warning">Margin Left 2</div>
<div class="ms-3 bg-warning">Margin Left 3</div>
<div class="ms-4 bg-warning">Margin Left 4</div>
<div class="ms-5 bg-warning">Margin Left 5</div>
<div class="ms-auto bg-warning" style="width:150px">Margin Left Auto</div>
<p>Responsive margin left utilities. Resize the browser window to see the effect:</p>
<div class="ms-sm-5 bg-warning">Margin Left 5 on SM screens</div>
<div class="ms-md-5 bg-warning">Margin Left 5 on MD screens</div>
<div class="ms-lg-5 bg-warning">Margin Left 5 on LG screens</div>
<div class="ms-xl-5 bg-warning">Margin Left 5 on XL screens</div>
</div>
</body>
</html>
.me-# / me-*-#
Beschreibung: Rand rechts
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Right Utilities</h1>
<div class="me-0 bg-warning">Margin Right 0</div>
<div class="me-1 bg-warning">Margin Right 1</div>
<div class="me-2 bg-warning">Margin Right 2</div>
<div class="me-3 bg-warning">Margin Right 3</div>
<div class="me-4 bg-warning">Margin Right 4</div>
<div class="me-5 bg-warning">Margin Right 5</div>
<div class="me-auto bg-warning" style="width:150px">Margin Right Auto</div>
<br>
<p>Responsive margin left utilities. Resize the browser window to see the effect:</p>
<div class="me-sm-5 bg-warning">Margin Right on SM screens</div>
<div class="me-md-5 bg-warning">Margin Right on MD screens</div>
<div class="me-lg-5 bg-warning">Margin Right on LG screens</div>
<div class="me-xl-5 bg-warning">Margin Right on XL screens</div>
</div>
</body>
</html>
.mx-# / mx-*-#
Beschreibung: Rand links und rechts
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Left and Right Utilities</h1>
<p>Margin X utilities:</p>
<div class="mx-0 bg-warning">Margin X 0</div>
<div class="mx-1 bg-warning">Margin X 1</div>
<div class="mx-2 bg-warning">Margin X 2</div>
<div class="mx-3 bg-warning">Margin X 3</div>
<div class="mx-4 bg-warning">Margin X 4</div>
<div class="mx-5 bg-warning">Margin X 5</div>
<div class="mx-auto bg-warning" style="width:150px">Margin X Auto</div>
<br>
<p>Responsive margin x utilities. Resize the browser window to see the effect:</p>
<div class="mx-sm-5 bg-warning">Margin X 5 on SM screens</div>
<div class="mx-md-5 bg-warning">Margin X 5 on MD screens</div>
<div class="mx-lg-5 bg-warning">Margin X 5 on LG screens</div>
<div class="mx-xl-5 bg-warning">Margin X 5 on XL screens</div>
</div>
</body>
</html>
.my-# / my-*-#
Beschreibung: Rand oben und unten
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Top and Bottom Utilities</h1>
<p>Margin Y utilities:</p>
<div class="my-0 bg-warning">Margin Y 0</div>
<div class="my-1 bg-warning">Margin Y 1</div>
<div class="my-2 bg-warning">Margin Y 2</div>
<div class="my-3 bg-warning">Margin Y 3</div>
<div class="my-4 bg-warning">Margin Y 4</div>
<div class="my-5 bg-warning">Margin Y 5</div>
<div class="my-auto bg-warning">Margin Y Auto</div>
<br>
<p>Responsive margin y utilities. Resize the browser window to see the effect:</p>
<div class="my-sm-5 bg-warning">Margin Y 5 on SM screens</div>
<div class="my-md-5 bg-warning">Margin Y 5 on MD screens</div>
<div class="my-lg-5 bg-warning">Margin Y 5 on LG screens</div>
<div class="my-xl-5 bg-warning">Margin Y 5 on XL screens</div>
</div>
</body>
</html>
.p-# / p-*-#
Beschreibung: Polsterung auf allen Seiten
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Utilities</h1>
<div class="p-0 bg-warning">Padding 0</div>
<div class="p-1 bg-success">Padding 1</div>
<div class="p-2 bg-danger">Padding 2</div>
<div class="p-3 bg-primary">Padding 3</div>
<div class="p-4 bg-light">Padding 4</div>
<div class="p-5 bg-info">Padding 5</div>
<br>
<p>Responsive padding utilities. Resize the browser window to see the effect:</p>
<div class="p-sm-5 bg-warning">Padding 5 on SM screens</div>
<div class="p-md-5 bg-success">Padding 5 on MD screens</div>
<div class="p-lg-5 bg-danger">Padding 5 on LG screens</div>
<div class="p-xl-5 bg-primary">Padding 5 on XL screens</div>
</div>
</body>
</html>
.pt-# / pt-*-#
Beschreibung: Polsteroberteil
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Top Utilities</h1>
<div class="pt-0 bg-warning">Padding Top 0</div>
<div class="pt-1 bg-success">Padding Top 1</div>
<div class="pt-2 bg-danger">Padding Top 2</div>
<div class="pt-3 bg-primary">Padding Top 3</div>
<div class="pt-4 bg-light">Padding Top 4</div>
<div class="pt-5 bg-info">Padding Top 5</div>
<br>
<p>Responsive padding top utilities. Resize the browser window to see the effect:</p>
<div class="pt-sm-5 bg-warning">Padding Top 5 on SM screens</div>
<div class="pt-md-5 bg-success">Padding Top 5 on MD screens</div>
<div class="pt-lg-5 bg-danger">Padding Top 5 on LG screens</div>
<div class="pt-xl-5 bg-primary">Padding Top 5 on XL screens</div>
</div>
</body>
</html>
.pb-# / pb-*-#
Beschreibung: Polsterung unten
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Bottom Utilities</h1>
<div class="pb-0 bg-warning">Padding Bottom 0</div>
<div class="pb-1 bg-success">Padding Bottom 1</div>
<div class="pb-2 bg-danger">Padding Bottom 2</div>
<div class="pb-3 bg-primary">Padding Bottom 3</div>
<div class="pb-4 bg-light">Padding Bottom 4</div>
<div class="pb-5 bg-info">Padding Bottom 5</div>
<br>
<p>Responsive padding bottom utilities. Resize the browser window to see the effect:</p>
<div class="pb-sm-5 bg-warning">Padding Bottom 5 on SM screens</div>
<div class="pb-md-5 bg-success">Padding Bottom 5 on MD screens</div>
<div class="pb-lg-5 bg-danger">Padding Bottom 5 on LG screens</div>
<div class="pb-xl-5 bg-primary">Padding Bottom 5 on XL screens</div>
</div>
</body>
</html>
.ps-# / ps-*-#
Beschreibung: Polsterung links
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Left Utilities</h1>
<div class="ps-0 bg-warning">Padding Left 0</div>
<div class="ps-1 bg-success">Padding Left 1</div>
<div class="psl-2 bg-danger">Padding Left 2</div>
<div class="ps-3 bg-primary">Padding Left 3</div>
<div class="ps-4 bg-light">Padding Left 4</div>
<div class="ps-5 bg-info">Padding Left 5</div>
<br>
<p>Responsive padding left utilities. Resize the browser window to see the effect:</p>
<div class="ps-sm-5 bg-warning">Padding Left 5 on SM screens</div>
<div class="ps-md-5 bg-success">Padding Left 5 on MD screens</div>
<div class="ps-lg-5 bg-danger">Padding Left 5 on LG screens</div>
<div class="ps-xl-5 bg-primary">Padding Left 5 on XL screens</div>
</div>
</body>
</html>
.pe-# / pe-*-#
Beschreibung: Auffüllung rechts
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Right Utilities</h1>
<div class="pe-0 bg-warning text-end">Padding Right 0</div>
<div class="pe-1 bg-success text-end">Padding Right 1</div>
<div class="pe-2 bg-danger text-end">Padding Right 2</div>
<div class="pe-3 bg-primary text-end">Padding Right 3</div>
<div class="pe-4 bg-light text-end">Padding Right 4</div>
<div class="pe-5 bg-info text-end">Padding Right 5</div>
<br>
<p>Responsive padding right utilities. Resize the browser window to see the effect:</p>
<div class="pe-sm-5 bg-warning text-end">Padding Right 5 on SM screens</div>
<div class="pe-md-5 bg-success text-end">Padding Right 5 on MD screens</div>
<div class="pe-lg-5 bg-danger text-end">Padding Right 5 on LG screens</div>
<div class="pe-xl-5 bg-primary text-end">Padding Right 5 on XL screens</div>
</div>
</body>
</html>
.py-# / py-*-#
Beschreibung: Polsterung oben und unten
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Top and Bottom Utilities</h1>
<p>Padding y utilities:</p>
<div class="py-0 bg-warning">Padding Y 0</div>
<div class="py-1 bg-success">Padding Y 1</div>
<div class="py-2 bg-danger">Padding Y 2</div>
<div class="py-3 bg-primary">Padding Y 3</div>
<div class="py-4 bg-light">Padding Y 4</div>
<div class="py-5 bg-info">Padding Y 5</div>
<br>
<p>Responsive padding y utilities. Resize the browser window to see the effect:</p>
<div class="py-sm-5 bg-warning">Padding Y 5 on SM screens</div>
<div class="py-md-5 bg-success">Padding Y 5 on MD screens</div>
<div class="py-lg-5 bg-danger">Padding Y 5 on LG screens</div>
<div class="py-xl-5 bg-primary">Padding Y 5 on XL screens</div>
</div>
</body>
</html>
.px-# / px-*-#
Beschreibung: Polsterung links und rechts
Versuch es
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Left and Right Utilities</h1>
<p>Padding x utilities:</p>
<div class="px-0 bg-warning">Padding X 0</div>
<div class="px-1 bg-success">Padding X 1</div>
<div class="px-2 bg-danger">Padding X 2</div>
<div class="px-3 bg-primary">Padding X 3</div>
<div class="px-4 bg-light">Padding X 4</div>
<div class="px-5 bg-info">Padding X 5</div>
<br>
<p>Responsive padding x utilities. Resize the browser window to see the effect:</p>
<div class="px-sm-5 bg-warning">Padding X 5 on SM screens</div>
<div class="px-md-5 bg-success">Padding X 5 on MD screens</div>
<div class="px-lg-5 bg-danger">Padding X 5 on LG screens</div>
<div class="px-xl-5 bg-primary">Padding X 5 on XL screens</div>
</div>
</body>
</html>
Verwenden Sie die shadow-
-Klassen, um einem Element Schatten hinzuzufügen:
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Shadows</h1>
<p>Use the shadow- classes to to add shadows to an element:</p>
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
</div>
</body>
</html>
Verwenden Sie die align-
-Klassen, um die Ausrichtung von Elementen zu ändern (funktioniert nur bei Inline-, Inline-Block-, Inline-Table- und Tabellenzellenelementen):
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Vertical Align</h1>
<p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p>
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</div>
</body>
</html>
Erstellen Sie reaktionsfähige Videos oder Diashows basierend auf der Breite des übergeordneten Elements.
Fügen Sie die Klasse .ratio
zusammen mit einem Seitenverhältnis Ihrer Wahl .ratio-*
zu einem übergeordneten Element hinzu. und fügen Sie darin die Einbettung (Video oder Iframe) hinzu:
<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Aspect Ratio</h2>
<p>Create a responsive video and scale it nicely to the parent element.</p>
<h2>Aspect ratio 1:1</h2>
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 4:3</h2>
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 16:9</h2>
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 21:9</h2>
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</body>
</html>
Verwenden Sie die Klassen .visible
oder .invisible
, um die Sichtbarkeit von Elementen zu steuern. Hinweis: Diese Klassen ändern den CSS-Anzeigewert nicht. Sie fügen nur visibility:visible
oder visibility:hidden
hinzu:
<div class="visible">I am visible</div>
<div class="invisible">I am
invisible</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Visibility</h1>
<p>Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden to an element:</p>
<div class="visible bg-success">I am visible</div>
<div class="invisible bg-warning">I am invisible</div>
</div>
</body>
</html>
Verwenden Sie die Klasse .btn-close
, um ein Schließsymbol zu formatieren. Dies wird häufig für Warnungen und Modalitäten verwendet.
<button type="button" class="btn-close"></button>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Close Icon</h1>
<p>Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the times; symbol to create the actual icon (a better looking "x"). Also note that it is right-aligned by default:</p>
<div class="clearfix">
<button type="button" class="close">&times;</button>
</div>
</div>
</body>
</html>
Verwenden Sie die Klasse .visually-hidden
, um ein Element auf allen Geräten außer Bildschirmlesegeräten auszublenden:
<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Screen readers</h2>
<p>Use the .sr-only class to hide an element on all devices, except screen readers:</p>
<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>
</div>
</body>
</html>
Wie im Kapitel „Farben“ beschrieben, finden Sie hier eine Liste aller Text- und Hintergrundfarbklassen:
Die Klassen für Textfarben sind:
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light
Der .text-body
hat die Standardkörperfarbe (häufig Schwarz).
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body>
</html>
Kontexttextklassen können auch für Links verwendet werden:
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Link Colors</h2>
<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark grey link.</a>
<a href="#" class="text-body">Body/black link.</a>
<a href="#" class="text-light">Light grey link.</a>
</div>
</body>
</html>
Sie können mit .text-black-50
oder .text-white- auch 50 % Deckkraft für schwarzen oder weißen Text hinzufügen. 50
Klassen:
Black text with 50% opacity on white background
White text with 50% opacity on black background
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Opacity Text Colors</h2>
<p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
<p class="text-black-50">Black text with 50% opacity on white background</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>
</body>
</html>
Die Klassen für Hintergrundfarben sind:
bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
</div>
</body>
</html>
Die oben genannten .bg-color
-Klassen funktionieren nicht gut mit Text, oder zumindest müssen Sie dann einen geeigneten .text-color
-Klasse, um für jeden Hintergrund die richtige Textfarbe zu erhalten.
Sie können jedoch die Klassen .text-bg-color
verwenden und Bootstrap verarbeitet automatisch die entsprechende Textfarbe für jede Hintergrundfarbe:
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Background Color with Contrasting Text Color</h2>
<p class="text-bg-primary">This text is important.</p>
<p class="text-bg-success">This text indicates success.</p>
<p class="text-bg-info">This text represents some information.</p>
<p class="text-bg-warning">This text represents a warning.</p>
<p class="text-bg-danger">This text represents danger.</p>
<p class="text-bg-secondary">Secondary background color.</p>
<p class="text-bg-dark">Dark grey background color.</p>
<p class="text-bg-light">Light grey background color.</p>
</div>
</body>
</html>