User Crush
Card image cap
Daniel Kristeen

795 Folsom Ave, Suite 600 San Francisco, 94107

3265
Post
1358
Followers
10K
Likes
  • michael@example.com
  • + 202-555-2828
  • October 22th, 1990
View More Another link

Documentation

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

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).

Link 
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" />
<input type="reset" class="btn btn-primary" value="Reset" />

Button variations

Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.

Primary Secondary Success Info Warning Danger Link 
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>

Disabled buttons

Make buttons look inactive by adding the disabled boolean attribute to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Primary Secondary Success Info Warning Danger 
<a href="#" class="btn btn-primary disabled">Primary</a>
<a href="#" class="btn btn-secondary disabled">Secondary</a>
<a href="#" class="btn btn-success disabled">Success</a>
<a href="#" class="btn btn-info disabled">Info</a>
<a href="#" class="btn btn-warning disabled">Warning</a>
<a href="#" class="btn btn-danger disabled">Danger</a>

Color variations

The classic button, in different colors.

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan 
<a href="#" class="btn btn-blue">Blue</a>
<a href="#" class="btn text-white bg-azure">Azure</a>
<a href="#" class="btn text-white bg-indigo">Indigo</a>
<a href="#" class="btn text-white bg-purple">Purple</a>
<a href="#" class="btn text-white bg-pink">Pink</a>
<a href="#" class="btn text-white bg-red">Red</a>
<a href="#" class="btn text-white bg-orange">Orange</a>
<a href="#" class="btn text-white bg-yellow">Yellow</a>
<a href="#" class="btn text-white bg-lime">Lime</a>
<a href="#" class="btn text-white bg-green">Green</a>
<a href="#" class="btn text-white bg-teal">Teal</a>

Square buttons

Add .btn-square to button to remove border-radius.

Primary Secondary Success Info Warning Danger 
<a href="#" class="btn btn-square btn-primary">Primary</a>
<a href="#" class="btn btn-square btn-secondary">Secondary</a>
<a href="#" class="btn btn-square btn-success">Success</a>
<a href="#" class="btn btn-square btn-info">Info</a>
<a href="#" class="btn btn-square btn-warning">Warning</a>
<a href="#" class="btn btn-square btn-danger">Danger</a>

Pill buttons

Add .btn-pill class to any button to make them more rounded.

Primary Secondary Success Info Warning Danger 
<a href="#" class="btn btn-pill btn-primary">Primary</a>
<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
<a href="#" class="btn btn-pill btn-success">Success</a>
<a href="#" class="btn btn-pill btn-info">Info</a>
<a href="#" class="btn btn-pill btn-warning">Warning</a>
<a href="#" class="btn btn-pill btn-danger">Danger</a>

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.

Primary Secondary Success Info Warning Danger 
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>

Button size

Add .btn-lg or .btn-sm for additional sizes. 

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Create block level buttons—those that span the full width of a parent—by adding .btn-block. 

<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>

Button with icon

Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons. 

<button type="button" class="btn btn-dark"><i class="fe fe-upload mr-2"></i>Upload</button>
<button type="button" class="btn btn-warning"><i class="fe fe-heart mr-2"></i>I like</button>
<button type="button" class="btn btn-success"><i class="fe fe-check mr-2"></i>I agree</button>
<button type="button" class="btn btn-outline-primary"><i class="fe fe-plus mr-2"></i>More</button>
<button type="button" class="btn btn-danger"><i class="fe fe-link mr-2"></i>Link</button>
<button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button>

Social buttons 

<button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i>Facebook</button>
<button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i>Twitter</button>
<button type="button" class="btn btn-google"><i class="fa fa-google mr-2"></i>Google</button>
<button type="button" class="btn btn-youtube"><i class="fa fa-youtube mr-2"></i>Youtube</button>
<button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo mr-2"></i>Vimeo</button>
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble mr-2"></i>Dribble</button>
<button type="button" class="btn btn-github"><i class="fa fa-github mr-2"></i>Github</button>
<button type="button" class="btn btn-instagram"><i class="fa fa-instagram mr-2"></i>Instagram</button>
<button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest mr-2"></i>Pinterest</button>
<button type="button" class="btn btn-vk"><i class="fa fa-vk mr-2"></i>VKontakte</button>
<button type="button" class="btn btn-rss"><i class="fa fa-rss mr-2"></i>RSS</button>
<button type="button" class="btn btn-flickr"><i class="fa fa-flickr mr-2"></i>Flickr</button>
<button type="button" class="btn btn-bitbucket"><i class="fa fa-bitbucket mr-2"></i>Bitbucket</button>

You can use only icons. 

<button type="button" class="btn btn-icon btn-facebook"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-icon btn-twitter"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-icon btn-google"><i class="fa fa-google"></i></button>
<button type="button" class="btn btn-icon btn-youtube"><i class="fa fa-youtube"></i></button>
<button type="button" class="btn btn-icon btn-vimeo"><i class="fa fa-vimeo"></i></button>
<button type="button" class="btn btn-icon btn-dribbble"><i class="fa fa-dribbble"></i></button>
<button type="button" class="btn btn-icon btn-github"><i class="fa fa-github"></i></button>
<button type="button" class="btn btn-icon btn-instagram"><i class="fa fa-instagram"></i></button>
<button type="button" class="btn btn-icon btn-pinterest"><i class="fa fa-pinterest"></i></button>
<button type="button" class="btn btn-icon btn-vk"><i class="fa fa-vk"></i></button>
<button type="button" class="btn btn-icon btn-rss"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-icon btn-flickr"><i class="fa fa-flickr"></i></button>
<button type="button" class="btn btn-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></button>

Icon buttons

Icon only button. Add .btn-icon class to remove unnecessary padding from button. 

<button type="button" class="btn btn-icon btn-primary"><i class="fe fe-activity"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-github"><i class="fe fe-github"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-success"><i class="fe fe-bell"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-warning"><i class="fe fe-star"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-danger"><i class="fe fe-trash"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-purple"><i class="fe fe-bar-chart"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="fe fe-git-merge"></i></button>

Button dropdown

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link 
<div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
        <i class="fe fe-calendar"></i>
    </button>
    <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Dropdown link</a>
    <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
</div>
<div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
        <i class="fe fe-calendar mr-2"></i>Show calendar
    </button>
    <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Dropdown link</a>
    <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
</div>
<div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
        Show calendar
    </button>
    <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Dropdown link</a>
    <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
</div>

List of buttons

You can now create a list of buttons with the .btn-list container.

Save changes Save and continue Cancel 
<div class="btn-list">
    <a href="#" class="btn btn-success">Save changes</a>
    <a href="#" class="btn btn-secondary">Save and continue</a>
    <a href="#" class="btn btn-danger">Cancel</a>
</div>

If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen 
<div class="btn-list">
    <a href="#" class="btn btn-secondary">One</a>
    <a href="#" class="btn btn-secondary">Two</a>
    <a href="#" class="btn btn-secondary">Three</a>
    <a href="#" class="btn btn-secondary">Four</a>
    <a href="#" class="btn btn-secondary">Five</a>
    <a href="#" class="btn btn-secondary">Six</a>
    <a href="#" class="btn btn-secondary">Seven</a>
    <a href="#" class="btn btn-secondary">Eight</a>
    <a href="#" class="btn btn-secondary">Nine</a>
    <a href="#" class="btn btn-secondary">Ten</a>
    <a href="#" class="btn btn-secondary">Eleven</a>
    <a href="#" class="btn btn-secondary">Twelve</a>
    <a href="#" class="btn btn-secondary">Thirteen</a>
    <a href="#" class="btn btn-secondary">Fourteen</a>
    <a href="#" class="btn btn-secondary">Fifteen</a>
    <a href="#" class="btn btn-secondary">Sixteen</a>
    <a href="#" class="btn btn-secondary">Seventeen</a>
    <a href="#" class="btn btn-secondary">Eighteen</a>
    <a href="#" class="btn btn-secondary">Nineteen</a>
</div>

Use the .text-center or the .text-right modifiers to alter the alignment.

Save changes Save and continue 
<div class="btn-list text-center">
    <a href="#" class="btn btn-primary">Save changes</a>
    <a href="#" class="btn btn-secondary">Save and continue</a>
</div>
Save changes Save and continue 
<div class="btn-list text-right">
    <a href="#" class="btn btn-primary">Save changes</a>
    <a href="#" class="btn btn-secondary">Save and continue</a>
</div>