Bootstrap 5 Dark Mode

❮ Previous Next ❯

Dark Mode

By default, bootstrap pages have a white (light) background color.

If you want to change the whole page to a darker color, you can add data-bs-theme="dark" to the <html> element:

Default Example

My Page

Some lorem ipsum text.

Try it Yourself »

Dark Mode Example

My Page

Some lorem ipsum text.

Try it Yourself »

Dark Mode For Components

If you don't want the whole page to have a darker color, but only specific components, you can add the data-bs-theme="dark" attribute to the specified component.

For example, add dark mode to a table:

Example

Example

<table class="table" data-bs-theme="dark">
Try it Yourself »

Or for example, add dark mode to a dropdown menu:

Example

Example

<div class="dropdown" data-bs-theme="dark">
Try it Yourself »

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.