Use any of the available button classes to quickly create a styled button.
<div class="btn-list">
<a href="#" class="btn btn-default">Default</a>
<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>
</div>Make buttons the light to any .btn element. <a>s don’t support the light attribute, so you must add the .light class to make it visually appear light.
<div class="btn-list">
<a href="#" class="btn btn-default-light">Default</a>
<a href="#" class="btn btn-primary-light ">Primary</a>
<a href="#" class="btn btn-secondary-light ">Secondary</a>
<a href="#" class="btn btn-success-light ">Success</a>
<a href="#" class="btn btn-info-light ">Info</a>
<a href="#" class="btn btn-warning-light ">Warning</a>
<a href="#" class="btn btn-danger-light ">Danger</a>
</div>Make buttons the disabled 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.
<div class="btn-list">
<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>
</div>The classic button, in different colors.
<div class="btn-list">
<a href="#" class="btn btn-blue">Blue</a>
<a href="#" class="btn btn-azure">Azure</a>
<a href="#" class="btn btn-indigo">Indigo</a>
<a href="#" class="btn btn-purple">Purple</a>
<a href="#" class="btn btn-pink">Pink</a>
<a href="#" class="btn btn-red">Red</a>
<a href="#" class="btn btn-orange">Orange</a>
<a href="#" class="btn btn-yellow">Yellow</a>
<a href="#" class="btn btn-lime">Lime</a>
<a href="#" class="btn btn-green">Green</a>
<a href="#" class="btn btn-teal">Teal</a>
<a href="#" class="btn btn-cyan">Cyan</a>
<a href="#" class="btn btn-gray">Gray</a>
<a href="#" class="btn btn-gray-dark">Dark gray</a>
</div> The default modifier classes with the .btn-outline-*
<div class="btn-list">
<a href="#" class="btn btn-outline-default">Primary</a>
<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>
</div>Add .btn-radius to button to remove border-radius.
<div class="btn-list">
<a href="#" class="btn btn-radius btn-default">Default</a>
<a href="#" class="btn btn-radius btn-primary">Primary</a>
<a href="#" class="btn btn-radius btn-secondary">Secondary</a>
<a href="#" class="btn btn-radius btn-success">Success</a>
<a href="#" class="btn btn-radius btn-info">Info</a>
<a href="#" class="btn btn-radius btn-warning">Warning</a>
<a href="#" class="btn btn-radius btn-danger">Danger</a>
</div>Add .btn-radius to button to remove border-radius.
<div class="btn-list">
<a href="#" class="btn btn-radius btn-default-light">Default</a>
<a href="#" class="btn btn-radius btn-primary-light ">Primary</a>
<a href="#" class="btn btn-radius btn-secondary-light ">Secondary</a>
<a href="#" class="btn btn-radius btn-success-light ">Success</a>
<a href="#" class="btn btn-radius btn-info-light ">Info</a>
<a href="#" class="btn btn-radius btn-warning-light ">Warning</a>
<a href="#" class="btn btn-radius btn-danger-light ">Danger</a>
</div>Add .btn-pill class to any button more rounded.
<div class="btn-list">
<a href="#" class="btn btn-pill btn-default">Default</a>
<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>
</div>Add .btn-pill class to any button more rounded.
<div class="btn-list">
<a href="#" class="btn btn-pill btn-default-light">Default</a>
<a href="#" class="btn btn-pill btn-primary-light">Primary</a>
<a href="#" class="btn btn-pill btn-secondary-light">Secondary</a>
<a href="#" class="btn btn-pill btn-success-light">Success</a>
<a href="#" class="btn btn-pill btn-info-light">Info</a>
<a href="#" class="btn btn-pill btn-warning-light">Warning</a>
<a href="#" class="btn btn-pill btn-danger-light">Danger</a>
</div>Basic buttons are traditional buttons with borders color opitons.
<div class="btn-list">
<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-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>
</div>Basic buttons are traditional buttons with borders color opitons.
<div class="btn-list">
<button type="button" class="btn btn-dark">Upload <i class="fa fa-upload fa-spin ml-2"></i></button>
<button type="button" class="btn btn-warning">I like <i class="fa fa-heart fa-spin ml-2"></i></button>
<button type="button" class="btn btn-success">I agree <i class="fa fa-check fa-spin ml-2"></i></button>
<button type="button" class="btn btn-primary">More <i class="fa fa-plus fa-spin ml-2"></i></button>
<button type="button" class="btn btn-danger">Link <i class="fa fa-link fa-spin ml-2"></i></button>
<button type="button" class="btn btn-info">Comment <i class="fa fa-comment-o fa-spin ml-2"></i></button>
</div>Add .btn-lg or .btn-sm or .btn-block for additional sizes.
<div class="btn-list">
<div class="row">
<div class="col-md-4 mb-2">
<button type="button" class="btn btn-warning btn-sm mb-1">Small button</button>
</div>
<div class="col-md-4 mb-2">
<button type="button" class="btn btn-info mb-1">Medium button</button>
</div>
<div class="col-md-4 mb-2">
<button type="button" class="btn btn-success btn-lg mb-1">Large button</button>
</div>
</div>
<button type="button" class="btn btn-primary btn-block">Block level button</button>
</div><div class="btn-list">
<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>
</div>You can use only icons.
<div class="btn-list">
<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>
</div>Icon only button. Add .btn-icon class to remove unnecessary button.
<div class="btn-list">
<button type="button" class="btn btn-icon btn-primary"><i class="fe fe-activity"></i></button>
<button type="button" class="btn btn-icon btn-github"><i class="fe fe-github"></i></button>
<button type="button" class="btn btn-icon btn-success"><i class="fe fe-bell"></i></button>
<button type="button" class="btn btn-icon btn-warning"><i class="fe fe-star"></i></button>
<button type="button" class="btn btn-icon btn-danger"><i class="fe fe-trash"></i></button>
<button type="button" class="btn btn-icon btn-purple"><i class="fe fe-mail"></i></button>
<button type="button" class="btn btn-icon btn-secondary"><i class="fe fe-git-merge"></i></button>
</div>Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.
<div class="btn-list">
<button type="button" class="btn btn-primary btn-loading">Button text</button><br>
<button type="button" class="btn btn-success btn-loading btn-icon"><i class="fe fe-check"></i></button>
<button type="button" class="btn btn-warning btn-loading btn-sm">Button text</button><br>
<button type="button" class="btn btn-danger btn-loading btn-lg">Button text</button>
<button type="button" class="btn btn-info btn-loading btn-block">Button text</button>
</div>Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns styles (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.
<div class="btn-list">
<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="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-info 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="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>You can now create a list of buttons with the .btn-list container.
<div class="btn-list">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>Use the .text-center modifiers to alter the alignment.
<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>
<a href="#" class="btn btn-danger">Cancel</a>
</div>Use the .text-right modifiers to alter the alignment.
<div class="example">
<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>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
</div>