Button components

In ZedAdmin, we created all the useful button classes you have already been familiar with in bootstrap!

Default & simple examples
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering). 
 <button class="btn">Default</button>
<button class="btn btn-primary">Primary | Theme</button>
<button class="btn btn-success">Success | Green</button>
<button class="btn btn-secondary">Secondary | Gray</button>
<button class="btn btn-danger">Danger | Red</button>
<button class="btn btn-warning">Warning | Yellow</button>
<button class="btn btn-info">Info | Blue</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button. 
  <button class="btn btn-outline-primary">Primary | Theme</button>
<button class="btn btn-outline-success">Success | Green</button>
<button class="btn btn-outline-danger">Danger | Red</button>
<button class="btn btn-outline-warning">Warning | Yellow</button>
<button class="btn btn-outline-info">Info | Blue</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-secondary">Secondary | Gray</button>
<button class="btn btn-outline-dark">Dark</button>
Button sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes. 
 <button class="btn btn-primary btn-sm">Small button</button>
<button class="btn btn-primary">Normal button</button>
<button class="btn btn-primary btn-lg">Large button</button>
Disabled state
Make buttons look inactive by adding the disabled boolean attribute to any 
 <button class="btn btn-red" disabled>Disabled</button>
<button class="btn btn-green" disabled>Disabled</button>

Button group

Group a series of buttons together on a single line with the button group!

Basic example
Wrap a series of buttons with .btn in .btn-group. 
 <div class="btn-group">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>
Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. 
 <div class="btn-toolbar">
    <div class="btn-group mr-1">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
    </div>
    <div class="btn-group mr-1">
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary">8</button>
    </div>
</div>
<!--  -->
<div class="btn-toolbar">
    <div class="btn-group mr-2">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
    </div>

    <input type="text" class="form-control" placeholder="Input with btn toolbar example">
</div>