description: Use loading placeholders for your components or pages to indicate something may still be loading.
group: components
toc: true
-added: "5.1"
+added:
+ version: "5.1"
---
## About
description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
group: customize
toc: true
-added: "5.3"
+added:
+ version: "5.3"
---
{{< callout >}}
group: getting-started
toc: true
aliases: "/docs/5.3/getting-started/build-tools/"
+added:
+ show_badge: false
+ version: "5.1"
---
## Tooling setup
group: getting-started
toc: true
thumbnail: guides/bootstrap-vite@2x.png
+added:
+ show_badge: false
+ version: "5.2"
---
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
description: Set a background color with contrasting foreground color.
group: helpers
toc: true
-added: "5.2"
+added:
+ version: "5.2"
---
## Overview
description: Utility classes that allows you to add and modify custom focus ring styles to elements and components.
group: helpers
toc: true
-added: "5.3"
+added:
+ version: "5.3"
---
The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component.
description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
group: helpers
toc: true
-added: 5.3
+added:
+ version: "5.3"
---
The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.
description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
group: helpers
toc: true
-added: "5.1"
+added:
+ version: "5.1"
---
Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
group: helpers
toc: true
-added: "5.1"
+added:
+ version: "5.1"
---
## How it works
description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
group: layout
toc: true
-added: "5.1"
+added:
+ version: "5.1"
---
Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.
description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
group: utilities
toc: true
-added: 5.3
+added:
+ version: "5.3"
---
## Link opacity
description: Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
group: utilities
toc: true
+added:
+ version: "5.3"
---
## How it works
title: Opacity
description: Control the opacity of elements.
group: utilities
-added: "5.1"
+added:
+ version: "5.1"
---
The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
description: Use our low-level `z-index` utilities to quickly change the stack level of an element or component.
group: utilities
toc: true
-added: "5.3"
+added:
+ version: "5.3"
---
## Example
<div class="bd-intro pt-2 ps-lg-2">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<div class="mb-3 mb-md-0 d-flex text-nowrap">
- {{- if .Page.Params.added -}}
- <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added }}</small>
+ {{- /* This is needed because we want to show the badge if show_badge isn't present or is set to false */ -}}
+ {{- if (or (and (.Page.Params.added) (not (isset .Page.Params.added "show_badge"))) (and (.Page.Params.added) (isset .Page.Params.added "show_badge") (not (eq .Page.Params.added.show_badge false)))) -}}
+ <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added.version }}</small>
{{- end -}}
<a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
View on GitHub
{{- $versions_link = printf "%s/" $page_slug -}}
{{- end -}}
-{{- $added_in_51 := eq (string .Page.Params.added) "5.1" -}}
-{{- $added_in_52 := eq (string .Page.Params.added) "5.2" -}}
-{{- $added_in_53 := eq (string .Page.Params.added) "5.3" -}}
+{{- $added_in_51 := eq (string .Page.Params.added.version) "5.1" -}}
+{{- $added_in_52 := eq (string .Page.Params.added.version) "5.2" -}}
+{{- $added_in_53 := eq (string .Page.Params.added.version) "5.3" -}}
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
projects / thirdparty / bootstrap.git / commitdiff
