Light

Color
Name	Light
Description	A light gray color used as background and text.
Provider	Skin, BootstrapComponents
Prefixes	bg, text, alert, text-bg
Extension Components	Alert, Badge, Button, Card, Modal, Popover
Reference	getbootstrap.com - color

"text-bg" is not in the list (bg, text, alert, badge) of allowed values for the "Has color prefixes" property.

Updated for Bootstrap 5. Parts of this page's Bootstrap 4 code no longer work with Bootstrap 5. Wikis moving to Bootstrap 5, for example with Chameleon 6, need to update such content too. See the Bootstrap 4 version of this page.

Background

Code

<div class="p-3 text-dark bg-light" >
This is a div with dark text over a light background!
</div>

Result

This is a div with dark text over a light background!

Text

Code

<div class="p-3 text-light bg-dark" >
This is a div with light text over a dark background!
</div>

Result

This is a div with light text over a dark background!

Alert

Code

<div class="alert alert-light" role="alert">
This is a light alert — check it out!
</div>

Result

This is a light alert — check it out!

Badge

Code

===Example heading <span class="badge text-bg-light">New</span>===

Result

Card

Code

<div class="card bg-light text-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Result

Header

Light card title

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

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!