Another common component we see on websites are buttons. Buttons represent a clickable object that does something else in return like navigating to a different page, submitting a form, or opening a popup, just to name a few.
By default, the
<button> element doesn’t have much styling. But, with Bootstrap we can make button components that have more styling. Here’s an example from Bootstrap’s button documentation :
<button type="button" class="btn btn-danger">Danger</button>
The example above will render a red button that has the text
Danger inside the button:
- It has a
- It has two classes,
"btn"class provides Bootstrap’s default button styling.
"btn-danger"turns the button red and conveys the purpose of the button, i.e. clicking this button might not be safe!
Visit Bootstrap’s button documentation for a comprehensive list of how to create and use button components.
We’ll add some interactivity and make the buttons do something in the following exercises. For now, let’s practice creating Bootstrap button components.
Click here for more info button, it already has a class of
"btn". We want to add a class to give this button a teal color.
According to the Bootstrap’s button examples we need to add the class
"btn-info" to make it teal.
Let’s turn the
Plant now button into a green button.
Follow the Bootstrap’s button example and add the classes,
"btn-success" to the
Now use your documentation reading skills and make the
This button acts like a link button resemble an actual link.
Look over Bootstrap’s button example for what two classes to add.