Learn
Learn Bootstrap 4: Utilities and Components
The Button Component

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 type of "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!

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

1.

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.

2.

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.

3.

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.

Folder Icon

Sign up to start coding

Already have an account?