Bootstrap 5 Button group Mixed styles
Bootstrap 5 Button group is a component that helps to combine the buttons in a series in a single line. In button group mixed styles, we can create a button group with different background colors.
Button group Mixed styles used Classes:
- .btn-group: This class is used to group a series of buttons together on a single line.
- .btn: This class is used to create a button.
- .btn-{color_utility}: This class is used to set the color of the button.
Syntax:
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-*"> Content </button> ... </div>
Note: * can be substituted with color utility classes.
Example 1: In this example, we will create 3 buttons with mixed styles.
HTML
<!DOCTYPE html> < html > < head > < title > Bootstrap 5 Button group Mixed styles </ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div class = "container" > < h1 class = "text-success" > w3wiki </ h1 > < h3 >Button group Mixed styles</ h3 > < div class = "btn-group" role = "group" > < button type = "button" class = "btn btn-danger" > Java </ button > < button type = "button" class = "btn btn-info" > C++ </ button > < button type = "button" class = "btn btn-success" > Python </ button > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will see mixed styled outlined buttons.
HTML
<!DOCTYPE html> < html > < head > < title > Bootstrap 5 Button group Mixed styles </ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body class = "container" > < div > < h1 class = "success" > w3wiki </ h1 > < h3 >Button group Mixed styles</ h3 > < div class = "btn-group" role = "group" > < button type = "button" class = "btn btn-outline-primary" > Java </ button > < button type = "button" class = "btn btn-outline-success" > C++ </ button > < button type = "button" class = "btn btn-outline-danger" > Python </ button > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/button-group/#mixed-styles
Contact Us