How do we create large button groups in Bootstrap ?
<button class="btn btn-className">Submit</button>
Button Group: Button group is a component provided by Bootstrap 5 which basically enables you to make a group of buttons in a series. All types of buttons classes are also supported by the buttons group.
Types: Following are the 9 types of buttons available in Bootstrap 5:
Let’s now understand how to use the btn-group class to group the series of buttons together on a single line, through the examples.
- Use class btn-group and btn-group-lg inside a div class.
- Inside each div class, add an HTML <button> elements that want to display on the screen with predefined Bootstrap Buttons class name.
Example 1: In order to create a button group, you need to define a btn-group class in the container tag such as <div>.
We also create a buttons group of the same size by including the class btn-group-* along with the .btn-group parent class, instead of including sizing classes in each button.
There are multiple sizes of btn-group classes. Those are as follows:
- btn-group-sm: Used for small button group.
- btn-group-md: Used for medium button group.
- btn-group-lg: Used for large button group.
Example 2: This example demonstrates the use of different button group sizing groups in Bootstrap.
We will follow the below steps to build Bootstrap Large Buttons Group.
Step 1: To use Bootstrap component classes, we need to download the bootstrap package or we can use the Bootstrap CDN link directly, from the official page, inside of the<head> tag, as shown below.
<link href=”https://firstname.lastname@example.org/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
<script src=”https://email@example.com/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>
Step 2: Declare the class as a container with values as .btn-group-lg in the outer <div>.
<div class="btn-group-lg"> <button></button> <button></button> </div>
Step 3: Now, add different predefined button classes to the inner HTML <button> tag. For instance, .btn btn-success will set the styles of the button as bootstrap success class i.e. green button, and like that, you can use different classes also.
<div class="btn-group btn-group-lg"> <!-- Here basic Bootstrap Button Declared --> <button type="button" class="btn btn-success"> Success </button> </div>
We will utilize both the above approaches to create large buttons groups in Bootstrap.
Horizontally arranged large button groups in bootstrap: The .btn-group-lg class along with the parent .btn-group class is used to create horizontally arranged large button groups.
Example 3: In this example, we have created the horizontal series of large buttons group in Bootstrap.
Vertically arranged large button groups in bootstrap: The .btn-group-lg class along with the parent .btn-group-vertical class is used to create horizontally arranged large button groups.
Example 4: In this example, we have created a vertically series of large buttons group in Bootstrap.