Button Group in Bootstrap 5
In an effort to create a sequence of buttons in a single horizontal line or stack in a vertical column, you could create button teams in Bootstrap 5.
For instance, creating button teams for subsequent/earlier, and first/final navigation. Equally, minimize/copy/paste button group and so forth.
All you could do is wrap a sequence of buttons with .btn class in .btn-group class.
See the examples beneath.
As talked about within the above part, you could use:
- .btn sequence of buttons in button group class i.e. btn-group.
- Be certain that the right worth is assigned to the position attribute. For instance, the worth for button group needs to be position = “group”.
See an instance beneath the place we created a button group consisting of three buttons.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
</head>
<physique>
<div class=“container”>
<h3>Bootstrap 5 Button Group</h3> <br>
<div class=“btn-group” position=“group” aria-label=“Primary instance”>
<button kind=“button” class=“btn btn-primary”>First</button>
<button kind=“button” class=“btn btn-success”>Subsequent</button>
<button kind=“button” class=“btn btn-success”>Earlier</button>
<button kind=“button” class=“btn btn-primary”>Final</button>
</div>
</physique>
</html> |
You may additionally assign .btn courses to the <a> tag with a view to create a button group. See an instance beneath:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
</head>
<physique>
<div class=“container”>
<h3>Bootstrap 5 Button Group</h3> <br>
<div class=“btn-group”>
<a href=“https://www.jquery-az.com/” class=“btn btn-primary energetic” aria-current=“web page”>Residence/ Lively hyperlink</a>
<a href=“https://www.jquery-az.com/bootstrap-5/” class=“btn btn-primary”>Bootstrap 5</a>
<a href=“https://www.jquery-az.com/html-tutorials/” class=“btn btn-warning”>HTML</a>
<a href=“https://www.jquery-az.com/css-tutorials/” class=“btn btn-primary”>CSS</a>
<a href=“https://www.jquery-az.com/javascript-tutorials/” class=“btn btn-primary”>JavScript</a>
<a href=“https://www.jquery-az.com/jquery-tips/” class=“btn btn-danger”>jQuery</a>
</div>
</physique>
</html> |
You may additionally create button teams with an define type. For that, you could use outline-style courses for buttons. See an instance beneath:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
</head>
<physique>
<div class=“container”>
<h3>Bootstrap 5 Button Group</h3> <br>
<div class=“btn-group” position=“group” aria-label=“Primary instance”>
<button kind=“button” class=“btn btn-outline-primary”>First</button>
<button kind=“button” class=“btn btn-outline-success”>Subsequent</button>
<button kind=“button” class=“btn btn-outline-success”>Earlier</button>
<button kind=“button” class=“btn btn-outline-primary”>Final</button>
</div>
</physique>
</html> |
The next define courses for buttons can be found:
- btn-outline-primary
- btn-outline-secondary
- btn-outline-success
- btn-outline-danger
- btn-outline-warning
- btn-outline-info
- btn-outline-light
- btn-outline-dark
Be taught extra about Bootstrap 5 buttons
Bootstrap 5 additionally allows you to create checkbox and radio button teams. These are principally toggle button teams.
See an instance beneath:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
</head>
<physique>
<div class=“container”>
<h3>Checkbox Button Group</h3> <br>
<div class=“btn-group” position=“group” aria-label=“Primary checkbox toggle button group”>
<enter kind=“checkbox” class=“btn-check” id=“btncheck1” autocomplete=“off”>
<label class=“btn btn-outline-primary” for=“btncheck1”>Checkbox 1</label>
<enter kind=“checkbox” class=“btn-check” id=“btncheck2” autocomplete=“off”>
<label class=“btn btn-outline-primary” for=“btncheck2”>Checkbox 2</label>
<enter kind=“checkbox” class=“btn-check” id=“btncheck3” autocomplete=“off”>
<label class=“btn btn-outline-primary” for=“btncheck3”>Checkbox 3</label>
</div>
<br><br>
<div class=“btn-group” position=“group” aria-label=“Primary checkbox toggle button group”>
<enter kind=“checkbox” class=“btn-check” id=“btncheck4” autocomplete=“off”>
<label class=“btn btn-outline-danger” for=“btncheck4”>Checkbox 4</label>
<enter kind=“checkbox” class=“btn-check” id=“btncheck5” autocomplete=“off”>
<label class=“btn btn-outline-danger” for=“btncheck5”>Checkbox 5</label>
<enter kind=“checkbox” class=“btn-check” id=“btncheck6” autocomplete=“off”>
<label class=“btn btn-outline-danger” for=“btncheck6”>Checkbox 6</label>
</div>
</div>
</physique>
</html> |
Equally, create radio button teams by utilizing .btn-group. Keep in mind to map the id of <enter> and “for” of the <label>.
Additionally, you could change the identify of the radio group to make a number of radio button teams on a single net web page.
See this instance the place we created two radio button teams.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
</head>
<physique>
<div class=“container”>
<h3>Radio Button Group</h3> <br>
<div class=“btn-group” position=“group” aria-label=“Primary radio toggle button group” >
<enter kind=“radio” class=“btn-check” identify=“btnradio” id=“btnradio1” autocomplete=“off” checked>
<label class=“btn btn-outline-primary” for=“btnradio1”>Radio 1</label>
<enter kind=“radio” class=“btn-check” identify=“btnradio” id=“btnradio2” autocomplete=“off”>
<label class=“btn btn-outline-primary” for=“btnradio2”>Radio 2</label>
<enter kind=“radio” class=“btn-check” identify=“btnradio” id=“btnradio3” autocomplete=“off”>
<label class=“btn btn-outline-primary” for=“btnradio3”>Radio 3</label>
</div>
<br><br><br>
<div class=“btn-group” position=“group” aria-label=“Primary radio toggle button group”>
<enter kind=“radio” class=“btn-check” identify=“btnradio2” id=“btnradio4” autocomplete=“off” checked>
<label class=“btn btn-outline-warning” for=“btnradio4”>Radio 4</label>
<enter kind=“radio” class=“btn-check” identify=“btnradio2” id=“btnradio5” autocomplete=“off”>
<label class=“btn btn-outline-dark” for=“btnradio5”>Radio 5</label>
<enter kind=“radio” class=“btn-check” identify=“btnradio2” id=“btnradio6” autocomplete=“off”>
<label class=“btn btn-outline-success” for=“btnradio6”>Radio 6</label>
</div>
</div>
</physique>
</html> |
Usually, you need to specify the button dimension courses (.btn-lg for giant and .btn-sm for small) for every button individually as utilizing the Bootstrap framework.
Nevertheless, as utilizing button teams, you simply have to assign the dimensions class to .btn-group. Following sizing courses can be found:
- btn-group-lg (massive buttons)
- btn-group-small (small button)
- btn-group (regular dimension)
The instance beneath exhibits utilizing all three dimension buttons. There we used font superior icons in buttons:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
|
<!DOCTYPE html> <html>
<head>
<hyperlink href=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
<!– Font Superior CSS –>
<hyperlink rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” integrity=“sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=“nameless”>
</head>
<physique>
<div class=“container”>
<h3>Massive Button Group</h3> <br>
<div class=“btn-group btn-group-lg” position=“group” aria-label=“Primary instance”>
<button kind=“button” class=“btn btn-labeled btn-danger”>
<span class=“btn-label”><i class=“fa fa-cut”></i></span> Lower</button>
<button kind=“button” class=“btn btn-labeled btn-warning”>
<span class=“btn-label”><i class=“fa fa-copy”></i></span> Copy</button>
<button kind=“button” class=“btn btn-labeled btn-success”>
<span class=“btn-label”><i class=“fa fa-paste”></i></span> Paste</button>
</div>
<br><br>
<h3>Small Button Group</h3> <br>
<div class=“btn-group btn-group-sm” position=“group” aria-label=“Primary instance”>
<button kind=“button” class=“btn btn-labeled btn-danger”>
<span class=“btn-label”><i class=“fa fa-cut”></i></span> Lower</button>
<button kind=“button” class=“btn btn-labeled btn-warning”>
<span class=“btn-label”><i class=“fa fa-copy”></i></span> Copy</button>
<button kind=“button” class=“btn btn-labeled btn-success”>
<span class=“btn-label”><i class=“fa fa-paste”></i></span> Paste</button>
</div>
<br><br>
<h3>Regular Measurement Button Group</h3> <br>
<div class=“btn-group” position=“group” aria-label=“Primary instance”>
<button kind=“button” class=“btn btn-labeled btn-danger”>
<span class=“btn-label”><i class=“fa fa-download”></i></span> Obtain</button>
<button kind=“button” class=“btn btn-labeled btn-warning”>
<span class=“btn-label”><i class=“fa fa-upload”></i></span> Add</button>
<button kind=“button” class=“btn btn-labeled btn-info”>
<span class=“btn-label”><i class=“fa fa-envelope”></i></span> Envelope</button>
</div>
</div>
</physique>
</html> |
Through the use of .btn-group-vertical class, you could create vertically aligned buttons.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
<!– Font Superior CSS –>
<hyperlink rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” integrity=“sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=“nameless”>
</head>
<physique>
<div class=“container”>
<h3>Massive Button Group – Vertical</h3> <br>
<div class=“btn-group-vertical btn-group-lg” position=“group” aria-label=“Primary instance”>
<button kind=“button” class=“btn btn-labeled btn-dark”>
<span class=“btn-label”><i class=“fa fa-cut”></i></span> Lower</button>
<button kind=“button” class=“btn btn-labeled btn-info”>
<span class=“btn-label”><i class=“fa fa-copy”></i></span> Copy</button>
<button kind=“button” class=“btn btn-labeled btn-warning”>
<span class=“btn-label”><i class=“fa fa-paste”></i></span> Paste</button>
</div>
<br><br>
<h3>Small Button Group – Vertical</h3> <br>
<div class=“btn-group-vertical btn-group-sm” position=“group” aria-label=“Primary instance”>
<button kind=“button” class=“btn btn-labeled btn-danger”>
<span class=“btn-label”><i class=“fa fa-image”></i></span> picture</button>
<button kind=“button” class=“btn btn-labeled btn-warning”>
<span class=“btn-label”><i class=“fa fa-star”></i></span> Star</button>
<button kind=“button” class=“btn btn-labeled btn-success”>
<span class=“btn-label”><i class=“fa fa-user”></i></span> Consumer</button>
</div>
<br><br>
<h3>Regular Measurement Button Group – Vertical</h3> <br>
<div class=“btn-group-vertical” position=“group” aria-label=“Primary instance”>
<button kind=“button” class=“btn btn-labeled btn-danger”>
<span class=“btn-label”><i class=“fa fa-download”></i></span> Obtain</button>
<button kind=“button” class=“btn btn-labeled btn-warning”>
<span class=“btn-label”><i class=“fa fa-upload”></i></span> Add</button>
<button kind=“button” class=“btn btn-labeled btn-info”>
<span class=“btn-label”><i class=“fa fa-envelope”></i></span> Envelope</button>
</div>
</div>
</physique>
</html> |
On this approach, you may additionally create checkbox and radio button teams as effectively.
You might use a button group inside one other group. That is named a nested button group. This may be helpful in situations the place you could place a dropdown inside a sequence of buttons.
The next instance exhibits its utilization:
Through the use of .btn-group-vertical class, you could create vertical aligned buttons.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
<script src=“https://cdn.jsdelivr.internet/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>
<!– Font Superior CSS –>
<hyperlink rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” integrity=“sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=“nameless”>
</head>
<physique>
<div class=“container”>
<h3>Nested Dropdown Button Group</h3>
<div class=“btn-group” position=“group” aria-label=“Button group with nested dropdown”>
<button kind=“button” class=“btn btn-info”>Residence</button>
<button kind=“button” class=“btn btn-primary”>JavaScript</button>
<button kind=“button” class=“btn btn-info”>CSS</button>
<button kind=“button” class=“btn btn-primary”>jQuery</button>
<div class=“btn-group” position=“group”>
<button id=“btnGroupDrop1” kind=“button” class=“btn btn-info dropdown-toggle” data-bs-toggle=“dropdown” aria-expanded=“false”>
Bootstrap
</button>
<ul class=“dropdown-menu” aria-labelledby=“btnGroupDrop1”>
<li><a class=“dropdown-item” href=“#”>Bootstrap 3</a></li>
<li><a class=“dropdown-item” href=“#”>Bootstrap 4</a></li>
<li><a class=“dropdown-item” href=“#”>Bootstrap 5</a></li>
</ul>
</div>
</div>
</div>
</physique>
</html> |