Bootstrap button variant examples

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to create button variant in bootstrap with code example.

Here, we will use .btn class to make a customize bootstrap colors.

Button variant

Responsive Buttons built with the latest Bootstrap 5. Buttons provide predefined styles warning, info, danger for multiple button types: outline,Checkbox and radio buttons, etc.

Basic example

Use default button style to indicate an action or link within your website.

Example:

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title></title>
  </head>
  <body>
    <div class="col-md-12 text-center">
    <button type="button" class="btn btn-primary">Button</button>
  </div>
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

Check the output of the above code example.

Bootstrap, basic-example

Colors

MDB includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Example:

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Buttons</title>
  </head>
  <body>
    <div class="col-md-12 text-center">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light" data-mdb-ripple-color="dark">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
  </div>
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

Check the output of the above code example.

Bootstrap, Colors

Outline

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Example:

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Buttons</title>
  </head>
  <body>
    <div class="col-md-12 text-center">
      <button type="button" class="btn btn-outline-primary" data-mdb-ripple-color="dark">Primary</button>
      <button type="button" class="btn btn-outline-secondary" data-mdb-ripple-color="dark">Secondary</button>
      <button type="button" class="btn btn-outline-success" data-mdb-ripple-color="dark">Success</button>
      <button type="button" class="btn btn-outline-danger" data-mdb-ripple-color="dark">Danger</button>
      <button type="button" class="btn btn-outline-warning" data-mdb-ripple-color="dark">Warning</button>
      <button type="button" class="btn btn-outline-info" data-mdb-ripple-color="dark">Info</button>
      <button type="button" class="btn btn-outline-light" data-mdb-ripple-color="dark">Light</button>
      <button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark">Dark</button>
  </div>
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

Check the output of the above code example.

Bootstrap, Outline

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as

Example:

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Buttons</title>
  </head>
  <body>
    <div class="col-md-12 text-center">
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary active">
          <input type="checkbox" checked autocomplete="off"> Checked
        </label>
      </div>
  </div>
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

Check the output of the above code example.

Bootstrap, Checkbox, and radio, buttons

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts