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

In the dynamic world of web development, where every click, tap, and interaction matters, one cannot emphasize the prominence of UI components enough. Of these UI components, buttons and badges are some of the unsung heroes of user experience.

From guiding visitors through websites with a silent persuasiveness that ensures smooth interaction and navigation, buttons, and badges also bridge the gap between functionality and aesthetics.

By strategically placing buttons and badges in well-thought-out locations, web designers wield the power to enhance usability, boost conversions, and give users a sense of control as they traverse the digital landscape.

Unsurprisingly, websites such as YouTube, Amazon, Samsung, and X (formerly Twitter) utilize these UI components for displaying status indicators, facilitating navigation, and serving as Call-To-Action (CTA) elements.

Source

Amazon uses a badge to indicate to customers the products with the highest sales in different categories. In the image above, the badge Best Seller indicates Apple Pencil and Apple 2020 Macbook Air Laptop M1 as the best sellers in the Styluses and Computer and Accessories categories. The badge helps customers to decisively and quickly make better purchases.

Netflix uses a button to collect emails for new membership accounts, as the image below shows. The button acts as a Call-To-Action (CTA), guiding users and eliminating confusion and hesitation by providing a straightforward way to proceed.

Source

And for Netflix, the prominent button minimizes user drop-offs during the subscription. This streamlining enhances user experience and leads to higher conversion rates.

In the Bootstrap tutorial Part I, we saw Bootstrap dropdowns and collapse. Building upon the knowledge gained from the first tutorial, let’s dive deeper into this versatile front-end toolkit.

This Bootstrap tutorial Part II will explore how Bootstrap buttons and Bootstrap badges work, their advanced features, and how to test their responsiveness on different devices. Bootstrap is a free and open-source front-end toolkit with a set of reusable pre-built styles, classes, and components.

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.

From:
– Enhancing usability, boosting conversions, & aiding smooth interaction & navigation

To:
– Guiding site visitors as they traverse its digital landscape

Buttons & badges are some of the most prominent UI components on a site

A thread on Bootstrap buttons & badges ↓ pic.twitter.com/DkNW7DqdSr

— Mbaziira Ronald (@MbaziiraRonn) September 22, 2023

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.

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 LambdaTest 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 LambdaTest. 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 LambdaTest 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 LambdaTest 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.

LambdaTest Write for us

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.

Source

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.

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

LambdaTest Homepage

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.

LambdaTest Login page

The example above shows the LOGIN button on LambdaTest’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.

LambdaTest Homepage

The above example shows how LambdaTest 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.

Source

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.

Source

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

LambdaTest Learning Hub

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:

Variants	Grouping	Size
btn-primary	btn-group	btn-lg
btn-success	btn-toolbar	btn-sm
btn-warning

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

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:

Browser output:

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

See the Pen
Bootstrap CSS buttons – the btn class by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Button Variants

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

Button Variant	Description
btn-primary	Indicates primary actions such as Sign Up and Submit on a website. It has a background of #0d6efd.
btn-secondary	Indicates secondary actions on a website. It has a background of #6c757d.
btn-success	Indicates positive or successful actions on a website such as Save and Complete. It has a background of #198754.
btn-warning	It indicates cautionary messages or actions to the user on a website. It has a background of #ffc107.
btn-danger	It indicates irreversible actions. It has a background of #dc3545.
btn-info	It usually indicates messages that provide additional information. It has a background of #0dcaf0.

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.

Source

Code:

Browser output:

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

See the Pen
Bootstrap CSS Buttons – Button variants by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Button tags
You 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:

Browser output:

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

See the Pen
Bootstrap CSS Buttons – Button tags by Mbaziira Ronald (@mbaziraofug)
on CodePen.

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:

1. btn-outline-primary
2. btn-outline-secondary
3. btn-outline-success
4. btn-outline-danger
5. 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.

LambdaTest Mobile App Testing

LambdaTest 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:

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.

See the Pen
Bootstrap CSS Buttons – Outline buttons by Mbaziira Ronald (@mbaziraofug)
on CodePen.

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.

Source

Code:

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.

See the Pen
Bootstrap CSS Buttons – Button sizes by Mbaziira Ronald (@mbaziraofug)
on CodePen.

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:

Browser output:

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

See the Pen
Bootstrap CSS Buttons – Sizing buttons using CSS variables by Mbaziira Ronald (@mbaziraofug)
on CodePen.

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:

Browser output:

We have inactivated the Try for Free CTA using the disabled attribute in the above browser output.

See the Pen
Bootstrap CSS Buttons – Disabled buttons by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Block Buttons

Buttons are inline elements by nature, meaning they do not start on a new line, and the content in them defines their width. We can, however, create block buttons in Bootstrap using the grid system and CSS Flexbox.

LambdaTest uses block buttons on small screen devices like mobile phones to increase the click surface area and improve the visual appearance by making the buttons stand out.

Similarly, Gumaroad uses the same style as shown in the image below.

Code:

Browser output:

The above browser output shows block buttons that take up their full width in the login form developed using Bootstrap’s grid system and Flexbox.

See the Pen
Bootstrap CSS Buttons – Block buttons by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Button Groups

You can group a series or sequence of buttons with the btn class on a single line by wrapping them in a container with the btn-group class. These buttons will form what is called a button group and will look visually attached.

You can use button groups for the following scenarios:

• Toggle buttons
• Pagination
• Rating and Feedback
• Toolbar actions

Code:

Browser output:

The above example shows how you can form button groups for the < button > and < a > elements.

See the Pen
Bootstrap CSS Buttons – Button groups by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Button Toolbar

In the previous section of this tutorial, you saw that we could group a series of buttons to form button groups. Similarly, we can group sets or bundles of button groups to create button toolbars.

The commonest use cases for toolbars include:

• Pagination
• Displaying social media sharing icons
• Dashboard widgets
• Responsive web layouts

Code:

Browser output:

In the above image, we have grouped sets of button groups into toolbars to create pagination components.

See the Pen
Bootstrap CSS Buttons – Button toolbar by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Button Groups Sizing

Bootstrap CSS provides two classes for sizing button groups instead of taking the tedious path of sizing each button in the button group. The classes are btn-group-lg and btn-group-sm.

The example below illustrates creating larger or smaller button groups using these classes.

Code:

Browser output:

The browser output shows the large button group created using the btn-group-lg class, the regular button group with only the btn-group class, and the small button group with the btn-group-sm.

See the Pen
Bootstrap CSS Buttons – Button groups sizing by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Nesting Button Groups

Bootstrap CSS allows the nesting of button groups, where you can even include dropdowns. Below are scenarios in which you can nest button groups:

• Tabbed interfaces
• Dropdown menus
• Admin panels

Code:

Browser output:

See the Pen
Bootstrap CSS Buttons – Nesting button groups by Mbaziira Ronald (@mbaziraofug)
on CodePen.

What are Bootstrap Badges

Bootstrap badges are visual indicators that display information, status, or context on the progress or development of an activity or application. Bootstrap badges have several uses, such as notifications and labels.

The example below shows how Samsung uses the NEW badge to indicate the latest products in the New Featured menu dropdown section.

The example below shows how YouTube uses a LIVE badge to indicate the channels airing live at that time.

To create a Bootstrap badge, you can use the class badge, followed by a contextual background color to convey its meaning well. Badge sizes match their immediate parent’s size using relative font sizing and em units.

Creating a Bootstrap Badge

One of the primary ways of making Bootstrap badges is using HTML headings, which are hierarchical with varying font sizes.

Let’s see how you can create Bootstrap badges based on headings as their parents.

Code:

Browser output:

In the browser output above, we can see that the size of each badge is based on the font size of its parent, in this case, the headings.

See the Pen
Bootstrap CSS Badges – Badges based on headings by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Pill Badges

Pill badges resemble pills due to their shape, hence the name pill badges. You can create pill badges by adding the class rounded-pill to any badge.

GitHub uses pill badges as tags to indicate which repositories are public and private.

Etsy uses pill badges as indicators of products with free shipping in its store. Bootstrap pill badges are a specific type of badge used in web development to provide visual cues and notifications.

Code:

Browser output:

See the Pen
Bootstrap CSS Badges – Pill badges by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Positioning Badges

In several real-world applications, badges are usually in the corners of their parent containers. There are multiple reasons for this, including:

• Visibility: Placing badges in the corners makes them highly visible and quickly noticeable to users. Corners draw the eye’s attention, ensuring users are likelier to use the badge.
• Minimal intrusion: Putting badges in the corners of their containers is less likely to interfere with the container’s content. If placed in the center, on the other hand, they could block vital content or visuals if placed in the center.
• Consistency: Corner placement is a common design pattern, making it familiar and consistent for users across websites and mobile applications. Thus, users easily recognize the importance of a badge in the corner.

The example below shows how LambdaTest Customer Support uses the badge in the corner of the chat icon to start or respond to an ongoing conversation and also easily notify the user of new messages due to its noticeability.

Code:

Browser output:

In the above browser output, all the Bootstrap badges are positioned in the corners of their parents’ buttons using Bootstrap’s position utility.

The Bootstrap buttons are given a position relative, and the badges are absolute. The badges are then pushed 100px from the left to the right and 0px from the top, thus forcing them into the upper right corner of the buttons.

See the Pen
Bootstrap CSS Badges – Positioning badges by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Advanced Feature: Bootstrap Button Toolbars

In this section, we will look at Button toolbars, one of the advanced features you can create with Bootstrap buttons.

Button toolbars, as seen earlier, are groups of sets of button groups. Button toolbars enable you to group and present related elements or actions together. For this example, we will create a page with a button toolbar consisting of LambdaTest’s Webinars.

Code:

Browser output:

See the Pen
Bootstrap toolbars for pagination by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Debugging Common Issues With Bootstrap Buttons and Badges

Browsers and devices have made significant strides in improving their compatibility with CSS properties and standards. However, despite these advancements, there are still some irregular discrepancies due to the evolving nature of CSS and the diversity of browsers and devices.

We will look at some common issues and how you can fix them.

• Accessibility: Creating accessible buttons is a paramount concern in web development to ensure that all users, regardless of their abilities, can engage seamlessly with digital content.

You can make your website’s buttons accessible first by using semantic HTML, and WAI-ARIA attributes like role. Additionally, you can carry out accessibility testing to ensure that your site is accessible across different operating systems and browsers.

The code below demonstrates how to use the ARIA role to indicate a link functioning as a button.

<a class="btn btn-primary disabled" role="button" href="#">Read more on Accessibility testing</a>

1	<a class="btn btn-primary disabled" role="button" href="#">Read more on Accessibility testing</a>

• Responsive issues: Buttons can become difficult to interact with as their sizes change whenever you access a website across different devices of various viewports. When buttons are too small, clicking them becomes troublesome, and when they are unnecessarily large, they can affect the responsiveness of the surrounding UI features.

Ensuring the responsiveness of your website is vital. It becomes even more critical when it comes to buttons and badges due to the crucial role they play. On smaller screens like mobile phones, non-responsive buttons could lead to missed clicks, misclicks, or an inability to interact with essential CTAs such as making purchases or submitting a form.

To counter this, you can carry out responsive testing using tools like LT Browser on 50+ screen resolutions to know the behavior of the buttons on different devices viewports. Also, you can use the Bootstrap classes btn-lg and btn-sm to increase or decrease the size of the buttons.

You can ensure the responsiveness of your website by carrying out responsive testing. It helps you know how your buttons, badges, and website behave on different devices and browsers.

We’ll evaluate the responsiveness of the button toolbar of LambdaTest’s webinar page on LT Browser, which we’ve designed on CodePen. We will test it on mobile, tablet, and desktop viewports.

Mobile Preview:



Tablet Preview:



Desktop Preview:



• Browser compatibility: As users utilize different devices, such as desktop and mobile devices, to access websites, ensuring the compatibility of your website features across these browsers and devices becomes of the utmost importance.

You can ensure browser compatibility by carrying out browser testing both manually and automatically using cloud-based testing platforms like LambdaTest.

LambdaTest is an AI-powered test orchestration and execution platform that lets you perform manual and automated tests at scale on over 3000+ real browsers, devices, and platforms. It will help you know which Bootstrap features are suitable for your users’ browsers so that you can quickly respond accordingly.

You can test browser compatibility of your Bootstrap features (in this case, Bootstrap buttons and Bootstrap badges) on the latest and legacy web browsers like Chrome, Firefox, and Edge. You can even test on Safari on the latest macOS Sonoma.

Conclusion

We have journeyed through the various aspects of Bootstrap buttons and badges. We have explored their multiple uses and responsive design capabilities and their integral part in web development.

However, the journey doesn’t end here. The innovation potential is limitless. Thus, I urge you to explore new possibilities continuously.

Thank you for taking the time to read this Bootstrap tutorial II and reaching this far. See you in the next one!