• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 9/3/20

Add Interactive Components

Log in or subscribe for free to enjoy all this course has to offer!

Well done! The site is starting to take shape with a homepage, a details page, as well as images and videos. Now it's time to add some interactive components to make the user experience more engaging.

Call Your User to Action With Buttons

Buttons are one of the most common forms of interaction on websites. Whether it's submitting a form or a call to action, they tell the user to expect action on the page.

To render a button in Bootstrap, use either a  <button>  or an  <a>  element with a .btn  class as well as a second class to control the background color.

The available color related classes are shown in this table:

A table showing samples of buttons with each of the button color classes, including btn-primary: blue background; btn-secondary: grey background; btn-success: green background; btn-danger: red background; btn-warning: amber background; btn-info: cyan back
Samples of btn-* color classes

You can render a button with the primary background color, which is blue by default, with the following HTML code:

<button type="button" class="btn btn-primary">Primary</button>

For the cards in the Lessons Listing page, you need to add a button to each card with the call to action of Start Learning. Since these cards will link to the relevant Lesson Details pages, you should use a link with the button classes rather than a button element. You can link the first one to the sample Lesson Details page you created in the previous chapter. As for the others, you can link them to other pages if you want to get more practice creating them or leave the destination blank.

Once you’re done, you can check your work against the example in the part-4/chapter-1/buttons folder in the course’s Git repository if needed.

Provide More Information With Carousels

A common way to highlight information on landing pages and homepages is by adding a carousel, which is a slide show for cycling through content including images and text. The changing content is a great way of packing more information onto a page as well as adding some visual interactivity.

The next step in implementing the Space School site is to upgrade the hero section of the homepage to display a carousel instead of the jumbotron. I've provided the images for the carousel.

The basic Bootstrap 4 carousel can be set up with the following HTML structure:

<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>

If you add the code above to your homepage, with the correct src attributes for the <img> elements, you get a simple carousel with images that rotate automatically.

Let’s take a look at some of the details of the carousel’s structure:

  • One of the carousel items has to have the .active class; otherwise, the carousel will not be visible. This is usually the first item.

  • The class  .d-block  gives the element a display value of block. There are other d-* classes in Bootstrap for other display values. You can find all the available options in Bootstrap’s Display property documentation.

  • The  .w-100  class is a sizing class that controls the width of an element. The available classes are  w-100,  w-75,  w-50,  w-25, and  w-auto,  which respectively give an element width values of 100%, 75%, 50%, 25%, and auto relative to its parent.

  • To make sure that you prevent default browser image alignment in the carousel, add the classes  .d-block  and  .w-100  to its  <img>  elements.

Now let’s give our users a bit more control by adding previous and next controls. This is what the HTML structure looks like with the controls added:

<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
[... carrousel items ...]
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

As you can see, the carousel controls are added after the carousel content as two links; one for going to the previous slide, and the other for advancing to the next slide. The key to making the whole thing work, apart from the correct HTML structure, is to give each of the previous and  next links an href  attribute that matches the id attribute of the carousel’s wrapping  <div>. In this case, we used the id  carouselControls.

Add the controls to your homepage’s carousel and try it out. If needed, you can take a look at the part-4/chapter-1/carrousel folder in the course’s Git repository for guidance. 

Notify Your User With Alerts

Alerts are useful for giving contextual feedback to users about their actions or providing notifications to them.

A simple alert can be implemented in Bootstrap by adding the  .alert  class to a  <div>  and adding a  role=”alert”  attribute to it. To control the background color of the alert, you need to also add a class of  .alert-{value}  to the  <div>, where  {value}  is any one of primary, secondary, success,  danger, warning, info, light, or dark. The default colors of each of these values are the same as those for the  .bg-*  and  .button-*  classes you’ve seen earlier in this course. So to create a simple  “success”  alert (default color is green), you add this  <div>  to your page:

<div class="alert alert-success" role="alert">
You’ve successfully done the thing you did!
</div>

You should get an alert that looks like this:

An example of the Bootstrap Alert component with a green background, displaying the text “You’ve successfully done the thing you did!”
Example of Bootstrap alert component

Try it out by adding an alert to the top of the Lesson Details page and play around with the other  .alert-*  options.

While a simple alert is easy to implement, it usually isn’t the best user experience. It’s nice to give the user the option to dismiss an alert after they’ve seen it. To to this, you need to add the classes  .alert-dismissible,  .fade, and  .show  to the alert  <div>  and add a  “close”  button to allow for the dismissal, as shown in this code snippet:

<div class="alert alert-success alert-dismissible fade show" role="alert">
You’ve successfully done the thing you did!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

Your next task is to add a dismissible info alert to the top of the Lesson Details page that you’ve built, with the message “You'll soon be able to order your own custom-made space suit on our website!” (or any other message you’d like to use).

You can check your work against the part-4/chapter-1/alert folder in the course’s Git repository if needed. 

Let’s Recap!

Use Bootstrap’s components to create:

  • Buttons (with customized color using semantic classes).

  • An image carousel with prev/next buttons.

  • Dismissible alerts.

Now that you’ve learned how to add interactivity via carousels, alerts, and buttons, you’re ready to learn how to use Bootstrap to get user input with forms.

Example of certificate of achievement
Example of certificate of achievement