sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
240 lines (234 loc) • 11.5 kB
HTML
---
layout: default
title: "Button-group - Sleek Admin Dashboard Template"
parent: "components"
sub_parent: "components"
activePage: "button-group"
plugins: []
---
<div class="breadcrumb-wrapper">
<h1>Button Group</h1>
{% include breadcrumb.htm %}
</div>
<div class="row">
<div class="col-xl-6 ">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Default Button Group</h2>
</div>
<div class="card-body">
<p class="mb-5"> Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>. Read Bootstrap documentaion <a href="https://getbootstrap.com/docs/4.4/components/button-group/#basic-example"
target="_blank"> More Details.</a></p>
<div class="btn-group" role="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>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Outline Square Button Group</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Outline Square Buttons With Dropdown add class <code> .btn-outline-primary</code></p>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Icon Button Group</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Icon Button Group add <code> <i class="mdi mdi-alert"></i> </code> inside <code> < button class="btn btn-primary"> </code>.Get classes for material icon <a href="material-icon.html">here</a>.
</p>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">
<i class="mdi mdi-alert mr-1"></i> Left</button>
<button type="button" class="btn btn-primary">
<i class="mdi mdi-alert mr-1"></i> Middle</button>
<button type="button" class="btn btn-primary">
<i class="mdi mdi-alert mr-1"></i> Right</button>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Icon Button Group</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Icon Button Group add <code> <i class="mdi mdi-alert"></i> </code> inside <code> < button class="btn btn-outline-primary"> </code>. Get classes for material icon <a href="material-icon.html">here</a>.
</p>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">
<i class="mdi mdi-alert mr-1"></i> Left</button>
<button type="button" class="btn btn-outline-primary">
<i class="mdi mdi-alert mr-1"></i> Middle</button>
<button type="button" class="btn btn-outline-primary">
<i class="mdi mdi-alert mr-1"></i> Right</button>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Button Toolbar pagination</h2>
</div>
<div class="card-body">
<p class="mb-5"> Combine sets of button groups into button toolbars for more complex components. Read Bootstrap
documentaion for <a href="https://getbootstrap.com/docs/4.4/components/button-group/#basic-example" target="_blank"> more
details.</a></p>
<div class="btn-toolbar " role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2 mb-3" role="group" aria-label="First 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 mr-2 mb-3" role="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 mb-3" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Outline Button Toolbar pagination</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Outline Button Toolbar pagination add class <code> .btn-outline-primary</code>.</p>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2 mb-3" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary">1</button>
<button type="button" class="btn btn-outline-primary">2</button>
<button type="button" class="btn btn-outline-primary">3</button>
<button type="button" class="btn btn-outline-primary">4</button>
</div>
<div class="btn-group mr-2 mb-3" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-primary">5</button>
<button type="button" class="btn btn-outline-primary">6</button>
<button type="button" class="btn btn-outline-primary">7</button>
</div>
<div class="btn-group mb-3" role="group" aria-label="Third group">
<button type="button" class="btn btn-outline-primary">8</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Nesting</h2>
</div>
<div class="card-body">
<p class="mb-5"> Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons. Read Bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/button-group/#basic-example" target="_blank"> more
details.</a></p>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Nesting Outline Button </h2>
</div>
<div class="card-body">
<p class="mb-5"> For Outline Button add class <code> .btn-outline-primary</code>.</p>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-outline-primary">1</button>
<button type="button" class="btn btn-outline-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Vertical Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> Make a set of buttons appear vertically. Read Bootstrap documentaion <a href="https://getbootstrap.com/docs/4.4/components/button-group/#vertical-variation" target="_blank"> More Details.</a></p>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Vertical Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For Vertical Outline Buttons add class <code> .btn-outline-primary</code>.</p>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-outline-primary">Button</button>
<button type="button" class="btn btn-outline-primary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-primary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>