BOOTSTRAP 4 BUTTONS
Bootstrap provides us different predefined classes to create buttons. These classes can be used to easily create buttons of different style, each serves its own semantic purpose.
To create a basic bootstrap button use
.btn class. Bootstrap4 provide us nine different types of button, use these button claases to create button of your choice. These button classes are :
Bootstrap button on <a> and <input> tag
.btn classes are designed to be used with
<button> tag, but it can be used with
<input> tags also.
<a> tag to appropriately convey their purpose.
The bootstrap's outline button have transparent background, colored text and colored border.
To create bordered button in bootstrap replace default modifier with
Using bootstrap classes you can customize size of buttons. Use
.btn-lg to make button large and use
.btn-sm to make button smaller.
You can also create block level button which cover full width of parent element by adding
Bootstrap Disabled Buttons
There are many situation when we want a disabled button. Example: when user has not filled all necessary input of a form, when user has not acceped term and condition and many more. So in such situation we disable button to stop further actions.
To make a button disabled use
disabled boolean attribute to any button element.
disabled is a button attribute you can't use it on anchor tag (<a>).
To create a disabled button for <a> tag use
.disabled class to it to make it visibally disabled.
Disabled buttons should include the
aria-disabled="true" attribute to indicate state of element.
Bootstrap Active Button
As can disable a button, we can also make a button visibally active button. To make a button active use
Using bootstrap you can easily create a spinner button by adding a spinner icon in a button. Spinner buttons indicates loading state of any applicaation.
Below is example of spinners in bootstrap:
To include spinner in button just enclose above code in your button.
- To create basic button use
- Bootstrap4 provides 9 different types of button style which are of different colors indicating different meaning.
- To create bordered button use
.btn-bordered-*class (replace * with button theme you want)