This tutorial covers Bootstrap 4 buttons, buttons with contextual classes, links, tags, outline buttons, button of different sizes, block-level, button states, clear fix, etc:
Please note that we have used Bootstrap version 4 in all examples.
=> Visit Here To Learn Bootstrap From Scratch
Table of Contents:
Bootstrap Buttons
Buttons are a very important feature in forms, dialogue boxes, etc. Bootstrap classes help to add various styles to the buttons.
Two classes are used to create a Bootstrap 4 button (colored button). They are,
- .btn class – Add the .btn class to the <button> element.
- .btn-* contextual class – Add one of the contextual classes (.btn-*) to the <button> element.
Please refer to the next section for the contextual classes of buttons.
The below table summarizes the classes and attribute(s) that are used to create and style Bootstrap 4 buttons.
| Class/Attribute | Usage |
|---|---|
| The .btn class | This class is used to create a button. |
| The .btn-primary class | This class is used to add blue color to a button. |
| The .btn-secondary class | This class is used to add grey color to a button. |
| The .btn-success class | This class is used to add green color to a button. |
| The .btn-danger class | This class is used to add red color to a button. |
| The .btn-warning class | This class is used to add orange color to a button. |
| The .btn-info class | This class is used to add a light blue color to a button. |
| The .btn-light class | This class is used to add a light grey color to a button. |
| The .btn-dark class | This class is used to add a dark grey color to a button. |
| The .btn-link class | This class is used to create a button link. |
| The .btn-outline-primary class | This class is used to add a blue color outline to a button. |
| The .btn-outline-secondary class | This class is used to add a grey color outline to a button. |
| The .btn-outline-success class | This class is used to add a green color outline to a button. |
| The .btn-outline-danger class | This class is used to add a red color outline to a button. |
| The .btn-outline-warning class | This class is used to add an orange color outline to a button. |
| The .btn-outline-info class | This class is used to add a light blue color outline to a button. |
| The .btn-outline-light class | This class is used to add a light grey color outline to a button. |
| The .btn-outline-dark class | This class is used to add a dark grey color outline to a button. |
| The .btn-sm class | This class is used to create a small button. |
| The .btn-lg class | This class is used to create a large button. |
| The .btn-block class | This class is used to create a block level button. |
| The .active class | This class is used to create an active button. |
| The disabled attribute | This attribute is used to create an inactive or disabled button. |
| The .clearfix class | This class is used to easily clear floats. |
Bootstrap 4 Buttons With Contextual Classes
There are eight contextual classes for Bootstrap button colors. Use the following Bootstrap button classes for adding colors to the buttons.
- .btn-primary class – This class is used to add blue color to a button.
- .btn-secondary class – This class is used to add grey color to a button.
- .btn-success class – This class is used to add green color to a button.
- .btn-danger class – This class is used to add red color to a button.
- .btn-warning class – This class is used to add orange color to a button.
- .btn-info class – This class is used to add a light blue color to a button.
- .btn-light class – This class is used to add a light grey color to a button.
- .btn-dark class – This class is used to add a dark grey color to a button.
Example:
The programming code below is an example of buttons with contextual classes.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <button type="button" class="btn btn-primary mb-2">Primary Button</button><br> <button type="button" class="btn btn-secondary mb-2">Secondary Button</button><br> <button type="button" class="btn btn-success mb-2">Success Button</button><br> <button type="button" class="btn btn-danger mb-2">Danger Button</button><br> <button type="button" class="btn btn-warning mb-2">Warning Button</button><br> <button type="button" class="btn btn-info mb-2">Info Button</button><br> <button type="button" class="btn btn-light mb-2">Light Button</button><br> <button type="button" class="btn btn-dark">Dark Button</button> </div> </body> </html>
Output:
Button Links And Tags
The .btn class can be used in <a>, <button> and <input> elements to create button links and button tags.
Example:
The below programming code shows an example of a button link and various button tags.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <button type="button" class="btn btn-link">Button Link</button> <a class="btn btn-primary" role="button" href="#">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit"> <input class="btn btn-primary" type="reset" value="Reset"> </div> </body> </html>
Note: In the above example, we have put # as the attribute value of the href attribute, as we didn’t link to any page. You may add a suitable URL instead of # for the value of the href attribute.
Output:
Outline Buttons
If you need a button without any background-color, then an outline button would be the perfect solution.
Add the .btn-outline -* contextual class to the <button> element instead of the .btn-* contextual class to create an outline button.
Outline Buttons With Contextual Classes
There are eight contextual classes for outline buttons as shown in the below list. It will add a wide range of colors to the outline buttons.
- .btn-outline-primary class – This class is used to add a blue color outline to a button.
- .btn-outline-secondary class – This class is used to add a grey color outline to a button.
- .btn-outline-success class – This class is used to add a green color outline to a button.
- .btn-outline-danger class – This class is used to add a red color outline to a button.
- .btn-outline-warning class – This class is used to add an orange color outline to a button.
- .btn-outline-info class – This class is used to add a light blue color outline to a button.
- .btn-outline-light class – This class is used to add a light grey color outline to a button.
- .btn-outline-dark class – This class is used to add a dark grey color outline to a button.
Example:
The below programming code shows an example of Outline buttons with contextual classes.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <button type="button" class="btn btn-outline-primary mb-2">Primary Outline Button</button><br> <button type="button" class="btn btn-outline-secondary mb-2">Secondary Outline Button</button><br> <button type="button" class="btn btn-outline-success mb-2">Success Outline Button</button><br> <button type="button" class="btn btn-outline-danger mb-2">Danger Outline Button</button><br> <button type="button" class="btn btn-outline-warning mb-2">Warning Outline Button</button><br> <button type="button" class="btn btn-outline-info mb-2">Info Outline Button</button><br> <button type="button" class="btn btn-outline-light text-dark mb-2">Light Outline Button</button><br> <button type="button" class="btn btn-outline-dark mb-2">Dark Outline Button</button> </div> </body> </html>
Output:
Button Sizes And Block Level Buttons
There are three sizes of buttons. They are,
- Small buttons
- Default size buttons
- Large buttons
Small Buttons: Add the .btn-sm class to the <button> element to create a small button. Please refer to the below example of a small button.
Default Size Buttons: No need to add a specific class to create a default size button as it is the default size. Please refer to the below example of a default size button.
Large Buttons: Add the .btn-lg class to the <button> element to create a large button. Please refer to the below example of a large button.
Block Level Buttons
Block-level buttons span the total width of the parent element. Add the .btn-block class to the <button> element to create a block-level button. Please refer to the below example of a block-level button.
Example of Button Sizes and Block Level Button
The below programming code shows an example of a small button, a default size button, a large button, and a block-level button.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <button type="button" class="btn btn-danger btn-sm">Small Button</button> <button type="button" class="btn btn-danger">Default Button</button> <button type="button" class="btn btn-danger btn-lg">Large Button</button> <button type="button" class="btn btn-danger btn-block mt-3">Block Level Button</button> </div> </body> </html>
Output:
Button States
There two types of button states as given below.
- Active state
- Disabled state
Active State
Add the active class to the <button> element to create a button with an active state. Active buttons appear as pressed buttons. When a button is in the active state, it has the following characteristics.
- darker background
- darker border
- inset shadow
Please refer to the below example of a button with an active state.
Disabled State
Add the disabled attribute to the <button> element to create a button with the disabled state. Buttons that are disabled are inactive and non-clickable. Please refer to the below example of a button with the disabled state.
Example Of Button States
The below programming code shows an example of an active button and a disabled button.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <button type="button" class="btn btn-warning active"> Active Button</button> <button type="button" class="btn btn-warning" disabled> Disabled Button</button> </div> </body> </html>
Output:
Clear Fix
Add the .clearfix class to the parent element to easily clear floats.
Example:
The below programming code shows an example of a clear fix.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="bg-info clearfix"> <button type="button" class="btn btn-success float-left"> Button A</button> <button type="button" class="btn btn-success float-right">Button B</button> </div> </div> </body> </html>
Output
Frequently Asked Questions
In this section, we will take a look at some of the frequently asked questions about Bootstrap 4 buttons.
Q #1) What are the two main classes that are used to create a button?
Answer: The two main classes that are used to create a button are the .btn class and one of the contextual classes (.btn-*).
Q #2) What Contextual classes are used for buttons?
Answer: There are eight contextual classes that are used for buttons. They are the .btn-primary class, the .btn-secondary class, the .btn-success class, the .btn-danger class, the .btn-warning class, the .btn-info class, the .btn-light class and the .btn-dark class.
Q #3) How to create a Button link?
Answer: Add the .btn-link class to the <button> element to create a button link.
Q #4) How to create an Outline button?
Answer: Add the .btn-outline -* contextual class to the <button> element (instead of the .btn-* contextual class) to create an outline button.
Q #5) What Contextual classes are used for Outline buttons?
Answer: There are eight contextual classes that are used for Outline buttons. They are the .btn-outline-primary class, the .btn-outline-secondary class, the .btn-outline-success class, the.btn-outline-danger class, the .btn-outline-warning class, the .btn-outline-info class, the .btn-outline-light class and the .btn-outline-dark class.
Q #6) What are the different sizes of buttons?
Answer: There are three sizes of buttons i.e. Small button size, Default button size, and Large button size.
Q #7) Which class is used to create a Small button?
Answer: The .btn-sm class is used to create a small button.
Q #8) Which class is used to create a Large button?
Answer: The .btn-lg class is used to create a large button.
Q #9) How to create a Block-level button?
Answer: Add the .btn-block class to the <button> element to create a Block level button.
Q #10) What are the two types of Button States?
Answer: The two types of button states include the Active state and the disabled state.
Q #11) Which class is used for Active buttons?
Answer: The Active class is used for action buttons.
Q #12) How to create an Inactive or Disabled button?
Answer: Add the disabled attribute to the <button> element to create an inactive or disabled button.
Q #13) What is the purpose of a Clear fix?
Answer: A clear fix is used to easily clear floats.
Q #14) Which class used for a Clear fix?
Answer: The .clearfix class is used for a clear fix.
Conclusion
Bootstrap has eight contextual classes for adding colors to the Buttons and Outline buttons. Furthermore, it provides facilities to control other styling features such as the size of the button, state of the button, etc.
=> Check ALL Bootstrap Tutorials Here