sleek-dashboard

--- layout: default title: "Buttons - Sleek Admin Dashboard Template" parent: "components" sub_parent: "components" activePage: "buttons-default" plugins: [] --- <div class="breadcrumb-wrapper"> <h1>Button Default</h1> {% include breadcrumb.htm %} </div> <ul class="nav nav-tabs nav-style-border mb-5 pl-0" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#rounded" role="tab" aria-controls="rounded" aria-selected="true">Rounded Buttons</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#square" role="tab" aria-controls="square" aria-selected="false">Square Buttons</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#pill" role="tab" aria-controls="pill" aria-selected="false">Pill Buttons</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="rounded" role="tabpanel" aria-labelledby="home-tab"> <div class="row"> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Default Buttons </h2> </div> <div class="card-body"> <p class="mb-5"> Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details.</a></p> <button type="button" class="mb-1 btn btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-success">Success</button> <button type="button" class="mb-1 btn btn-info">Info</button> <button type="button" class="mb-1 btn btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Default Outline Buttons </h2> </div> <div class="card-body"> <p class="mb-5"> For outline button add classes <code>.btn-outline-*</code>. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/#outline-buttons" target="_blank"> more details.</a></p> <button type="button" class="mb-1 btn btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Default Icon Buttons </h2> </div> <div class="card-body"> <p class="mb-5"> For Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn"> </code>. Get classes for material icon <a href="material-icon.html">here</a>. </p> <button type="button" class="mb-1 btn btn-primary"> <i class=" mdi mdi-star-outline mr-1"></i> Primary</button> <button type="button" class="mb-1 btn btn-secondary"> <i class=" mdi mdi-diamond-outline mr-1"></i> Secondary</button> <button type="button" class="mb-1 btn btn-success"> <i class=" mdi mdi-checkbox-marked-outline mr-1"></i> Success</button> <button type="button" class="mb-1 btn btn-info"> <i class=" mdi mdi-information-outline mr-1"></i> Info</button> <button type="button" class="mb-1 btn btn-warning"> <i class=" mdi mdi-alert-outline mr-1"></i> Warning</button> <button type="button" class="mb-1 btn btn-danger"> <i class=" mdi mdi-close-circle-outline mr-1"></i> Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Outline Icon Buttons </h2> </div> <div class="card-body"> <p class="mb-5"> For Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-outline-*"> </code>. Get classes for material icon <a href="material-icon.html">here</a>. </p> <button type="button" class="mb-1 btn btn-outline-primary"> <i class=" mdi mdi-star-outline mr-1"></i> Primary</button> <button type="button" class="mb-1 btn btn-outline-secondary"> <i class=" mdi mdi-diamond-outline mr-1"></i> Secondary</button> <button type="button" class="mb-1 btn btn-outline-success"> <i class=" mdi mdi-checkbox-marked-outline mr-1"></i> Success</button> <button type="button" class="mb-1 btn btn-outline-info"> <i class=" mdi mdi-information-outline mr-1"></i> Info</button> <button type="button" class="mb-1 btn btn-outline-warning"> <i class=" mdi mdi-alert-outline mr-1"></i> Warning</button> <button type="button" class="mb-1 btn btn-outline-danger"> <i class=" mdi mdi-close-circle-outline mr-1"></i> Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Large Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Add <code>.btn-lg</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p> <button type="button" class="mb-1 btn btn-lg btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-lg btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-lg btn-success">Success</button> <button type="button" class="mb-1 btn btn-lg btn-info">Info</button> <button type="button" class="mb-1 btn btn-lg btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-lg btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Large Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Add <code>.btn-lg btn-outline-*</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p> <button type="button" class="mb-1 btn btn-lg btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-lg btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-lg btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-lg btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-lg btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-lg btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Small Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Add <code>.btn-sm</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p> <button type="button" class="mb-1 btn btn-sm btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-sm btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-sm btn-success">Success</button> <button type="button" class="mb-1 btn btn-sm btn-info">Info</button> <button type="button" class="mb-1 btn btn-sm btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-sm btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Small Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Add <code>.btn-sm btn-outline-*</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p> <button type="button" class="mb-1 btn btn-sm btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-sm btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-sm btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-sm btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-sm btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-sm btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Disable Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <button> element. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p> <button type="button" class="mb-1 btn disabled btn-primary">Primary</button> <button type="button" class="mb-1 btn disabled btn-secondary">Secondary</button> <button type="button" class="mb-1 btn disabled btn-success">Success</button> <button type="button" class="mb-1 btn disabled btn-info">Info</button> <button type="button" class="mb-1 btn disabled btn-warning">Warning</button> <button type="button" class="mb-1 btn disabled btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Disable Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <button> element. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details.</a></p> <button type="button" class="mb-1 btn disabled btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn disabled btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn disabled btn-outline-success">Success</button> <button type="button" class="mb-1 btn disabled btn-outline-info">Info</button> <button type="button" class="mb-1 btn disabled btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn disabled btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Active Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details.</a></p> <button type="button" class="mb-1 btn active btn-primary">Primary</button> <button type="button" class="mb-1 btn active btn-secondary">Secondary</button> <button type="button" class="mb-1 btn active btn-success">Success</button> <button type="button" class="mb-1 btn active btn-info">Info</button> <button type="button" class="mb-1 btn active btn-warning">Warning</button> <button type="button" class="mb-1 btn active btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Active Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Active Outline Buttons add class <code> .active </code> to <code> <div class="btn btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn active btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn active btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn active btn-outline-success">Success</button> <button type="button" class="mb-1 btn active btn-outline-info">Info</button> <button type="button" class="mb-1 btn active btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn active btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Block Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Create block level buttons—those that span the full width of a parent—by adding <code> .btn-block </code>. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p> <button type="button" class="mb-1 btn btn-block btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-block btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-block btn-success">Success</button> <button type="button" class="mb-1 btn btn-block btn-info">Info</button> <button type="button" class="mb-1 btn btn-block btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-block btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Block Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5">Create block level outline buttons—those that span the full width of a parent—by adding <code>.btn-block .btn-outline-*</code>. Read Bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank"> more details. </a></p> <button type="button" class="mb-1 btn btn-block btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-block btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-block btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-block btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-block btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-block btn-outline-danger">Danger</button> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="square" role="tabpanel" aria-labelledby="profile-tab"> <div class="row"> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Square Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Square Buttons add class <code> .btn-square </code> to <code> <button class="btn btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-square btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-square btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square btn-success">Success</button> <button type="button" class="mb-1 btn btn-square btn-info">Info</button> <button type="button" class="mb-1 btn btn-square btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-square btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Square Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Square Buttons add class <code> .btn-square </code> to <code> <button class="btn btn-outline-primary"> </code> </p> <button type="button" class="mb-1 btn btn-square btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-square btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-square btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-square btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-square btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Square Icon Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Square Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-square btn-*"> </code>. Get classes for material icon <a href="material-icon.html">here</a>. </p> <button type="button" class="mb-1 btn btn-square btn-primary"> <i class="mdi mdi-star-outline mr-1"></i> Primary</button> <button type="button" class="mb-1 btn btn-square btn-secondary"> <i class="mdi mdi-diamond-outline mr-1"></i> Secondary</button> <button type="button" class="mb-1 btn btn-square btn-success"> <i class="mdi mdi-checkbox-marked-outline mr-1"></i> Success</button> <button type="button" class="mb-1 btn btn-square btn-info"> <i class="mdi mdi-information-outline mr-1"></i> Info</button> <button type="button" class="mb-1 btn btn-square btn-warning"> <i class="mdi mdi-alert-outline mr-1"></i> Warning</button> <button type="button" class="mb-1 btn btn-square btn-danger"> <i class="mdi mdi-close-circle-outline mr-1"></i> Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Outline Square Icon Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Outline Square Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-square btn-outline-*"> </code>. Get classes for material icon <a href="material-icon.html">here</a>. </p> <button type="button" class="mb-1 btn btn-square btn-outline-primary"> <i class="mdi mdi-star-outline mr-1"></i></i> Primary</button> <button type="button" class="mb-1 btn btn-square btn-outline-secondary"> <i class="mdi mdi-diamond-outline mr-1"></i> Secondary</button> <button type="button" class="mb-1 btn btn-square btn-outline-success"> <i class="mdi mdi-checkbox-marked-outline mr-1"></i> Success</button> <button type="button" class="mb-1 btn btn-square btn-outline-info"> <i class="mdi mdi-information-outline mr-1"></i> Info</button> <button type="button" class="mb-1 btn btn-square btn-outline-warning"> <i class="mdi mdi-alert-outline mr-1"></i> Warning</button> <button type="button" class="mb-1 btn btn-square btn-outline-danger"> <i class="mdi mdi-close-circle-outline mr-1"></i> Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Large Square Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Large Square Buttons add class <code> .btn-lg </code> to <code> <button class="btn btn-square btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-square btn-lg btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-success">Success</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-info">Info</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Large Outline Square Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Large Outline Square Buttons add class <code> .btn-lg </code> to <code> <button class="btn btn-square btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-square btn-lg btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-square btn-lg btn-outline-danger">Danger</button> </div> </div> </div>  <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Small Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Small Square Buttons add class <code> .btn-sm </code> to <code> <button class="btn btn-square btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-square btn-sm btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-success">Success</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-info">Info</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Small Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Small Outline Square Buttons add class <code> .btn-sm </code> to <code> <button class="btn btn-square btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-square btn-sm btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-square btn-sm btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Disable Square Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Disable Square Buttons add class <code> .disabled </code> to <code> <button class="btn btn-square btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-square disabled btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-square disabled btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square disabled btn-success">Success</button> <button type="button" class="mb-1 btn btn-square disabled btn-info">Info</button> <button type="button" class="mb-1 btn btn-square disabled btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-square disabled btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Disable Square Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Disable Outline Square Buttons add class <code> .disabled </code> to <code> <button class="btn btn-square btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-square disabled btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-square disabled btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square disabled btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-square disabled btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-square disabled btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-square disabled btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Active Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Active Square Buttons add class <code> .active </code> to <code> <button class="btn btn-square btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-square active btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-square active btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square active btn-success">Success</button> <button type="button" class="mb-1 btn btn-square active btn-info">Info</button> <button type="button" class="mb-1 btn btn-square active btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-square active btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Active Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Active Outline Square Buttons add class <code> .active </code> to <code> <button class="btn btn-square btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-square active btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-square active btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square active btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-square active btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-square active btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-square active btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Square Block Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Square Block Buttons add class <code> .btn-block </code> to <code> <button class="btn btn-square btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-square btn-block btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-square btn-block btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square btn-block btn-success">Success</button> <button type="button" class="mb-1 btn btn-square btn-block btn-info">Info</button> <button type="button" class="mb-1 btn btn-square btn-block btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-square btn-block btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Block Square Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Block Square Outline Buttons add class <code> .btn-block </code> to <code> <button class="btn btn-square btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-square btn-block btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-square btn-block btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-square btn-block btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-square btn-block btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-square btn-block btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-square btn-block btn-outline-danger">Danger</button> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="pill" role="tabpanel" aria-labelledby="contact-tab"> <div class="row"> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Pill Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Pill Buttons add class <code> .btn-pill </code> to <code> <button class="btn btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-success">Success</button> <button type="button" class="mb-1 btn btn-pill btn-info">Info</button> <button type="button" class="mb-1 btn btn-pill btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Pill Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Pill Buttons add class <code> .btn-pill </code> to <code> <button class="btn btn-outline-primary"> </code> </p> <button type="button" class="mb-1 btn btn-pill btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-pill btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-pill btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Pill Icon Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Pill Square Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-pill"> </code>. Get classes for material icon <a href="material-icon.html">here</a>. </p> <button type="button" class="mb-1 btn btn-pill btn-primary"> <i class="mr-1 fa fa-star-o"></i> Primary</button> <button type="button" class="mb-1 btn btn-pill btn-secondary"> <i class="mr-1 fa fa-diamond"></i> Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-success"> <i class="mr-1 fa fa-check-square-o"></i> Success</button> <button type="button" class="mb-1 btn btn-pill btn-info"> <i class="mr-1 fa fa-info-circle"></i> Info</button> <button type="button" class="mb-1 btn btn-pill btn-warning"> <i class="mr-1 fa fa-warning"></i> Warning</button> <button type="button" class="mb-1 btn btn-pill btn-danger"> <i class="mr-1 fa fa-ban"></i> Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Pill Outline Icon Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Pill Square Icon Buttons add <code> <i class="mdi mdi-*"></i> </code> inside <code> <button class="btn btn-pill btn-outline-*"> </code>. Get classes for material icon <a href="material-icon.html">here</a>. </p> <button type="button" class="mb-1 btn btn-pill btn-outline-primary"> <i class="mr-1 fa fa-star-o"></i> Primary</button> <button type="button" class="mb-1 btn btn-pill btn-outline-secondary"> <i class="mr-1 fa fa-diamond"></i> Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-outline-success"> <i class="mr-1 fa fa-check-square-o"></i> Success</button> <button type="button" class="mb-1 btn btn-pill btn-outline-info"> <i class="mr-1 fa fa-info-circle"></i> Info</button> <button type="button" class="mb-1 btn btn-pill btn-outline-warning"> <i class="mr-1 fa fa-warning"></i> Warning</button> <button type="button" class="mb-1 btn btn-pill btn-outline-danger"> <i class="mr-1 fa fa-ban"></i> Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Large Pill Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Large Pill Buttons add class <code> .btn-lg </code> to <code> <button class="btn btn-pill btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill btn-lg btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-success">Success</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-info">Info</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Large Pill Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Large Pill Outline Square Buttons add class <code> .btn-lg </code> to <code> <button class="btn btn-pill btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Small Pill Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Small Pill Buttons add class <code> .btn-sm </code> to <code> <button class="btn btn-pill btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill btn-sm btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-success">Success</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-info">Info</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Small Pill Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Small Pill Outline Buttons add class <code> .btn-sm </code> to <code> <button class="btn btn-pill btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Disable Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Disable Pill Buttons add class <code> .disabled </code> to <code> <button class="btn btn-pill btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill disabled btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill disabled btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill disabled btn-success">Success</button> <button type="button" class="mb-1 btn btn-pill disabled btn-info">Info</button> <button type="button" class="mb-1 btn btn-pill disabled btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill disabled btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Disable Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Disable Outline Pill Buttons add class <code> .disabled </code> to <code> <button class="btn btn-pill btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill disabled btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill disabled btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill disabled btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-pill disabled btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-pill disabled btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill disabled btn-outline-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Active Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Active Pill Buttons add class <code> .active </code> to <code> <button class="btn btn-pill btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill active btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill active btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill active btn-success">Success</button> <button type="button" class="mb-1 btn btn-pill active btn-info">Info</button> <button type="button" class="mb-1 btn btn-pill active btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill active btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Active Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Active Outline Pill Buttons add class <code> .active </code> to <code> <button class="btn btn-pill btn-outline-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill active btn-outline-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill active btn-outline-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill active btn-outline-success">Success</button> <button type="button" class="mb-1 btn btn-pill active btn-outline-info">Info</button> <button type="button" class="mb-1 btn btn-pill active btn-outline-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill active btn-outline-danger">Danger</button> </div> </div> </div>  <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Block Pill Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Block Pill Buttons add class <code> .btn-block </code> to <code> <button class="btn btn-pill btn-*"> </code> </p> <button type="button" class="mb-1 btn btn-pill btn-block btn-primary">Primary</button> <button type="button" class="mb-1 btn btn-pill btn-block btn-secondary">Secondary</button> <button type="button" class="mb-1 btn btn-pill btn-block btn-success">Success</button> <button type="button" class="mb-1 btn btn-pill btn-block btn-info">Info</button> <button type="button" class="mb-1 btn btn-pill btn-block btn-warning">Warning</button> <button type="button" class="mb-1 btn btn-pill btn-block btn-danger">Danger</button> </div> </div> </div> <div class="col-lg-6">  <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Block Pill Outline Buttons</h2> </div> <div class="card-body"> <p class="mb-5"> For Block Pill Outline Buttons add class <code> .btn-block </code> to <code> <button class="btn btn-pillbtn-outline-primary"> </code> </p> <button type="button" class="mb-1 btn btn-pill btn-block btn-outline-primary">Primary</button> <bu