@extends('layouts.default') @section('title', 'Buttons') @section('content')
  1. Home
  2. UI Elements
  3. Buttons

Buttons header small text goes here...

Buttons

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-grey">Grey</button>
<button type="button" class="btn btn-purple">Purple</button>
<button type="button" class="btn btn-indigo">Indigo</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-yellow">Yellow</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-pink">Pink</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-lime">Lime</button>
<button type="button" class="btn btn-inverse">Inverse</button>
<button type="button" class="btn btn-link">Link</button>

Button Dropdowns

Dropdown
Dropup 
<div class="btn-group">
  <a href="#" class="btn btn-default">Dropdown</a>
  <a href="#" class="btn btn-default dropdown-toggle"
    data-toggle="dropdown"></a>
  <ul class="dropdown-menu pull-right">
    <li><a href="#">Action 1</a></li>
    <li><a href="#">Action 2</a></li>
    <li><a href="#">Action 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Action 4</a></li>
  </ul>
</div>

Button Sizes

Large Button Default Button Small Button Extra Small 
<a href="#" class="btn btn-primary btn-lg">Large Button</a>
<a href="#" class="btn btn-primary">Default Button</a>
<a href="#" class="btn btn-primary btn-sm">Small Button</a>
<a href="#" class="btn btn-primary btn-xs">Extra Small</a>

Button State

Disabled Button Active Button
Block Button 

<a href="#" class="btn btn-default disabled">Disabled Button</a>
<a href="#" class="btn btn-default active">Active Button</a>
<a href="#" class="btn btn-primary btn-block">Block Button</a>

Button with Icon

Twitter Bootstrap
Version 3.0

Comment Setting

Button block with icon 

<a href="#" class="btn btn-lg btn-primary">
  <i class="fab fa-twitter fa-2x pull-left m-r-10 text-black"></i>
  <b>Twitter Bootstrap</b><br />
  <small>Version 3.0</small>
</a>

Button Group Vertical & Justified

<div class="btn-group">
  <button class="btn btn-white">Left</button>
  <button class="btn btn-white active">Middle</button>
  <button class="btn btn-white">Right</button>
</div>

Button Toolbars

Left Middle Right 
<div class="btn-group">
  <button class="btn btn-purple">Button</button>
  <button class="btn btn-purple active">Button</button>
  <button class="btn btn-purple">Button</button>
</div>

<div class="btn-group btn-group-justified">
  <a class="btn btn-default">Left</a>
  <a class="btn btn-default active">Middle</a>
  <a class="btn btn-default">Right</a>
</div>

Button Icon & Sizes

<a href="#" class="btn btn-default btn-icon btn-circle btn-lg">
  <i class="fa fa-expand"></i>
</a>
<a href="#" class="btn btn-default btn-icon btn-circle">
  <i class="fa fa-expand"></i>
</a>
<a href="#" class="btn btn-default btn-icon btn-circle btn-sm">
  <i class="fa fa-expand"></i>
</a>
<a href="#" class="btn btn-default btn-icon btn-circle btn-xs">
  <i class="fa fa-expand"></i>
</a>
@endsection @push('scripts') @endpush