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.
Use a classes
.btn-outline to quickly create a outline.
Rounded Button / Squard Button
Round button and the square button can be used to distinguish th different behavior or style.
Size might vary from smaller screen to a larger screen. We made
few sizes that are pixel perfect and resposive.
Fancy larger or smaller buttons? Add
.btn-xs for additional
Block Button With Icon
Create block level buttons,with by adding add
Button With Direction
Create buttons with directions by adding add
A button can animate to show hidden content. Modern and subtle styles & effects for buttons.
Floating action buttons are used for a special type of promoted
action. They are distinguished by a circled icon floating above
the UI and have special motion behaviors related to morphing,
launching, and the transferring anchor point.
Use the default class
.btn with an additional class
Flat And Raised Button
Raised buttons behave like a piece of material resting on another
sheet – they lift and color on press.
Flat buttons are printed on the material. They do not lift but fill with color on press.
Pill Left Or Right
Create a button like pill by
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.
Icon only button.
Icon used in the dropdown.
Social Icon Button
Icon only button. But icon is social icon.
Social In Labels
It is often used at the top of a page or section. An social icon must be with this variation.
Social Button Sizes
Different Sizes for you to use with icon button or icon only button.
Icon Block Button
Icon only block button.
Basic Button Group
Grouped buttons give users access to frequently performed actions
of a focused task. Wrap a series of buttons with
Vertical Button Group
Order the buttons in a group for actions that are used regularly or are significant.
Button Group Sizes
Instead of applying button sizing classes to every button in a
group, just add
.btn-group-* to each
including when nesting multiple groups.
This group button is used to show the close relationship between a number of buttons, and is usually used on edit page.
Nesting Button Group
.btn-group within another
.btn-group when you want dropdown menus mixed with a series of buttons.
Justified Button Group
To use justified button groups with
<button> elements, you must wrap each button in a button group. Most browsers
don't properly apply our CSS for justification to
<button> elements, but since we support button
dropdowns, we can work around that.
There are a few easy ways to quickly get started with Bootstrap, each one ...
Appealing to a different skill level and use case. Read through to see what suits your particular needs.
data-loading-text="Loading..." to use
a loading state on a button.