Button groups in Bootsrap - Mini Project: Build & Apply

Create a Button Group with Bootstrap

📖 Scenario: You are building a simple web page that needs a group of buttons aligned side by side. This is common in toolbars or forms where users choose one option from a set.

🎯 Goal: Build a horizontal button group using Bootstrap that contains three buttons labeled Left, Middle, and Right.

📋 What You'll Learn

Use Bootstrap 5 classes to create a button group

Include exactly three buttons with the text: Left, Middle, Right

Buttons should be grouped horizontally with no line breaks

Use semantic HTML and accessible button elements

💡 Why This Matters

🌍 Real World

Button groups are common in toolbars, forms, and navigation bars where users select one option from a set of related actions.

💼 Career

Knowing how to use Bootstrap button groups helps you build professional, consistent user interfaces quickly, a valuable skill for front-end web development jobs.

1

Set up the basic HTML structure

Create a basic HTML5 page with lang="en", meta charset="UTF-8", and a title of "Button Group Example". Add a div with the class container inside the body.

Bootsrap

    
    Button Group Example


    
        
    

Need a hint?

Remember to include the lang attribute in the html tag and the meta charset tag inside head.

2

Add Bootstrap CSS link

Inside the head section, add the Bootstrap 5 CSS CDN link: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">.

Bootsrap

    
    Button Group Example
    


    
        
    

Need a hint?

Use the official Bootstrap 5 CSS CDN link inside the head tag.

3

Create the button group container

Inside the div with class container, add a div with the class btn-group and the attribute role="group".

Bootsrap

    
    Button Group Example
    


    
        
    

Need a hint?

The btn-group class groups buttons horizontally. The role="group" helps screen readers understand this is a group of buttons.

4

Add the three buttons inside the group

Inside the div with class btn-group, add three button elements with type button and class btn btn-primary. The buttons should have the text Left, Middle, and Right respectively.

Bootsrap

    
    Button Group Example
    


    
        
            
        
    

Need a hint?

Each button needs the classes btn and btn-primary for Bootstrap styling. Use type="button" for accessibility.