Skip to content

Latest commit

 

History

History
9482 lines (8864 loc) · 563 KB

dark-mode.md

File metadata and controls

9482 lines (8864 loc) · 563 KB
layout title description aliases toc robots sitemap
docs
Dark mode helper
Dark mode page helping to debug dark mode
/dark-mode/
true
noindex,follow
disable
true

Components

Accordions

No theme

Accordion Item #1

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Item #2

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Dark theme on container

Accordion Item #1

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Item #2

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Light theme on container

Accordion Item #1

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Item #2

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Dark theme on component

Accordion Item #1

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Item #2

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Light theme on component

Accordion Item #1

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Item #2

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

No theme

Success

Success notification text goes here.

Info

Information notification text goes here.

Warning

Warning notification text goes here.

Error

Error notification text goes here.

Dark theme on container

Success

Success notification text goes here.

Info

Information notification text goes here.

Warning

Warning notification text goes here.

Error

Error notification text goes here.

Light theme on container

Success

Success notification text goes here.

Info

Information notification text goes here.

Warning

Warning notification text goes here.

Error

Error notification text goes here.

Dark theme on component

Success

Success notification text goes here.

Info

Information notification text goes here.

Warning

Warning notification text goes here.

Error

Error notification text goes here.

Light theme on component

Success

Success notification text goes here.

Info

Information notification text goes here.

Warning

Warning notification text goes here.

Error

Error notification text goes here.

Back to top

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Badge

No theme

Notifications 4
Primary Secondary Success Danger Warning Info Light Dark

Dark theme on container

Notifications 4
Primary Secondary Success Danger Warning Info Light Dark

Light theme on container

Notifications 4
Primary Secondary Success Danger Warning Info Light Dark

Dark theme on component

Notifications 4
Primary Secondary Success Danger Warning Info Light Dark

Light theme on component

Notifications 4
Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

No theme

  1. Home
  2. Library
  3. Data
  1. Home
  2. Library

Dark theme on container

  1. Home
  2. Library
  3. Data
  1. Home
  2. Library

Light theme on container

  1. Home
  2. Library
  3. Data
  1. Home
  2. Library

Dark theme on component

  1. Home
  2. Library
  3. Data
  1. Home
  2. Library

Light theme on component

  1. Home
  2. Library
  3. Data
  1. Home
  2. Library

Buttons

No theme

Primary Primary Secondary Secondary Success Success Danger Danger Warning Warning Info Info Light Light Dark Dark Link Link Outline primary Outline primary Outline secondary Outline secondary Outline success Outline success Outline danger Outline danger Outline warning Outline warning Outline info Outline info Outline light Outline light Outline dark Outline dark Primary Primary YouTube YouTube
Large button
Large button
Large split buttonToggle Dropdown
Large split buttonToggle Dropdown

Dark theme on container

Primary Primary Secondary Secondary Success Success Danger Danger Warning Warning Info Info Light Light Dark Dark Link Link Outline primary Outline primary Outline secondary Outline secondary Outline success Outline success Outline danger Outline danger Outline warning Outline warning Outline info Outline info Outline light Outline light Outline dark Outline dark Primary Primary YouTube YouTube
Large button
Large button
Large split buttonToggle Dropdown
Large split buttonToggle Dropdown

Light theme on container

Primary Primary Secondary Secondary Success Success Danger Danger Warning Warning Info Info Light Light Dark Dark Link Link Outline primary Outline primary Outline secondary Outline secondary Outline success Outline success Outline danger Outline danger Outline warning Outline warning Outline info Outline info Outline light Outline light Outline dark Outline dark Primary Primary YouTube YouTube
Large button
Large button
Large split buttonToggle Dropdown
Large split buttonToggle Dropdown

Dark theme on component

Primary Primary Secondary Secondary Success Success Danger Danger Warning Warning Info Info Light Light Dark Dark Link Link Outline primary Outline primary Outline secondary Outline secondary Outline success Outline success Outline danger Outline danger Outline warning Outline warning Outline info Outline info Outline light Outline light Outline dark Outline dark Primary Primary YouTube YouTube
Large button
Large button
Large split buttonToggle Dropdown
Large split buttonToggle Dropdown

Light theme on component

Primary Primary Secondary Secondary Success Success Danger Danger Warning Warning Info Info Light Light Dark Dark Link Link Outline primary Outline primary Outline secondary Outline secondary Outline success Outline success Outline danger Outline danger Outline warning Outline warning Outline info Outline info Outline light Outline light Outline dark Outline dark Primary Primary YouTube YouTube
Large button
Large button
Large split buttonToggle Dropdown
Large split buttonToggle Dropdown

Card

No theme

<title>Placeholder</title>
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<title>Placeholder</title>
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Featured

Dark theme on container

<title>Placeholder</title>
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<title>Placeholder</title>
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Featured

Light theme on container

<title>Placeholder</title>
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<title>Placeholder</title>
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Featured

Dark theme on component

<title>Placeholder</title>
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<title>Placeholder</title>
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Featured

Light theme on component

<title>Placeholder</title>
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<title>Placeholder</title>
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Featured

Carousel

No theme

Pause Carousel
<title>Placeholder</title>First slide
First slide label

Some representative placeholder content for the first slide.

<title>Placeholder</title>Second slide
Second slide label

Some representative placeholder content for the second slide.

<title>Placeholder</title>Third slide
Third slide label

Some representative placeholder content for the third slide.

Previous Next

Dark theme on container

Pause Carousel
<title>Placeholder</title>First slide
First slide label

Some representative placeholder content for the first slide.

<title>Placeholder</title>Second slide
Second slide label

Some representative placeholder content for the second slide.

<title>Placeholder</title>Third slide
Third slide label

Some representative placeholder content for the third slide.

Previous Next

Light theme on container

Pause Carousel
<title>Placeholder</title>First slide
First slide label

Some representative placeholder content for the first slide.

<title>Placeholder</title>Second slide
Second slide label

Some representative placeholder content for the second slide.

<title>Placeholder</title>Third slide
Third slide label

Some representative placeholder content for the third slide.

Previous Next

Dark theme on component

Pause Carousel
<title>Placeholder</title>First slide
First slide label

Some representative placeholder content for the first slide.

<title>Placeholder</title>Second slide
Second slide label

Some representative placeholder content for the second slide.

<title>Placeholder</title>Third slide
Third slide label

Some representative placeholder content for the third slide.

Previous Next

Light theme on component

Pause Carousel
<title>Placeholder</title>First slide
First slide label

Some representative placeholder content for the first slide.

<title>Placeholder</title>Second slide
Second slide label

Some representative placeholder content for the second slide.

<title>Placeholder</title>Third slide
Third slide label

Some representative placeholder content for the third slide.

Previous Next

Close button

No theme

Close Close Close Close Close Close

Dark theme on container

Close Close Close Close Close Close

Light theme on container

Close Close Close Close Close Close

Dark theme on component

Close Close Close Close Close Close

Light theme on component

Close Close Close Close Close Close

Dropdowns

No theme

Dropdown button
Action Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown

Dark theme on container

Dropdown button
Action Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown

Light theme on container

Dropdown button
Action Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown

Dark theme on component

Dropdown button
Action Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown

Light theme on component

Dropdown button
Action Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown
Primary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown

Dark dropdown variant for retro-compatibility

Dropdown button
Action Toggle Dropdown

Footer

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

List group

No theme

  1. A list item
  2. A list item
  3. A list item
  4. A simple success list group item
  5. A simple info list group item
  6. A simple warning list group item
  7. A simple danger list group item
  8. A simple disabled info list group item
A second button item The current button A disabled button item A simple success list group item A simple info list group item A simple warning list group item A simple danger list group item A simple disabled info list group item
  • An item
  • A list item
  • A list item
A second button item The current button A disabled button item

Dark theme on container

  1. A list item
  2. A list item
  3. A list item
  4. A simple success list group item
  5. A simple info list group item
  6. A simple warning list group item
  7. A simple danger list group item
  8. A simple disabled info list group item
A second button item The current button A disabled button item A simple success list group item A simple info list group item A simple warning list group item A simple danger list group item A simple disabled info list group item
  • An item
  • A list item
  • A list item
A second button item The current button A disabled button item

Light theme on container

  1. A list item
  2. A list item
  3. A list item
  4. A simple success list group item
  5. A simple info list group item
  6. A simple warning list group item
  7. A simple danger list group item
  8. A simple disabled info list group item
A second button item The current button A disabled button item A simple success list group item A simple info list group item A simple warning list group item A simple danger list group item A simple disabled info list group item
  • An item
  • A list item
  • A list item
A second button item The current button A disabled button item

Dark theme on component

  1. A list item
  2. A list item
  3. A list item
  4. A simple success list group item
  5. A simple info list group item
  6. A simple warning list group item
  7. A simple danger list group item
  8. A simple disabled info list group item
A second button item The current button A disabled button item A simple success list group item A simple info list group item A simple warning list group item A simple danger list group item A simple disabled info list group item
  • An item
  • A list item
  • A list item
A second button item The current button A disabled button item

Light theme on component

  1. A list item
  2. A list item
  3. A list item
  4. A simple success list group item
  5. A simple info list group item
  6. A simple warning list group item
  7. A simple danger list group item
  8. A simple disabled info list group item
A second button item The current button A disabled button item A simple success list group item A simple info list group item A simple warning list group item A simple danger list group item A simple disabled info list group item
  • An item
  • A list item
  • A list item
A second button item The current button A disabled button item

Local navigation

No theme

Shop

Dark theme on container

Shop

Light theme on container

Shop

Dark theme on component

Shop

Light theme on component

Shop

Modal

No theme

Launch modal
<title>Placeholder</title>
Modal title
Close

Modal body text goes here.




































Close Save changes

Dark theme on container

Launch modal
<title>Placeholder</title>
Modal title
Close

Modal body text goes here.




































Close Save changes

Light theme on container

Launch modal
<title>Placeholder</title>
Modal title
Close

Modal body text goes here.




































Close Save changes

Dark theme on component

Launch modal
<title>Placeholder</title>
Modal title
Close

Modal body text goes here.




































Close Save changes

Light theme on component

Launch modal
<title>Placeholder</title>
Modal title
Close

Modal body text goes here.




































Close Save changes

Navbar

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Navs & tabs

No theme

Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4

Dark theme on container

Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4

Light theme on container

Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4

Dark theme on component

Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4

Light theme on component

Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4

Offcanvas

No theme

Button with data-bs-target
Offcanvas
Close
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Dark theme on container

Button with data-bs-target
Offcanvas
Close
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Light theme on container

Button with data-bs-target
Offcanvas
Close
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Dark theme on component

Button with data-bs-target
Offcanvas
Close
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Light theme on component

Button with data-bs-target
Offcanvas
Close
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Orange navbar

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Pagination

No theme

  • Previous
  • 1
  • 2
  • 3
  • 4

Dark theme on container

  • Previous
  • 1
  • 2
  • 3
  • 4

Light theme on container

  • Previous
  • 1
  • 2
  • 3
  • 4

Dark theme on component

  • Previous
  • 1
  • 2
  • 3
  • 4

Light theme on component

  • Previous
  • 1
  • 2
  • 3
  • 4

Placeholders

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Popovers

No theme

Popover title

And here's some amazing content. It's very engaging. Right?
Click to toggle popover

Dark theme on container

Popover title

And here's some amazing content. It's very engaging. Right?
Click to toggle popover

Light theme on container

Popover title

And here's some amazing content. It's very engaging. Right?
Click to toggle popover

Dark theme on component

Popover title

And here's some amazing content. It's very engaging. Right?
Click to toggle popover

Light theme on component

Popover title

And here's some amazing content. It's very engaging. Right?
Click to toggle popover

Progress

No theme

30%
30% (.bg-primary)
25%
50%
75%
100%
30% (.text-bg-primary)
25% (.text-bg-success)
50% (.text-bg-info)
75% (.text-bg-warning)
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
50%
70%

Dark theme on container

30%
30% (.bg-primary)
25%
50%
75%
100%
30% (.text-bg-primary)
25% (.text-bg-success)
50% (.text-bg-info)
75% (.text-bg-warning)
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
50%
70%

Light theme on container

30%
30% (.bg-primary)
25%
50%
75%
100%
30% (.text-bg-primary)
25% (.text-bg-success)
50% (.text-bg-info)
75% (.text-bg-warning)
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
50%
70%

Dark theme on component

30%
30% (.bg-primary)
25%
50%
75%
100%
30% (.text-bg-primary)
25% (.text-bg-success)
50% (.text-bg-info)
75% (.text-bg-warning)
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
50%
70%

Light theme on component

30%
30% (.bg-primary)
25%
50%
75%
100%
30% (.text-bg-primary)
25% (.text-bg-success)
50% (.text-bg-info)
75% (.text-bg-warning)
100% (.text-bg-danger)
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
50%
70%

Spinners

No theme

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Dark theme on container

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Light theme on container

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Dark theme on component

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Light theme on component

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Stepped process

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Stickers

No theme

69.99 € 39.99 € Per month 39.99 € per month instead of 69.99 €

Free delivery

Dark theme on container

69.99 € 39.99 € Per month 39.99 € per month instead of 69.99 €

Free delivery

Light theme on container

69.99 € 39.99 € Per month 39.99 € per month instead of 69.99 €

Free delivery

Dark theme on component

69.99 € 39.99 € Per month 39.99 € per month instead of 69.99 €

Free delivery

Light theme on component

69.99 € 39.99 € Per month 39.99 € per month instead of 69.99 €

Free delivery

Tags

No theme

  • Filter byMobile
  • Filter byTV
  • 1. Introduction
  • Dismissible tag Close
  • Dismissible tag Close
  • Input Close

  • Filter byMobile

Dark theme on container

  • Filter byMobile
  • Filter byTV
  • 1. Introduction
  • Dismissible tag Close
  • Dismissible tag Close
  • Input Close

  • Filter byMobile

Light theme on container

  • Filter byMobile
  • Filter byTV
  • 1. Introduction
  • Dismissible tag Close
  • Dismissible tag Close
  • Input Close

  • Filter byMobile

Dark theme on component

  • Filter byMobile
  • Filter byTV
  • 1. Introduction
  • Dismissible tag Close
  • Dismissible tag Close
  • Input Close

  • Filter byMobile

Light theme on component

  • Filter byMobile
  • Filter byTV
  • 1. Introduction
  • Dismissible tag Close
  • Dismissible tag Close
  • Input Close

  • Filter byMobile

Title bars

No theme

Title

Dark theme on container

Title

Light theme on container

Title

Dark theme on component

Title

Light theme on component

Title

Toasts

No theme

Boosted 11 mins ago Close
Hello, world! This is a toast message.

Dark theme on container

Boosted 11 mins ago Close
Hello, world! This is a toast message.

Light theme on container

Boosted 11 mins ago Close
Hello, world! This is a toast message.

Dark theme on component

Boosted 11 mins ago Close
Hello, world! This is a toast message.

Light theme on component

Boosted 11 mins ago Close
Hello, world! This is a toast message.

Tooltips

No theme

Tooltip
Click to toggle tooltip

Dark theme on container

Tooltip
Click to toggle tooltip

Light theme on container

Tooltip
Click to toggle tooltip

Dark theme on component

Tooltip
Click to toggle tooltip

Light theme on component

Tooltip
Click to toggle tooltip

Contents

Basic text elements

No theme

H1

H2

H3

H4

Paragraph

Link
  • First layer
    • Second layer
      • Third layer
  1. First layer
    1. Second layer
      1. Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text Keyboard input Sample output Address
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Blockquote

Styles Blockquote

Figcaption Source Abbr
Summary

Details

highlight

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as bold text too.

<title>A generic square placeholder image with a gray border around it</title>200x200

Dark theme on container

H1

H2

H3

H4

Paragraph

Link
  • First layer
    • Second layer
      • Third layer
  1. First layer
    1. Second layer
      1. Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text Keyboard input Sample output Address
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Blockquote

Styles Blockquote

Figcaption Source Abbr
Summary

Details

highlight

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as bold text too.

<title>A generic square placeholder image with a gray border around it</title>200x200

Light theme on container

H1

H2

H3

H4

Paragraph

Link
  • First layer
    • Second layer
      • Third layer
  1. First layer
    1. Second layer
      1. Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text Keyboard input Sample output Address
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Blockquote

Styles Blockquote

Figcaption Source Abbr
Summary

Details

highlight

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as bold text too.

<title>A generic square placeholder image with a gray border around it</title>200x200

Dark theme on component

H1

H2

H3

H4

Paragraph

Link
  • First layer
    • Second layer
      • Third layer
  1. First layer
    1. Second layer
      1. Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text Keyboard input Sample output Address
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Blockquote

Styles Blockquote

Figcaption Source Abbr
Summary

Details

highlight

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as bold text too.

<title>A generic square placeholder image with a gray border around it</title>200x200

Light theme on component

H1

H2

H3

H4

Paragraph

Link
  • First layer
    • Second layer
      • Third layer
  1. First layer
    1. Second layer
      1. Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text Keyboard input Sample output Address
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Blockquote

Styles Blockquote

Figcaption Source Abbr
Summary

Details

highlight

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as bold text too.

<title>A generic square placeholder image with a gray border around it</title>200x200

Basic form elements

No theme

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select Choose... Option 1 Option 2 Option 3 Option 4 Option 5 Option 6

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea <textarea id="textarea1" rows="3"></textarea>

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Button submit

Button submit

Dark theme on container

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select Choose... Option 1 Option 2 Option 3 Option 4 Option 5 Option 6

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea <textarea id="textarea2" rows="3"></textarea>

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Button submit

Button submit

Light theme on container

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select Choose... Option 1 Option 2 Option 3 Option 4 Option 5 Option 6

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea <textarea id="textarea3" rows="3"></textarea>

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Button submit

Button submit

Dark theme on component

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select Choose... Option 1 Option 2 Option 3 Option 4 Option 5 Option 6

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea <textarea id="textarea4" data-bs-theme="dark" rows="3"></textarea>

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Button submit

Button submit

Light theme on component

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select Choose... Option 1 Option 2 Option 3 Option 4 Option 5 Option 6

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea <textarea id="textarea5" data-bs-theme="light" rows="3"></textarea>

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Button submit

Button submit

Tables

No theme

Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables when nested
#FirstLastHandle
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland

Dark theme on container

Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables when nested
#FirstLastHandle
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland

Light theme on container

Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables when nested
#FirstLastHandle
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland

Dark theme on component

Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables when nested
#FirstLastHandle
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland

Light theme on component

Boosted tables basic and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables striped and hover look
#FirstLastHandle
1ActiveRow@activeRow
2ActiveCell@activeCell
3Random@random
4SkyeIsland@scotland
5Ring ofKerry@ireland
Boosted tables when nested
#FirstLastHandle
Boosted nested table in active row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland
Boosted nested table in striped row
#FirstLastHandle
1ActiveRow@activeRow
2SkyeIsland@scotland

Forms

Color

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Checkboxes & Radios

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Controls

No theme

<textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea> <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea> <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>

Dark theme on container

<textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea> <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea> <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>

Light theme on container

<textarea class="form-control" rows="2" placeholder="Textarea placeholder"></textarea> <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea> <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>

Dark theme on component

<textarea class="form-control" rows="2" placeholder="Textarea placeholder" data-bs-theme="dark"></textarea> <textarea class="form-control" rows="2" data-bs-theme="dark" disabled>Disabled textarea placeholder</textarea> <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" data-bs-theme="dark" readonly></textarea>

Light theme on component

<textarea class="form-control" rows="2" placeholder="Textarea placeholder" data-bs-theme="light"></textarea> <textarea class="form-control" rows="2" data-bs-theme="light" disabled>Disabled textarea placeholder</textarea> <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" data-bs-theme="light" readonly></textarea>

File input

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Helper

No theme

Helper for input
Input label Helper for input

Dark theme on container

Helper for input
Input label Helper for input

Light theme on container

Helper for input
Input label Helper for input

Dark theme on component

Helper for input
Input label Helper for input

Light theme on component

Helper for input
Input label Helper for input

Input group

No theme

Input group text
Button Choose... One Two Three Options

Dark theme on container

Input group text
Button Choose... One Two Three Options

Light theme on container

Input group text
Button Choose... One Two Three Options

Dark theme on component

Input group text
Button Choose... One Two Three Options

Light theme on component

Input group text
Button Choose... One Two Three Options

Labels, fields & text

No theme

Form label Form label Form label Form label
Form text helper

Dark theme on container

Form label Form label Form label Form label
Form text helper

Light theme on container

Form label Form label Form label Form label
Form text helper

Dark theme on component

Form label Form label Form label Form label
Form text helper

Light theme on component

Form label Form label Form label Form label
Form text helper

Quantity selector

No theme

Step down Step up
Step down Step up

Dark theme on container

Step down Step up
Step down Step up

Light theme on container

Step down Step up
Step down Step up

Dark theme on component

Step down Step up
Step down Step up

Light theme on component

Step down Step up
Step down Step up

Range

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Select

No theme

Open this select menu One Two Three Open this select menu One Two Three

Dark theme on container

Open this select menu One Two Three Open this select menu One Two Three

Light theme on container

Open this select menu One Two Three Open this select menu One Two Three

Dark theme on component

Open this select menu One Two Three Open this select menu One Two Three

Light theme on component

Open this select menu One Two Three Open this select menu One Two Three

Star rating

No theme

Results relevance Terrible Bad Mixed Good Excellent

Star rating: rated 3 out of 5

Results relevance Terrible Bad Mixed Good Excellent

Dark theme on container

Results relevance Terrible Bad Mixed Good Excellent

Star rating: rated 3 out of 5

Results relevance Terrible Bad Mixed Good Excellent

Light theme on container

Results relevance Terrible Bad Mixed Good Excellent

Star rating: rated 3 out of 5

Results relevance Terrible Bad Mixed Good Excellent

Dark theme on component

Results relevance Terrible Bad Mixed Good Excellent

Star rating: rated 3 out of 5

Results relevance Terrible Bad Mixed Good Excellent

Light theme on component

Results relevance Terrible Bad Mixed Good Excellent

Star rating: rated 3 out of 5

Results relevance Terrible Bad Mixed Good Excellent

Switches

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Toggle buttons

No theme

Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Checked Checkbox Disabled
Checked Radio Disabled
Day Week Month
Day Week Month

Dark theme on container

Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Checked Checkbox Disabled
Checked Radio Disabled
Day Week Month
Day Week Month

Light theme on container

Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Checked Checkbox Disabled
Checked Radio Disabled
Day Week Month
Day Week Month

Dark theme on component

Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Checked Checkbox Disabled
Checked Radio Disabled
Day Week Month
Day Week Month

Light theme on component

Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Single toggle Single toggle Single toggle
Checked Checkbox Disabled
Checked Radio Disabled
Day Week Month
Day Week Month

Validation

No theme

Choose......
Step downStep up

Invalid feedback

Choose......

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Step downStep up

Invalid feedback

Dark theme on container

Choose......
Step downStep up

Invalid feedback

Choose......

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Step downStep up

Invalid feedback

Light theme on container

Choose......
Step downStep up

Invalid feedback

Choose......

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Step downStep up

Invalid feedback

Dark theme on component

Choose......
Step downStep up

Invalid feedback

Choose......

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Step downStep up

Invalid feedback

Light theme on component

Choose......
Step downStep up

Invalid feedback

Choose......

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Invalid feedback

Step downStep up

Invalid feedback

Utilities

Background

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Borders

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Colors

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Link

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Helper

Color & Background (text-bg)

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Focus ring

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component

Icon link

No theme

Dark theme on container

Light theme on container

Dark theme on component

Light theme on component