How to use Bootstrap Utility classes In Bootstrap

In this approach, we will use Bootstrap utility classes to customize button styles. These classes are a set of predefined CSS classes provided by the Bootstrap framework. These classes allow us to quickly apply styles to elements without having to write custom CSS.

Example: This example shows the use of utility classes to customize the buttons style.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
          Customize Button Styles with Bootstrap Utility Classes
      </title>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
          crossorigin="anonymous">
</head>

<body>
    <div style="text-align: center; " class="container">
        <h1 style="color: green;">w3wiki</h1>
        <h2>Using Utility Classes</h2>
        <button class="btn btn-primary btn-lg">
              Large Primary Button
          </button>
        <button class="btn btn-primary btn-sm">
              Small Primary Button
          </button>
        <button class="btn btn-secondary btn-lg">
              Large Secondary Button
          </button>
        <button class="btn btn-secondary btn-sm">
              Small Secondary Button
          </button>
        <button class="btn btn-success">
              Success Button
          </button>
        <button class="btn btn-danger">
              Danger Button
          </button>
        <button class="btn btn-warning">
              Warning Button
          </button>
    </div>

    <!-- Link Bootstrap JavaScript (optional) -->
    <script 
        src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
      </script>
    <script 
        src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous">
      </script>
    <script 
        src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous">
      </script>
</body>

</html>

Output:

Button Styles in Bootstrap Example Output

How to Customize Button Styles in Bootstrap ?

Customizing button styles in Bootstrap involves modifying predefined classes or creating custom CSS rules. This allows alignment with brand identity, and differentiation, and ensures design consistency across projects.

We can customize button styles in Bootstrap using different approaches as listed below:

Table of Content

Using internal styling
Using Bootstrap Utility classes

How to use Bootstrap Utility classes In Bootstrap

How to Customize Button Styles in Bootstrap ?

Similar Reads