Colors

go.raybo.org/49rH

Speaker Notes:

Bootstrap has a number of colors that you can access through contextual color names. They are used all over the place including buttons, background colors as well as text.

Background Colors

  • bg-{COLOR}
    • COLOR:

      primary
      secondary
      success
      danger

      warning
      info
      light
      dark

Here are the colors you can use to set up a background. You can use them in places like buttons, badges and navigation. These are always applicable to outline colors in many places.

Text Colors

  • text-{COLOR}
    • COLOR:

      primary
      secondary
      success
      danger

      warning
      info
      light
      dark

There are also text colors you can use as well and you can see those here.

Link Colors

There's a special version of these for links. The difference is that these will have hover and and focus state colors. They're pretty subtle.

Color Variables 

  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

Theme Colors

In addition to these colors, bootstrap sets up additional colors available as CSS variables, which you can access with the var keyword.

Although you can use these variables. If you really want to customize your colors, it's best to use the Sass version of Bootsrap. It has a lot more color variables and it's much easier to customize them.

Practice

Start End
  1. Add color to text
  2. Change a background color
  3. Change the link color
  4. Use a color variable
  5. Redefine a color
  <h1 class="text-primary">The Robot Roundup Vintage Camper Rally Winds Down</h1>
  <h5  class="bg-success text-white">Over 280 Caravans and Campers Gather and Glamp from All Corners of the Country</h5>

  <p class="text-primary">
    <b style="color: var(--bs-purple)">Q:</b> Why did the robot go camping?<br>
    <b style="color: var(--bs-purple)">A:</b> He needed to recharge his batteries.
  </p>

  &raquo; <a href="#" class="link-warning">Read More</a>