Buttons

Overview

The basic buttons used throughout the kit are white, black, pink and navy.

<button type="#button" class="btn btn-white">White</button>
<button type="#button" class="btn">Black</button>
<button type="#button" class="btn btn-pink">Pink</button>
<button type="#button" class="btn btn-navy">Navy</button>

Style

The style for the button can be normal, bordered or with an icon.

<button type="#button" class="btn btn-navy">Regular</button>
<button type="#button" class="btn btn-border btn-navy">Bordered</button>
<button type="#button" class="btn btn-navy"><i class="fas fa-heart"></i> With Icon</button>
<button type="#button" class="btn btn-icon btn-navy"><i class="fas fa-heart"></i></button>

Sizes

The sizes for the button are: large, regular, small and extra small.

<button type="#button" class="btn btn-navy btn-lg">Large</button>
<button type="#button" class="btn btn-navy">Regular</button>
<button type="#button" class="btn btn-navy btn-sm">Small</button>
<button type="#button" class="btn btn-navy btn-xs">Very Small</button>

Social Buttons

In order to be easier for you to add social share buttons, we have created special classes for them.

<div class="row social">
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-facebook"><i class="fab fa-facebook-f"></i> Facebook</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-twitter"><i class="fab fa-twitter"></i> Twitter</a> 
    </div>
    <div class="col-md-3">   
    	<a href="#a" class="btn btn-block btn-google"><i class="fab fa-google"></i> Google</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-pinterest"><i class="fab fa-pinterest-p"></i> Pinterest</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-linkedin"><i class="fab fa-linkedin-in"></i> Linkedin</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-dribbble"><i class="fab fa-dribbble"></i> Dribbble</a>   
    </div>
    <div class="col-md-3"> 
    	<a href="#a" class="btn btn-block btn-github"><i class="fab fa-github"></i> Github</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-youtube"><i class="fab fa-youtube"></i> Youtube</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-instagram"><i class="fab fa-instagram"></i> Instagram</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-reddit"><i class="fab fa-reddit"></i> Reddit</a>  
    </div>
    <div class="col-md-3">  
    	<a href="#a" class="btn btn-block btn-tumblr"><i class="fab fa-tumblr"></i> Tumblr</a>
    </div>
    <div class="col-md-3">
    	<a href="#a" class="btn btn-block btn-behance"><i class="fab fa-behance"></i> Behance</a>
    </div>	            
</div>

Disabled State

You can make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<button type="#button" class="btn btn-white disabled">White</button>
<button type="#button" class="btn disabled">Black</button>
<button type="#button" class="btn btn-pink disabled">Pink</button>
<button type="#button" class="btn btn-navy disabled">Navy</button>	

If you want to see more examples and properties please check the official Bootstrap Documentation.