logologo-dark
logologo-dark

Buttons Group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Basic Example

Combine sets of button to wrap a series of buttons with .btn in .btn-group.

Default Buttons
Dim Buttons
Outlined Buttons
Dim & Outlined Buttons
Code Example
<div class="btn-group" aria-label="Basic example">  <button type="button" class="btn btn-primary">Left</button>  <button type="button" class="btn btn-primary">Middle</button>  <button type="button" class="btn btn-primary">Right</button></div>
Button Toolbar

Combine sets of button groups into button toolbars for more complex components.

@
@
Code Example
<div class="btn-toolbar">  <div class="btn-group">    <button type="button" class="btn btn-primary">1</button>    <button type="button" class="btn btn-primary">2</button>    <button type="button" class="btn btn-primary">3</button>    <button type="button" class="btn btn-primary">4</button>  </div>  <div class="btn-group" aria-label="Second group">    <button type="button" class="btn btn-primary">5</button>    <button type="button" class="btn btn-primary">6</button>    <button type="button" class="btn btn-primary">7</button>  </div>  <div class="btn-group" aria-label="Third group">    <button type="button" class="btn btn-primary">8</button>  </div></div>
Code Example
<div class="btn-toolbar mb-3">  <div class="btn-group">    <button type="button" class="btn btn-primary">1</button>    <button type="button" class="btn btn-primary">2</button>    <button type="button" class="btn btn-primary">3</button>    <button type="button" class="btn btn-primary">4</button>  </div>  <div class="input-group">    <div class="input-group-prepend">      <div class="input-group-text" id="btnGroupAddon">@</div>    </div>    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">  </div></div><div class="btn-toolbar justify-content-between">  <div class="btn-group">    <button type="button" class="btn btn-primary">1</button>    <button type="button" class="btn btn-primary">2</button>    <button type="button" class="btn btn-primary">3</button>    <button type="button" class="btn btn-primary">4</button>  </div>  <div class="input-group">    <div class="input-group-prepend">      <div class="input-group-text" id="btnGroupAddon2">@</div>    </div>    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">  </div></div>
Button Sizing

Just add .btn-group-{sm|lg} to each .btn-group class to control applying button sizing globaly.

Code Example
<div class="btn-group btn-group-lg">...</div><div class="btn-group">...</div><div class="btn-group btn-group-sm">...</div>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Softy
Header Style
White
Light
Dark
Theme
Header Option
Regular
Fixed
Primary Skin
Default
Blue
Blue Light
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?