Primary

Color
Name	Primary
Description	A light blue color used mainly as primary background.
Provider	Skin, BootstrapComponents
Prefixes	bg, text, alert, badge
Extension Components	Alert, Badge, Button, Card, Modal, Popover
Reference	getbootstrap.com - color

Background

Code

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

Result

This is div with light text over a primary background!

Text

Code

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

Result

This is div with primary text over a light background!

Alert

Code

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

Result

This is a primary alert — check it out!

Badge

Code

===Example heading <span class="badge badge-primary">New</span>===

Result

Card

Code

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary 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

Primary 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 on this site for creating outstanding content!