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 :
The example above will render a red button that has the text Danger inside the button:
- It has a
typeof"button". - It has two classes,
"btn"and"btn-danger".- The
"btn"class provides Bootstrap’s default button styling. - The
"btn-danger"turns the button red and conveys the purpose of the button, i.e. clicking this button might not be safe!
- The
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.
Instructions
For the 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" and "btn-success" to the <button> element.
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.