Getting Started With Bootstrap Buttons and Bootstrap Badges [Bootstrap Tutorial: Part II]

Overview of Bootstrap Buttons and Badges

Let’s look at Bootstrap buttons and Bootstrap badges from an outside-the-box perspective before diving deeper into their inner workings.

Bootstrap Buttons

Bootstrap buttons come in a range of variants. Button variants are predefined button styles, each with its own semantic meaning. The classes include btn-info and btn-success.

The class btn-group allows you to group Bootstrap buttons. Using the class toolbar, you can also group sets of button groups to form toolbars. You can control the size of your Bootstrap using the classes btn-lg and btn-sm.

Bootstrap Badges

You can use Bootstrap badges as tags, labels, or status indicators. The size of the badges primarily depends on the size of their parent wrapper.

Some real-life examples of websites demonstrate how buttons and badges can be used in modern web design. These examples encompass two categories:

• Websites that use Bootstrap: Bootstrap provides pre-designed components, including buttons and badges, to make it easier for developers to create consistent and visually appealing web interfaces.
• Websites not using Bootstrap: This category includes websites built without relying on the Bootstrap framework. These websites also demonstrate different ways of utilizing buttons and badges in web design, but they may have custom-designed elements or use other front-end frameworks or techniques.

Note: Test your Bootstrap buttons and badges on real devices. Try TestMu AI Today!

Importance of Buttons and Badges in Web Development

Button components are some of the most common ones found on websites, thanks to their many uses. Badges have become more prevalent in web development, though not as common. The points below explore the importance of buttons and badges in web development.

Website Buttons: How important are they?

In this section, we delve into the multifaceted roles of buttons on websites and their practical applications.

Responsive Web Design

Buttons help us make responsive web designs for smaller screen devices like mobile phones, especially with navigation menus. It is usually a toggle, as a hamburger icon in a button element. It gives users access to navigation options on smaller screens and maintains a harmonious visual appearance and user experience.

The example below illustrates how TestMu AI uses a toggle button on smaller screen devices to offer the same user experience to website visitors regardless of the device’s screen size.

Desktop preview:

Tablet preview:

Mobile preview:

In the above previews, I have used LT Browser. It is a dev-friendly mobile next-gen browser built by TestMu AI. LT Browser allows you to perform responsive testing for your website and web apps on 53+ prebuilt device viewports, including mobiles, tablets, desktops, and laptops.

Check the documentation – Getting Started With LT Browser to test your web designs for responsiveness.

And wait! We also have a dedicated video tutorial on LT Browser to help you get started.

Ensure you’re up-to-date with the latest tutorials on mobile app testing, automation testing, and more —Subscribe to the TestMu AI YouTube Channel.

In the above example rendered on LT Browser, you can notice how the menu style changes to a hamburger menu as we gradually switch to smaller-screen devices like the Samsung S22. As it does, the overall layout changes to accommodate it, making it more responsive.

In the above example rendered on LT Browser, you can notice how the menu style changes to a hamburger menu as we gradually switch to smaller-screen devices like the Samsung S22. As it does, the overall layout changes to accommodate it, making it more responsive.

Navigation

Buttons are used in navigation menus to enable users to move to and between different website sections. Hence, buttons act as navigation elements on a website. The example below shows how TestMu AI uses a button to navigate from one section to another, saving the user the time of scrolling or waiting for a link to open another page.

Samsung uses buttons to offer a smooth way for users to navigate through the various products it displays in the hero section. It also uses a Go to Top button to enable users to go back to the top much quicker.

Call-To-Action

Developers usually use buttons as CTAs (Call-To-Action) to prompt users to do or take a desired action, such as purchasing a product, downloading a document, or subscribing to a newsletter. Thus, buttons help websites to achieve their goals.

TestMu AI uses the Book a Demo button as a CTA to induce users to book a demo for various types of testing it offers.

Forms

After a user fills out a form, the information needs to be submitted. It is the next step of submitting, where Bootstrap buttons play a crucial role. Buttons enable users to submit the information they fill in forms, while websites enable them to collect the submitted forms’ data at a desired collection point like a server.

Additional buttons, such as the reset option, empower users to erase form field content or undo any undesired changes effectively.

The example above shows the LOGIN button on TestMu AI’s sign-up form that submits the user’s credentials.

Modals and Pop-ups

Modals are overlay components that appear on top of the main content, focusing on a specific task, usually centered on the screen, and dimming the background content to visually emphasize the modal’s information. Modal interactions typically include precise actions like submitting a form, confirming information, or making a choice.

The above example shows how TestMu AI uses the Book a Demo button to provide users with a form in the aspect of a modal to complete the task at hand.

Impact of Badges in Web Development

Let’s look at some areas where badges are prevalent in web development.

Notifications

One of the major areas where badges have found widespread use is notifications. Badges usually show the number of unread messages, missed calls, or todos you have in a specific application.

The image below shows how X (formerly Twitter) uses a badge to indicate the number of notifications in the upper right corner of the bell icon.

Status Indicators

Have you ever seen a blog article card on a website’s blog page with the badge Featured or Trending? It is now a web development trend to label blog cards to distinguish them from the rest to attract the viewer’s attention.

In the below example, Hashnode uses a badge to show you articles it is featuring on the platform.

As you can see below, TestMu AI enhances user awareness by incorporating badges onto the blog cards, effectively informing readers about the specific number of chapters contained within each blog article.

Components of Bootstrap Buttons

Bootstrap has several utility classes to work with buttons, from styling and sizing the buttons to grouping and deactivating their functionality. Below are some of the classes for Bootstrap button:

You can use other HTML elements as buttons in Bootstrap, such as the < a > and < input > elements.

<a class="btn btn-light border" href="#" role="button">Book a Testing Demo</a>
<input class="btn btn-primary" type="button" value="More on LT Browser">

The btn Class

The btn class defines the basic styling for an element you want to use as a button in Bootstrap. It defines padding, content alignment, transparent border, and background for that element.

Code:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link
     rel="stylesheet"
     href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
   />
   <title>Bootstrap CSS Buttons - The btn class</title>
 </head>
 <body class="py-5 bg-light">
   <div class="container">
     <button class="btn">Explore Selenium testing</button>
     <button class="btn">Explore Cypress testing</button>
     <button class="btn">Explore Playwright testing</button>
   </div>


   <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

Browser output:

From the preview above, the btn class has set a transparent background, border color, and padding for our button elements.

Button Variants

Button variants refer to the predefined styles you can apply to buttons to change color. These variants provide contextual meaning. They include:

The button variants are not limited to conveying contextual importance only. You can also use them to create aesthetically pleasing UI interfaces.

The image below shows how Traversy Media uses different button variants based on the section background to make the buttons stand out. Furthermore, the button variants provide design versatility. This helps you match the button variants to your website branding and color scheme, creating a visually appealing and cohesive design.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Button Variants</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
      body::before {
        display: block;
        content: '';
        height: 90px;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
      <div id="logo" class="container ms-auto">
        <a class="navbar-brand" href="#">
          <img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar-menu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
            <li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
              <a href="" class="nav-link">Login</a>
              <button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
                Book a Demo
              </button>
              <a class="btn btn-dark" href="#" role="button">Sign Up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Hero section -->
    <section class="bg-primary-subtle text-center pt-5">
      <div class="container">
        <h1 class="fs-1">LambdaTest for Community </h1>
        <p class="text-secondary text-center font-normal mx-auto lh-base fs-5 mt-4 pb-5">
          LambdaTest's community is the heart of the company, with more than 100k members. <br> With our platform, testers and developers can orchestrate and execute tests <br> seamlessly, resulting in faster releases.
        </p>
      </div>
    </section>
    <!-- Sections -->
    <section class="p-5">
      <div class="text-center">
        <h2>LambdaTest Programs</h2>
        <p class="text-secondary">Join LambdaTest community and explore our program</p>
      </div>
      <div class="container py-5">
        <!-- section 1 -->
        <div class="d-flex align-items-center justify-content-start gap-5">
          <div class="d-flex flex-column gap-3 p-5">
            <h2 class="fs-3 lh-base">Voices of Community</h2>
            <p class="text-secondary fs-6">
              Join us for Voices of Community, our monthly talk show where Manoj Kumar, VP - Developer Relations, LambdaTest, hosts testing, and quality assurance experts.
            </p>
            <button class="btn btn-info d-flex justify-content-around py-2">
              Join Voices of Community
              <img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
            </button>
          </div>
          <div class="d-none d-sm-none d-md-none d-lg-block">
            <img src="https://www.lambdatest.com/resources/images/community/voices_of_community.svg" alt="">
          </div>
        </div>
        <!-- section 2 -->
        <div class="d-flex align-items-center justify-content-start gap-5">
          <div class="d-none d-sm-none d-md-none d-lg-block">
            <img src="https://www.lambdatest.com/resources/images/community/discord_community.svg" alt="">
          </div>
          <div class="d-flex flex-column gap-3 p-5">
            <h2 class="fs-3 lh-base">LambdaTest Community on Discord</h2>
            <p class="text-secondary fs-6">
              Become a part of a global network of testers and developers from over 130 contries and take part in challenges, discover exciting new opportunities, network with peers, and win prizes.
            </p>
            <button class="btn btn-primary d-flex justify-content-around py-2">
              Coming soon
            </button>
          </div>
        </div>
        <!-- section 3 -->
        <div class="d-flex align-items-center justify-content-start gap-5">
          <div class="d-flex flex-column gap-3 p-5">
            <h2 class="fs-3 lh-base">LambdaTest For Open Source</h2>
            <p class="text-secondary fs-6">
              LambdaTest is a strong advocate of open-source and wants to spur innovation in the community.
            </p>
            <button class="btn btn-dark d-flex justify-content-around py-2">
              Explore open source program
              <img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
            </button>
          </div>
          <div class="d-none d-sm-none d-md-none d-lg-block">
            <img src="https://www.lambdatest.com/resources/images/community/open_source_program.svg" alt="">
          </div>
        </div>
        <!-- section 4 -->
        <div class="d-flex align-items-center justify-content-start gap-5">
          <div class="d-none d-sm-none d-md-none d-lg-block">
            <img src="https://www.lambdatest.com/resources/images/community/community_learn.svg" alt="">
          </div>
          <div class="d-flex flex-column gap-3 p-5">
            <h2 class="fs-3 lh-base">Learn with Lambdatest</h2>
            <p class="text-secondary fs-6">
              Learn everything about the testing process through informative videos. Take advantage of the expertise of industry thought leaders. Get the latest product updates from LambdaTest. Explore in-depth about LambdaTest.
            </p>
            <button class="btn btn-light d-flex justify-content-around py-2">
              Watch videos
              <img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
            </button>
          </div>
        </div>
        <!-- section 5 -->
        <div class="d-flex align-items-center justify-content-start gap-5">
          <div class="d-none d-sm-none d-md-none d-lg-block order-1">
            <img src="https://www.lambdatest.com/resources/images/community/community_certifications.svg" alt="">
          </div>
          <div class="d-flex flex-column gap-3 p-5">
            <h2 class="fs-3 lh-base">LambdaTest Certifications</h2>
            <p class="text-secondary fs-6">
              Earn resume-worthy certifications that help you land a top job. Prove your expertise by adding top automation testing certification and globally recognized badges to your profile.
            </p>
            <button class="btn btn-warning d-flex justify-content-around py-2">
              Get certified
              <img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
            </button>
          </div>
        </div>
      </div>
    </section>

    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Browser output:

In the browser output above, we have used different button variants for TestMu AI’s Community programs’ CTAs, creating a captivating and eye-catching web design.

Button tagsYou can use any of the three HTML elements as buttons in Bootstrap:

• < button >
• < input >
• < a >

It is advisable to supply the < input > and < a > with the ARIA attribute role, to communicate their intent to assistive technologies such as screen readers.ARIA attributes, such as the “role” attribute, contribute to a more inclusive web experience by enabling impaired individuals to interact with and comprehend web content effectively.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Button tags</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
      body::before {
        display: block;
        content: '';
        height: 90px;
      }
    </style>
  </head>
  <body class="pb-4">
    <nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
      <div id="logo" class="container ms-auto">
        <a class="navbar-brand" href="#">
          <img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar-menu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
            <li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
              <a href="" class="nav-link">Login</a>
              <button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
                Book a Demo
              </button>
              <a class="btn btn-dark" href="#" role="button">Sign Up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- section 1 -->
    <section class="py-5 bg-primary-subtle">
      <div class="container">
        <div class="d-flex flex-column text-center gap-4">
          <div>
            <h2 class="fw-bold fs-1">Ready to Get Started?</h2>
            <p>Signup to use LambdaTest, it's completely free to get started with.</p>
          </div>
          <div class="d-flex align-items-center flex-column gap-4">
            <input class="w-50 form-control" placeholder="Your email address" type="text">
            <button class="btn btn-dark px-3">Start Free Testing</button>
          </div>
        </div>
      </div>
    </section>
    <!-- section 2 -->
    <section class="bg-light py-5">
      <div class="container">
        <div class="d-flex gap-3">
          <div class="d-flex flex-column gap-5 pe-5 justify-content-center">
            <div>
              <h2>Try LambdaTest Now !!</h2>
              <p>
                Get 100 minutes of automation test minutes FREE!! Run Selenium automation tests in parallel on the fastest online Selenium Grid.
              </p>
            </div>
            <div>
              <div class="d-flex gap-4">
                <input class="w-50 form-control" placeholder="Your email address" type="text">
                <button class="btn btn-dark px-3">Start Free Testing</button>
              </div>
            </div>
          </div>
          <div>
            <img src="https://www.lambdatest.com/resources/images/auto_robot.png" alt="">
          </div>
        </div>
      </div>
    </section>
    <!-- section 3 -->
    <section class="py-5">
      <div class="container">
        <div class="d-flex gap-5 align-items-center">
          <div>
            <h2 class="fw-bold fs-1">
              <span>Elevate Your </span>
              <span class="text-primary">Selenium Testing</span>
              <span class="text-primary-emphasis">Experience</span>
            </h2>
          </div>
          <div>
            <p class="fw-light">
              Experience firsthand how our platform can empower you to reach your Selenium browser testing objectives and bring innovation in your testing procedures. Try LambdaTest today.
            </p>
            <div class="d-inline-flex gap-4">
              <a class="btn btn-dark px-4" href="" role="button">Get Started</a>
              <a class="btn btn-outline-dark d-inline-flex gap-2 px-4" href="#" role="button">
                <img src="https://www.lambdatest.com/resources/images/ep_vector.svg" alt="">
                <span>Talk to us</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Browser output:

In the above output, we have used the < button > and < a > tags to create the buttons.

Outline Buttons

You can create outline buttons like button variants using the format btn-outline-{variant}. The outline button resembles its background variant counterpart when you hover over it, thanks to CSS hover effects. All the outline button variants convey the same meaning as their background variants.

Below are some of the classes:

• btn-outline-primary
• btn-outline-secondary
• btn-outline-success
• btn-outline-danger
• btn-outline-info

Before we dive into different classes of outline button variants Bootstrap provides, let’s look at the relevance of outline buttons in web development.

Subtle CTAs: Outline buttons are optimal for secondary and less vital CTAs. They provide a less assertive way to encourage user interaction. For example, you can use them on Read More actions, as they don’t demand action but are still accessible for users who need them.

Accessibility: Outline buttons have a high contrast between the button border and the background, making them accessible to users with visual impairments. It ensures that they are perceivable and usable by all users.

Reduced Cognitive Load: Outline buttons distinguish between primary and secondary actions, lessening cognitive load for users. Users can quickly identify more critical buttons from less critical ones.

TestMu AI uses outline buttons on the Know More CTAs on the cards in the image above. They command user interaction in a less bold way than the primary actions like Get Started Free while still being accessible to all users.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap outline buttons</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
      body::before {
        display: block;
        content: '';
        height: 90px;
      }

      .conf {
        background-image: url(https://www.lambdatest.com/_next/static/media/testmuBg.ac036cf3.png);
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body class="">
    <nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
      <div id="logo" class="container ms-auto">
        <a class="navbar-brand" href="#">
          <img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar-menu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
            <li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
              <a href="" class="nav-link">Login</a>
              <button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
                Book a Demo
              </button>
              <a class="btn btn-dark" href="#" role="button">Sign Up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Conference -->
    <section class="py-5 bg-primary-subtle">
      <div class="container">
        <div class="conf d-flex justify-content-between text-white ps-5">
          <div class="d-flex flex-column justify-content-around">
            <div class="d-flex flex-column align-items-start">
              <img class="img-fluid mb-4" src="https://www.lambdatest.com/resources/images/tmByLT.svg" alt="" style="height: 50px;">
              <div>
                <h2 class="fw-bolder pb-2" style="font-size: 3.1rem;">Testμ Conference</h2>
                <p class="fs-5">DECODE THE FUTURE OF TESTING</p>
              </div>
              <p class="d-flex align-items-center gap-2">
                <img class="img-fluid" src="https://www.lambdatest.com/resources/images/main/calendar.svg" alt="">
                22 - 24 August, 2023
              </p>
            </div>
            <div>
              <button class="btn btn-outline-light" href="#">
                Register For Free
              </button>
            </div>
          </div>
          <div>
            <img class="img-fluid" src="https://www.lambdatest.com/resources/images/testMubanner.png" alt="">
          </div>
        </div>
      </div>
    </section>
    <!-- LambdaTest -->
    <section class="py-5 bg-light">
      <div class="container">
        <div class="d-flex">
          <div class="">
            <img class="py-2" src="https://www.lambdatest.com/resources/images/footer_lambdatest_logo.svg" alt="">
            <p class="w-75 py-2">
              Deliver unparalleled digital experience with our Next-Gen, AI-powered testing cloud platform. Ensure exceptional user experience across all devices and browsers.
            </p>
            <div class="d-flex gap-4">
              <a class="btn btn-dark d-inline-flex align-items-center gap-3 py-2 px-3" href="#">
                <img src="https://www.lambdatest.com/resources/images/google_favicon.svg" alt="" width="15" height="15">
                Start free with Google
              </a>
              <a class="btn btn-outline-dark py-2 px-3" href="#" role="button">Start free with Email</a>
            </div>
          </div>
          <div class="d-flex flex-column gap-3">
            <div class="row gap-3">
              <img class="col-2" src="https://www.lambdatest.com/resources/images/ltbrowser/G2-2023.png" alt="">
              <img class="col-2" src="https://www.lambdatest.com/resources/images/ltbrowser/Getapp.png" alt="">
              <img class="col-2" src="https://www.lambdatest.com/resources/images/ltbrowser/leader.png" alt="">
              <img class="col-2" src="https://www.lambdatest.com/resources/images/ltbrowser/softwareadvice.png" alt="">
              <img class="col-2" src="https://www.lambdatest.com/resources/images/ltbrowser/crozdesk-2.png" alt="">
            </div>
            <p>LambdaTest is #1 choice for SMBs and Enterprises across the globe.</p>
          </div>
        </div>
    </section>

    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Browser output:

We have used the btn-outline-dark and btn-outline-light classes to create outline buttons that contrast well based on their section background. Also, since Start free with Google is the primary action, we have used the btn-outline-light for the secondary option of Start free with Email.

Button Sizes

Bootstrap provides two utility classes to define the button sizes, btn-lg and btn-sm.

The image below shows how Daniella Draper uses the btn-lg to create a larger CTA button at the end of the products section. The class gives the button larger dimensions, making it easier to notice and interact with.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Button sizes</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
      body::before {
        display: block;
        content: '';
        height: 90px;
      }

      .conf {
        background-image: url(https://www.lambdatest.com/_next/static/media/testmuBg.ac036cf3.png);
        background-repeat: no-repeat;
        background-size: cover;
      }

      .heading {
        background: linear-gradient(90deg, #59fecd, #37abff, #f104e8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
      <div id="logo" class="container ms-auto">
        <a class="navbar-brand" href="#">
          <img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar-menu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
            <li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
              <a href="" class="nav-link">Login</a>
              <button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
                Book a Demo
              </button>
              <a class="btn btn-dark" href="#" role="button">Sign Up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Button sizes -->
    <section class="bg-dark">
      <div class="container">
        <div class="d-flex flex-column justify-content-center align-items-center py-5 gap-5" style="height: 88vh;">
          <h1 class="heading text-white" style="font-size: 3.1rem;">Ready to Try HyperExecute?</h1>
          <div class="row row-cols-2 px-2 py-3 bg-dark border border-secondary border-3 rounded">
            <div class="d-flex flex-column justify-content-center gap-3">
              <p class="text-white fs-4">
                Connect with our experts and learn how to save hours every day by executing your tests at HyperExecute speeds.
              </p>
              <div class="d-flex gap-3">
                <button class="btn btn-info btn-sm d-flex align-items-center gap-3 px-3">
                  Try it Now
                  <img src="https://www.lambdatest.com/resources/images/hyperexecute/arrow.svg" alt="" width="20px" height="20px">
                </button>
                <button class="btn btn-info d-flex align-items-center gap-3">
                  Book a demo
                  <img src="https://www.lambdatest.com/resources/images/hyperexecute/arrow.svg" alt="" width="20px" height="20px">
                </button>
                <button class="btn btn-info btn-lg d-flex align-items-center gap-3">
                  View Docs
                  <img src="https://www.lambdatest.com/resources/images/hyperexecute/arrow.svg" alt="" width="20px" height="20px">
                </button>
              </div>
            </div>
            <div>
              <img class="w-50" src="https://www.lambdatest.com/resources/images/hyperexecute/ready_hyperexecute.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </section>

    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Browser output:

The image above shows the third significant button with the btn-lg class and the first small button with the btn-sm class.

You can also use CSS variables to create Bootstrap buttons with custom sizes. The CSS variables are the btn variables used in Bootstrap’s CSS file, bootstrap.min.css.

Code:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
   <title>Bootstrap CSS Buttons - Button Sizing using CSS Variables</title>
 </head>
 <body class="py-4 bg-dark">
   <div class="container">
     <div class="text-white">
       <h1>Bootstrap CSS Buttons</h1>
       <p class="fs-4">Sizing buttons using CSS variables</p>
     </div>
     <div class="mt-5">
       <!-- Row 1 -->
       <div class="mb-5">
         <button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.07rem;">
           Custom button
         </button>
       </div>
       <!-- Row 2 -->
       <div class="mb-5">
         <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .6rem;">
           Delete account
         </button>
         <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .6rem;">
           Clear errors
         </button>
         <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .6rem;">
           Unfollow @handle
         </button>
       </div>
       <!-- Row 3 -->
       <div class="mb-5">
         <button type="button" class="btn btn-outline-info" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.3rem;">
           Forward process
         </button>
         <button type="button" class="btn btn-outline-info" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.3rem;">
           Reset
         </button>
         <button type="button" class="btn btn-outline-info" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.3rem;">
           Undo action
         </button>
       </div>
       <!-- Row 4 -->
       <div class="mb-5">
         <button type="button" class="btn btn-info" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .9rem;">
           More info
         </button>
         <button type="button" class="btn btn-info" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .9rem;">
           View details
         </button>
         <button type="button" class="btn btn-info" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .9rem;">
           Learn more
         </button>
       </div>
       <!-- Row 5 -->
       <div class="mb-5">
         <button type="button" class="btn btn-success" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.5rem;">
           Customize
       </button>
         <button type="button" class="btn btn-success" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.5rem;">
           Create
       </button>
         <button type="button" class="btn btn-success" style="--bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.5rem;">
           Deploy
       </button>
       </div>
     </div>
   </div>


   <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

Browser output:

The image above shows buttons of different sizes defined using CSS variables. It specifies the font size and vertical and horizontal padding.

Disabled Buttons

To create disabled or inactive Bootstrap buttons, you supply them with the attribute disabled. The attribute deactivates the hover and active states of the button. Only the < button > element currently supports it.

To deactivate Bootstrap buttons with the < a > element, specify the class disabled on them. These buttons should not have the href attribute on them.

Sketch deactivates its Sign In button until the user fills the required fields and enables it again once they are filled.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Disabled Buttons</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
      body::before {
        display: block;
        content: '';
        height: 90px;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
      <div id="logo" class="container ms-auto">
        <a class="navbar-brand" href="#">
          <img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar-menu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
            <li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
              <a href="" class="nav-link">Login</a>
              <button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
                Book a Demo
              </button>
              <a class="btn btn-dark" href="#" role="button">Sign Up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Hero section -->
    <section class="d-flex align-items-center" style="height: 88vh; background: #000">
      <div class="container">
        <div class="d-flex ps-5 pt-5 pe-3 pb-5 rounded align-items-center" style="height: 60vh; background: linear-gradient(94.27deg,#4238bb -3.04%,#070333 103.36%);">
          <div class="d-flex flex-column pb-5">
            <h2 class="text-light fs-1">Ready to try LambdaTest AI-Powered Test Analytics?</h2>
            <p class="fs-5" style="color: #ccc;">
              Assess and share all your test analytics from a single dashboard with LambdaTest Analytics!
            </p>
            <div class="d-flex gap-3 align-items-center pt-4">
              <a type="button" class="btn bg-light text-black disabled border-0" href="https://lambdatest.com" target="_blank" disabled>Try for Free ﹥_</a>
              <a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#">Book a Demo</a>
            </div>
          </div>
          <div>
            <div></div>
            <img src="https://www.lambdatest.com/resources/images/try_analytics.svg" alt="" height="310px">
          </div>
        </div>
      </div>
    </section>

    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>