{"id":8051,"date":"2023-02-16T15:14:28","date_gmt":"2023-02-16T15:14:28","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=8051"},"modified":"2023-09-30T10:12:32","modified_gmt":"2023-09-30T10:12:32","slug":"button-groups-in-bootstrap-5","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/","title":{"rendered":"How to Create Button Groups in Bootstrap 5"},"content":{"rendered":"<h3><strong>Button Group in Bootstrap 5<\/strong><\/h3>\n<p>In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.<\/p>\n<p>For example, creating button groups for next\/previous, and first\/last navigation. Similarly, cut\/copy\/paste button group and so on.<\/p>\n<p>All you need to do is wrap a series of buttons with <strong>.btn<\/strong> class in <strong>.btn-group<\/strong> class.<\/p>\n<p>See the examples below.<\/p>\n<h3><strong>An example of a simple button group<\/strong><\/h3>\n<p>As mentioned in the above section, you need to use:<\/p>\n<ul>\n<li><strong>.btn<\/strong> series of buttons in button group class i.e. <strong>btn-group<\/strong>.<\/li>\n<li>Ensure that the correct value is assigned to the <strong>role<\/strong> attribute. For example, the value for button group should be <strong>role = \u201cgroup\u201d<\/strong>.<\/li>\n<\/ul>\n<p>See an example below where we created a button group consisting of three buttons.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8052\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-1-Bootstrap5-button-grou.png\" alt=\"Bootstrap5-button-group\" width=\"299\" height=\"83\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n\u00a0&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3&gt;Bootstrap 5 Button Group&lt;\/h3&gt; &lt;br&gt;\r\n\r\n\u00a0&lt;div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\"&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-primary\"&gt;First&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-success\"&gt;Next&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-success\"&gt;Previous&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-primary\"&gt;Last&lt;\/button&gt;\r\n\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>An example of using links as button group<\/strong><\/h3>\n<p>You may also assign <strong>.btn<\/strong> classes to the &lt;a&gt; tag in order to create a button group. See an example below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8053\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-2-Bootstrap5-button-link.png\" alt=\"Bootstrap5-button-link\" width=\"597\" height=\"99\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-2-Bootstrap5-button-link.png 597w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-2-Bootstrap5-button-link-300x50.png 300w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3&gt;Bootstrap 5 Button Group&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group\"&gt;\r\n\r\n\u00a0 &lt;a href=\"https:\/\/www.jquery-az.com\/\" class=\"btn btn-primary active\" aria-current=\"page\"&gt;Home\/ Active link&lt;\/a&gt;\r\n\r\n\u00a0 &lt;a href=\"https:\/\/www.jquery-az.com\/bootstrap-5\/\" class=\"btn btn-primary\"&gt;Bootstrap 5&lt;\/a&gt;\r\n\r\n\u00a0 &lt;a href=\"https:\/\/www.jquery-az.com\/html-tutorials\/\" class=\"btn btn-warning\"&gt;HTML&lt;\/a&gt;\r\n\r\n\u00a0 &lt;a href=\"https:\/\/www.jquery-az.com\/css-tutorials\/\" class=\"btn btn-primary\"&gt;CSS&lt;\/a&gt;\r\n\r\n\u00a0 &lt;a href=\"https:\/\/www.jquery-az.com\/javascript-tutorials\/\" class=\"btn btn-primary\"&gt;JavScript&lt;\/a&gt;\r\n\r\n\u00a0 &lt;a href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\" class=\"btn btn-danger\"&gt;jQuery&lt;\/a&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>Using outlined style buttons in button group example<\/strong><\/h3>\n<p>You may also create button groups with an <strong>outline<\/strong> style. For that, you need to use outline-style classes for buttons. See an example below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8054\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-3-Bootstrap5-button-outl.png\" alt=\"Bootstrap5-button-outl\" width=\"295\" height=\"79\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n\u00a0&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3&gt;Bootstrap 5 Button Group&lt;\/h3&gt; &lt;br&gt;\r\n\r\n\u00a0&lt;div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\"&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-outline-primary\"&gt;First&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-outline-success\"&gt;Next&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-outline-success\"&gt;Previous&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-outline-primary\"&gt;Last&lt;\/button&gt;\r\n\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><strong>The following outline classes for buttons are available:<\/strong><\/p>\n<ul>\n<li>btn-outline-primary<\/li>\n<li>btn-outline-secondary<\/li>\n<li>btn-outline-success<\/li>\n<li>btn-outline-danger<\/li>\n<li>btn-outline-warning<\/li>\n<li>btn-outline-info<\/li>\n<li>btn-outline-light<\/li>\n<li>btn-outline-dark<\/li>\n<\/ul>\n<p>Learn more about <a href=\"https:\/\/www.jquery-az.com\/bootstrap-5-buttons\/\">Bootstrap 5 buttons<\/a><\/p>\n<h3><strong>Using checkboxes button group example<\/strong><\/h3>\n<p>Bootstrap 5 also enables you to create <a href=\"\/bootstrap-5-checkbox\/\">checkbox<\/a> and radio button groups. These are basically toggle button groups.<\/p>\n<p>See an example below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8055\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-4-BS5-group-checbox-btn.png\" alt=\"BS5-group-checbox-btn\" width=\"376\" height=\"140\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-4-BS5-group-checbox-btn.png 376w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-4-BS5-group-checbox-btn-300x112.png 300w\" sizes=\"(max-width: 376px) 100vw, 376px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3&gt;Checkbox Button Group&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group\" role=\"group\" aria-label=\"Basic checkbox toggle button group\"&gt;\r\n\r\n\u00a0 &lt;input type=\"checkbox\" class=\"btn-check\" id=\"btncheck1\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-primary\" for=\"btncheck1\"&gt;Checkbox 1&lt;\/label&gt;\r\n\r\n\u00a0 &lt;input type=\"checkbox\" class=\"btn-check\" id=\"btncheck2\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-primary\" for=\"btncheck2\"&gt;Checkbox 2&lt;\/label&gt;\r\n\r\n\u00a0 &lt;input type=\"checkbox\" class=\"btn-check\" id=\"btncheck3\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-primary\" for=\"btncheck3\"&gt;Checkbox 3&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;div class=\"btn-group\" role=\"group\" aria-label=\"Basic checkbox toggle button group\"&gt;\r\n\r\n\u00a0 &lt;input type=\"checkbox\" class=\"btn-check\" id=\"btncheck4\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-danger\" for=\"btncheck4\"&gt;Checkbox 4&lt;\/label&gt;\r\n\r\n\u00a0 &lt;input type=\"checkbox\" class=\"btn-check\" id=\"btncheck5\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-danger\" for=\"btncheck5\"&gt;Checkbox 5&lt;\/label&gt;\r\n\r\n\u00a0 &lt;input type=\"checkbox\" class=\"btn-check\" id=\"btncheck6\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-danger\" for=\"btncheck6\"&gt;Checkbox 6&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>A radio button group example<\/strong><\/h3>\n<p>Similarly, create radio button groups by using <strong>.btn-group. <\/strong>Remember to map the <strong>id<\/strong> of &lt;input&gt; and &#8220;<strong>for&#8221;<\/strong> of the &lt;label&gt;.<\/p>\n<p>Also, you need to change the name of the radio group to make multiple radio button groups on a single web page.<\/p>\n<p>See this example where we created two radio button groups.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8056\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-5-BS5-group-radio-btn.png\" alt=\"BS5-group-radio-btn\" width=\"308\" height=\"164\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-5-BS5-group-radio-btn.png 308w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-5-BS5-group-radio-btn-300x160.png 300w\" sizes=\"(max-width: 308px) 100vw, 308px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3&gt;Radio Button Group&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group\" role=\"group\" aria-label=\"Basic radio toggle button group\" &gt;\r\n\r\n\u00a0 &lt;input type=\"radio\" class=\"btn-check\" name=\"btnradio\" id=\"btnradio1\" autocomplete=\"off\" checked&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-primary\" for=\"btnradio1\"&gt;Radio 1&lt;\/label&gt;\r\n\r\n\u00a0 &lt;input type=\"radio\" class=\"btn-check\" name=\"btnradio\" id=\"btnradio2\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-primary\" for=\"btnradio2\"&gt;Radio 2&lt;\/label&gt;\r\n\r\n\u00a0 &lt;input type=\"radio\" class=\"btn-check\" name=\"btnradio\" id=\"btnradio3\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-primary\" for=\"btnradio3\"&gt;Radio 3&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;div class=\"btn-group\" role=\"group\" aria-label=\"Basic radio toggle button group\"&gt;\r\n\r\n\u00a0 &lt;input type=\"radio\" class=\"btn-check\" name=\"btnradio2\" id=\"btnradio4\" autocomplete=\"off\" checked&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-warning\" for=\"btnradio4\"&gt;Radio 4&lt;\/label&gt;\r\n\r\n\u00a0 &lt;input type=\"radio\" class=\"btn-check\" name=\"btnradio2\" id=\"btnradio5\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-dark\" for=\"btnradio5\"&gt;Radio 5&lt;\/label&gt;\r\n\r\n\u00a0 &lt;input type=\"radio\" class=\"btn-check\" name=\"btnradio2\" id=\"btnradio6\" autocomplete=\"off\"&gt;\r\n\r\n\u00a0 &lt;label class=\"btn btn-outline-success\" for=\"btnradio6\"&gt;Radio 6&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>Creating large and small size button groups example<\/strong><\/h3>\n<p>Normally, you have to specify the button size classes (.btn-lg for large and .btn-sm for small) for each button separately as using the Bootstrap framework.<\/p>\n<p>However, as using button groups, you just need to assign the size class to .btn-group. Following sizing classes are available:<\/p>\n<ul>\n<li>btn-group-lg (large buttons)<\/li>\n<li>btn-group-small (small button)<\/li>\n<li>btn-group (normal size)<\/li>\n<\/ul>\n<p>The example below shows using all three size buttons. There we used <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"nofollow\">font awesome icons<\/a> in buttons:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8057\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-6-BS5-group-sizes.png\" alt=\"BS5-group-sizes\" width=\"369\" height=\"417\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-6-BS5-group-sizes.png 369w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-6-BS5-group-sizes-265x300.png 265w\" sizes=\"(max-width: 369px) 100vw, 369px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;!-- Font Awesome CSS --&gt;\r\n\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" integrity=\"sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n\u00a0&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3&gt;Large Button Group&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group btn-group-lg\" role=\"group\" aria-label=\"Basic example\"&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-danger\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-cut\"&gt;&lt;\/i&gt;&lt;\/span&gt; Cut&lt;\/button&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-warning\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-copy\"&gt;&lt;\/i&gt;&lt;\/span&gt; Copy&lt;\/button&gt;\r\n\r\n\u00a0&lt;button type=\"button\" class=\"btn btn-labeled btn-success\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-paste\"&gt;&lt;\/i&gt;&lt;\/span&gt; Paste&lt;\/button&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;h3&gt;Small Button Group&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group btn-group-sm\" role=\"group\" aria-label=\"Basic example\"&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-danger\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-cut\"&gt;&lt;\/i&gt;&lt;\/span&gt; Cut&lt;\/button&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-warning\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-copy\"&gt;&lt;\/i&gt;&lt;\/span&gt; Copy&lt;\/button&gt;\r\n\r\n\u00a0&lt;button type=\"button\" class=\"btn btn-labeled btn-success\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-paste\"&gt;&lt;\/i&gt;&lt;\/span&gt; Paste&lt;\/button&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;h3&gt;Normal Size Button Group&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\"&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-danger\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-download\"&gt;&lt;\/i&gt;&lt;\/span&gt; Download&lt;\/button&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-warning\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-upload\"&gt;&lt;\/i&gt;&lt;\/span&gt; Upload&lt;\/button&gt;\r\n\r\n\u00a0&lt;button type=\"button\" class=\"btn btn-labeled btn-info\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-envelope\"&gt;&lt;\/i&gt;&lt;\/span&gt; Envelope&lt;\/button&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>An example of vertically aligned button group<\/strong><\/h3>\n<p>By using <strong><em>.btn-group-vertical<\/em><\/strong> class, you may create vertically aligned buttons.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8058\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-7-BS5-group-vertical-btn.png\" alt=\"BS5-group-vertical-btn\" width=\"491\" height=\"626\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-7-BS5-group-vertical-btn.png 491w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-7-BS5-group-vertical-btn-235x300.png 235w\" sizes=\"(max-width: 491px) 100vw, 491px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;!-- Font Awesome CSS --&gt;\r\n\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" integrity=\"sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n\u00a0&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3&gt;Large Button Group - Vertical&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group-vertical btn-group-lg\" role=\"group\" aria-label=\"Basic example\"&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-dark\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-cut\"&gt;&lt;\/i&gt;&lt;\/span&gt; Cut&lt;\/button&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-info\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-copy\"&gt;&lt;\/i&gt;&lt;\/span&gt; Copy&lt;\/button&gt;\r\n\r\n\u00a0&lt;button type=\"button\" class=\"btn btn-labeled btn-warning\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-paste\"&gt;&lt;\/i&gt;&lt;\/span&gt; Paste&lt;\/button&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;h3&gt;Small Button Group - Vertical&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group-vertical btn-group-sm\" role=\"group\" aria-label=\"Basic example\"&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-danger\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-image\"&gt;&lt;\/i&gt;&lt;\/span&gt; image&lt;\/button&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-warning\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-star\"&gt;&lt;\/i&gt;&lt;\/span&gt; Star&lt;\/button&gt;\r\n\r\n\u00a0&lt;button type=\"button\" class=\"btn btn-labeled btn-success\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-user\"&gt;&lt;\/i&gt;&lt;\/span&gt; User&lt;\/button&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;h3&gt;Normal Size Button Group - Vertical&lt;\/h3&gt; &lt;br&gt;\r\n\r\n&lt;div class=\"btn-group-vertical\" role=\"group\" aria-label=\"Basic example\"&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-danger\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0&lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-download\"&gt;&lt;\/i&gt;&lt;\/span&gt; Download&lt;\/button&gt;\r\n\r\n&lt;button type=\"button\" class=\"btn btn-labeled btn-warning\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-upload\"&gt;&lt;\/i&gt;&lt;\/span&gt; Upload&lt;\/button&gt;\r\n\r\n\u00a0&lt;button type=\"button\" class=\"btn btn-labeled btn-info\"&gt;\r\n\r\n\u00a0 &lt;span class=\"btn-label\"&gt;&lt;i class=\"fa fa-envelope\"&gt;&lt;\/i&gt;&lt;\/span&gt; Envelope&lt;\/button&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p>In this way, you may also create checkbox and radio button groups as well.<\/p>\n<h3><strong>Using nested button group example<\/strong><\/h3>\n<p>You may use a button group within another group. That is called a nested button group. This can be useful in scenarios where you need to place a dropdown within a series of buttons.<\/p>\n<p>The following example shows its usage:<\/p>\n<p>By using <strong><em>.btn-group-vertical<\/em><\/strong> class, you may create vertical aligned buttons.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-8059\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-8-BS5-group-nested.png\" alt=\"BS5-group-nested\" width=\"481\" height=\"197\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-8-BS5-group-nested.png 481w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-8-BS5-group-nested-300x123.png 300w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n\r\n&lt;!-- Font Awesome CSS --&gt;\r\n\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" integrity=\"sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n\u00a0&lt;div class=\"container\"&gt;\r\n\r\n&lt;h3&gt;Nested Dropdown Button Group&lt;\/h3&gt; \u00a0\r\n\r\n\u00a0&lt;div class=\"btn-group\" role=\"group\" aria-label=\"Button group with nested dropdown\"&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-info\"&gt;Home&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-primary\"&gt;JavaScript&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-info\"&gt;CSS&lt;\/button&gt;\r\n\r\n\u00a0 &lt;button type=\"button\" class=\"btn btn-primary\"&gt;jQuery&lt;\/button&gt;\r\n\r\n\r\n\r\n\r\n\u00a0 &lt;div class=\"btn-group\" role=\"group\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;button id=\"btnGroupDrop1\" type=\"button\" class=\"btn btn-info dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 Bootstrap\r\n\r\n\u00a0 \u00a0 &lt;\/button&gt;\r\n\r\n\u00a0 \u00a0 &lt;ul class=\"dropdown-menu\" aria-labelledby=\"btnGroupDrop1\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Bootstrap 3&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Bootstrap 4&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Bootstrap 5&lt;\/a&gt;&lt;\/li&gt;\r\n\r\n\u00a0 \u00a0 &lt;\/ul&gt;\r\n\r\n\u00a0 &lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.<\/p>\n","protected":false},"author":1,"featured_media":8057,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[136],"tags":[37],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Button Groups in Bootstrap 5 [basic, outlined, checkboxes, radio and more]<\/title>\n<meta name=\"description\" content=\"In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Button Groups in Bootstrap 5 [basic, outlined, checkboxes, radio and more]\" \/>\n<meta property=\"og:description\" content=\"In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-16T15:14:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-30T10:12:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-6-BS5-group-sizes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"369\" \/>\n\t<meta property=\"og:image:height\" content=\"417\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/\",\"url\":\"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/\",\"name\":\"How to Create Button Groups in Bootstrap 5 [basic, outlined, checkboxes, radio and more]\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2023-02-16T15:14:28+00:00\",\"dateModified\":\"2023-09-30T10:12:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Button Groups in Bootstrap 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Button Groups in Bootstrap 5 [basic, outlined, checkboxes, radio and more]","description":"In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Button Groups in Bootstrap 5 [basic, outlined, checkboxes, radio and more]","og_description":"In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.","og_url":"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/","article_published_time":"2023-02-16T15:14:28+00:00","article_modified_time":"2023-09-30T10:12:32+00:00","og_image":[{"width":369,"height":417,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/01\/18-6-BS5-group-sizes.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/","url":"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/","name":"How to Create Button Groups in Bootstrap 5 [basic, outlined, checkboxes, radio and more]","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2023-02-16T15:14:28+00:00","dateModified":"2023-09-30T10:12:32+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/button-groups-in-bootstrap-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"How to Create Button Groups in Bootstrap 5"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/8051"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=8051"}],"version-history":[{"count":14,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/8051\/revisions"}],"predecessor-version":[{"id":10004,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/8051\/revisions\/10004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/8057"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=8051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=8051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=8051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}