Bootstrap 5: Hjælpeprogrammer


Indholdsfortegnelse

    Vis indholdsfortegnelse

Hjælpeprogrammer/hjælperklasser

Bootstrap 5 har en masse hjælpe-/hjælpeklasser til hurtigt at style elementer uden at bruge nogen CSS-kode.

Grænser

Brug border-klasserne til at tilføje eller fjerne grænser fra et element:

Eksempel


<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>

Prøv det selv →

<!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>

Border Bredde

Brug .border-1 til .border-5 for at ændre bredden af grænsen:

Eksempel

<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>

Prøv det selv →

<!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>

Kantfarve

Tilføj en farve til grænsen med en af de kontekstuelle kantfarveklasser:

Eksempel

<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>

Prøv det selv →

<!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>

Grænseradius

Føj afrundede hjørner til et element med de afrundede klasser:

Eksempel


<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>

Prøv det selv →

<!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>

Float og Clearfix

Flyt et element til højre med klassen .float-end eller til venstre med .float-start , og ryd floats med .clearfix-klassen:

Eksempel

Float left Float right
<div class="clearfix">
  <span class="float-start">Float left</span>
  <span class="float-end">Float right</span>
</div>

Prøv det selv →

<!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>

Responsive flydere

Flyd et element til venstre eller højre afhængigt af skærmbredden med de responsive float-klasser (.float-*-start|end - hvor * er sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) eller xxl (>=1400px )):

Eksempel

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float right on XXL screens or wider

Float none
<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>

Prøv det selv →

<!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>

Centerjuster

Centrer et element med klassen .mx-auto (tilføjer margin-left og margin-right: auto):

Eksempel

Centered
<div class="mx-auto bg-warning" style="width:150px">Centered</div>

Prøv det selv →

<!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>

Bredde

Indstil bredden af et element med w-* klasserne (.w-25, .w-50 , .w-75, .w-100, . w-auto og .mw-100):

Eksempel

Width 25%
Width 50%
Width 75%
Width 100%
Auto Width
Max Width 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>

Prøv det selv →

<!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>

Højde

Indstil højden af et element med h-* klasserne (.h-25, .h-50 , .h-75, .h-100, . h-auto og .mh-100):

Eksempel

Height 25%
Height 50%
Height 75%
Height 100%
Auto Height
Max Height 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>

Prøv det selv →

<!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>

Mellemrum

Bootstrap 5 har en bred vifte af responsive margin- og polstringsfunktionsklasser. De virker for alle breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) eller xxl (>=1400px)):

Klasserne bruges i formatet: {property}{sides}-{size} for xs og < code class="w3-codespan">{property}{sides}-{breakpoint}-{size} for sm, md, lg, xl og xxl.

Hvor ejendom er en af:

  • m - sætter margen

  • p - sætter polstring

Hvor sider er en af:

  • t - sætter margin-top eller padding-top kode>

  • b - sætter margin-bottom eller padding-bottom kode>

  • s - sætter margin-left eller polstring-venstre kode>

  • e - sætter margin-right eller padding-right kode>

  • x - indstiller både padding-left og padding-right eller margin-left og margin-right

  • y - indstiller både padding-top og padding-bottom eller margin-top og margin-bottom

  • blank - indstiller en margen eller polstring på alle 4 sider af elementet

Hvor størrelse er en af:

  • 0 - indstiller margen eller polstring til < code class="w3-codespan">0

  • 1 - indstiller margen eller polstring til < code class="w3-codespan">.25rem

  • 2 - indstiller margen eller polstring til < code class="w3-codespan">.5rem

  • 3 - indstiller margen eller polstring til < code class="w3-codespan">1rem

  • 4 - indstiller margen eller polstring til < code class="w3-codespan">1,5rem

  • 5 - indstiller margen eller polstring til < code class="w3-codespan">3rem

  • auto - indstiller margen til auto

Eksempel

I only have a top padding (1.5rem)
I have a padding on all sides (3rem)
I have a margin on all sides (3rem) and a bottom padding (3rem)
<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>

Prøv det selv →

<!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>

Flere mellemrumseksempler

.m-# / m-*-#

Beskrivelse: margen på alle sider

Prøv det

<!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-*-#

Beskrivelse: margen øverst

Prøv det

<!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-*-#

Beskrivelse: margen nederst

Prøv det

<!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-*-#

Beskrivelse: margen tilbage

Prøv det

<!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-*-#

Beskrivelse: højre margen

Prøv det

<!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-*-#

Beskrivelse: margen til venstre og højre

Prøv det

<!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-*-#

Beskrivelse: margen øverst og nederst

Prøv det

<!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-*-#

Beskrivelse: polstring på alle sider

Prøv det

<!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-*-#

Beskrivelse: polstret top

Prøv det

<!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-*-#

Beskrivelse: polstret bund

Prøv det

<!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-*-#

Beskrivelse: udfyldning venstre

Prøv det

<!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-*-#

Beskrivelse: udfyldning til højre

Prøv det

<!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-*-#

Beskrivelse: polstring øverst og nederst

Prøv det

<!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-*-#

Beskrivelse: polstring til venstre og højre

Prøv det

<!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>

Skygger

Brug shadow- klasserne til at tilføje skygger til et element:

Eksempel

No shadow
Small shadow
Default shadow
Large shadow
<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>

Prøv det selv →

<!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>

Lodret justering

Brug klasserne align- til at ændre justeringen af elementer (virker kun på inline-, inline-blok, inline-table og tabelcelleelementer):

Eksempel

baseline top middle bottom text-top text-bottom
<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>

Prøv det selv →

<!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>

Aspektforhold

Opret lydhør video eller diasshow baseret på forælderens bredde.

Tilføj klassen .ratio sammen med et billedformat efter eget valg .ratio-* til et overordnet element, og tilføj indlejringen (video eller iframe) inde i den:

Eksempel

<!-- 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>

Prøv det selv →

<!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>

Sigtbarhed

Brug klasserne .visible eller .invisible til at kontrollere elementernes synlighed. Bemærk: Disse klasser ændrer ikke CSS-visningsværdien. De tilføjer kun visibility:visible eller visibility:hidden:

Eksempel

I am visible
     <div class="visible">I am visible</div>
<div class="invisible">I am 
      invisible</div>

Prøv det selv →

<!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>

Luk ikon

Brug klassen .btn-close til at style et lukkeikon. Dette bruges ofte til advarsler og modaler.

Eksempel

     <button type="button" class="btn-close"></button>

Prøv det selv →

<!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">&amp;times;</button>
  </div>
</div>

</body>
</html>

Skærmlæsere

Brug klassen .visually-hidden til at skjule et element på alle enheder, undtagen skærmlæsere:

Eksempel

<span class="visually-hidden">I will be hidden on all screens except for screen   readers.</span>

Prøv det selv →

<!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>

Farver

Som beskrevet i kapitlet Farver er her en liste over alle tekst- og baggrundsfarveklasser:

Klasserne for tekstfarver er:

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light

.text-body er standard kropsfarve (ofte sort).

Eksempel

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.

Prøv det selv →

<!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 &quot;meaning through colors&quot;:</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>

Kontekstuelle tekstklasser kan også bruges på links:

Eksempel

Prøv det selv →

<!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>

Du kan også tilføje 50 % opacitet for sort eller hvid tekst med .text-black-50 eller .text-white- 50 klasser:

Eksempel

Black text with 50% opacity on white background

White text with 50% opacity on black background

Prøv det selv →

<!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>

Baggrundsfarver

Klasserne for baggrundsfarver er:

bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

Eksempel

Prøv det selv →

<!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 &quot;meaning through colors&quot;.</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>

.bg-color klasserne ovenfor fungerer ikke godt med tekst, eller så skal du i det mindste angive en ordentlig .text-color klasse for at få den rigtige tekstfarve til hver baggrund.

Du kan dog bruge .text-bg-color klasserne, og Bootstrap håndterer automatisk den passende tekstfarve for hver baggrundsfarve:

Eksempel

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.

Prøv det selv →

<!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>