Uncategorized

Lesson 4 – Bootstrap Colors

Colors are an important part of any website. Bootstrap has dedicated color classes that enable you to add colors to your elements and text without any real hassle.

Text Color Classes

The following are all the classes to style the website’s text.

  • Text-primary
  • Text-secondary
  • Text-dark
  • Text-light
  • Text-success
  • Text-danger
  • Text-warning
  • Text-muted
  • Text-white
  • Text-info

Let’s see what we’ve get if we practically use these classes.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Colors</title>
</head>
<body>
    <div class="container">
        <p class="text-primary">Paragraph with primary text color</p>
        <p class="text-secondary">Paragraph with secondary text color</p>
        <p class="text-success">Paragraph with success text color</p>
        <p class="text-danger">Paragraph with danger text color</p>
        <p class="text-warning">Paragraph with warning text color</p>
        <p class="text-info">Paragraph with info text color</p>
        <p class="text-light bg-dark">Paragraph with light text color</p>
        <p class="text-dark">Paragraph with dark text color</p>
        <p class="text-muted">Paragraph with muted text color</p>
        <p class="text-white bg-dark">Paragraph with white text color</p>
    </div>
    [block]0[/block]
    [block]1[/block]
</body>
</html>

Here is the output of the above code.

Background Colors.

The following are all the colors you can add to an element’s background in Bootstrap.

  • bg-primary
  • bg-secondary
  • bg-success
  • bg-danger
  • bg-warning
  • bg-light
  • bg-dark
  • bg-info
  • bg-white

Here is the practical application of these classes.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Colors</title>
</head>
<body>
    <div class="container">
        <p class="bg-primary">Paragraph with primary background color</p>
        <p class="bg-secondary">Paragraph with secondary background color</p>
        <p class="bg-success">Paragraph with success background color</p>
        <p class="bg-danger">Paragraph with danger background color</p>
        <p class="bg-warning">Paragraph with warning background color</p>
        <p class="bg-light text-dark">Paragraph with light background color</p>
        <p class="bg-dark">Paragraph with dark background color</p>
        <p class="bg-white text-dark">Paragraph with white background color</p>
        <p class="bg-info">Paragraph with info background color</p>
    
    </div>
    [block]2[/block]
    [block]3[/block]
</body>
</html>

You will get the following output once the code is executed.

In the next lesson, we will discuss Bootstrap Layout classes.