• 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 UI Components

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

Now that you’ve learned how to build the scaffolding for your page layouts using the Bootstrap 4 grid, it’s time to start adding components to that structure!

One of the most important components of any website is the main navigation, so it’s a good place to start.

Adding Navigation

Bootstrap has a powerful, responsive navigation bar component. It’s implemented using a  nav  element with a .navbar class.

<nav class="navbar">
...
</nav>

Navbars also require a  .navbar-expand{-sm|-md|-lg|-xl}  class for responsive collapsing. The  .navbar-expand  class affects the viewport width at which the navbar expands/collapses.  For now, add the  navbar-expand  class without any size-related class modifiers. This would cause it to expand on all screen widths. We’ll look at creating a responsive one that collapses for smaller screens later on:

<nav class="navbar navbar-expand">
...
</nav>

For most websites, branding is displayed alongside the main navigation, so Bootstrap has a  .navbar-brand  class for it inside the navbar component. Add the site name in the branding element like below:

<nav class="navbar navbar-expand">
<a class="navbar-brand" href="...">Space School</a>
</nav>

Next add the navigation links—it wouldn’t be much of a navbar without them!

The navigation elements should be placed in an unordered list with the  <ul>,  <li>, and  <a>  elements given the classes shown in this snippet:

<nav class="navbar navbar-expand">
<a class="navbar-brand" href="index.html">Space School</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lessons</a>
</li>
</ul>
</nav>

You’ll notice that the first <li> element in the previous code snippet has an .active class. This is used to highlight one of the navigation items as the “active” or currently selected item. Create your navbar’s HTML in a way that ensures only one of the navigation items has this class.

Now, your navbar is branded with the name of the site and the navigation links. Next, you want to add some color!

To change the colors of the background and text in the navbar, you can add some CSS styles. However, you can also use Bootstrap’s handy background color utility classes. These are particularly handy when you’re prototyping as they let you adjust the background color of an element (not just navbars!) with Bootstrap presets. 

As you saw in the previous chapter, the navbar has a dark background, so we’ll use the .bg-dark  utility class to change its color:

<nav class="navbar navbar-expand bg-dark">
...
</nav>

Another handy set of Bootstrap color utilities are the  .navbar-light  and  .navbar-dark  classes. These classes adjust the color of any elements in the navbar, such as the brand and navigation links, to contrast with the chosen background. So you would add the  .navbar-light  class to a light-colored navbar. Alternatively, as in the case of our site, you would add the  .navbar-dark  class to a dark-colored navbar. So go ahead and do that:

<nav class="navbar navbar-expand bg-dark navbar-dark">
...
</nav>

So now, with all of the changes to the header and navbar section, your prototype homepage should look like this:

A screenshot of the prototype home page with the navbar background limited to the container width. The navbar contains the name of the site (Space School) and the two navigation links to the Home page and the Lessons Page, as well as placeholders for the
Prototype homepage with the navbar background limited to the container width

Things are starting to take shape!

One more adjustment you can make to your navbar layout is to get the header section to expand to the full width of the window. If you recall from the last chapter, a div with the .container class will add padding to its contents. Currently, all of our site’s content is wrapped in such a div. You want the <nav> element of the header section to maintain the same width and padding as the rest of the page’s content and the background to expand to the full width, as shown in the following image:

A screenshot of the prototype home page with the navbar background filling the full width of the screen. The navbar contains the name of the site (Space School) and the two navigation links to the Home page and the Lessons Page, as well as placeholders fo
Prototype homepage with the navbar background filling the full width of the screen

You can do this by using two separate .container divs: one to wrap the <nav> element, and another to wrap the rest of the page's content outside of the header section.

This is what it'll look like:

<!-- Header Section -->
<div class="bg-dark">
<div class="container">
<div class="row">
<nav class="col navbar navbar-expand navbar-dark">
...navbar content...
</nav>
</div>
</div>
</div>
<!-- Rest of page -->
<div class="container">
...page content...
</div>

As you can see, combining the .container, .row, and .col classes in different configurations gives you flexibility as to how you can render the grid layout in Bootstrap. Note how the .col class was added to the <nav> element to make sure it takes up the whole width of its enclosing .row div.

Make the changes to your homepage to see how it renders now. You can check your work against the index.html file in the part-3/chapter-1/navigation folder in the GitHub repository of the example site if it’s not rendering as expected.

Responsive Navigation

Now that you have a basic navigation bar setup, it’s time to make sure that it’s responsive. Since Bootstrap is a mobile-first framework and the navbar classes in the code used so far don’t have any size related class modifiers, the navbar will look the same on all screen sizes.

When you add content to the navbar such as logos and more links, it will end up being too wide for smaller screens. To make it responsive to different screen sizes, change it to collapse for smaller screens and expand to the full layout for larger ones.

The following video shows the intended responsive behavior of the navbar.

As you can see in the video, the behavior of the responsive navigation for our example site is that:

  • When the viewport width is large or above, the navigation menu links are shown—i.e., the navigation menu is expanded.

  • When the viewport width is below the large breakpoint (i.e., it is extra-small, small, or medium), the navigation menu is hidden, and a “toggle navigation” button is displayed that expands/collapses the navigation menu.

There’s quite a bit going on there, but fortunately Bootstrap makes it easy.

The first step in implementing the responsive navigation is to use the size-related class modifier on the  .navbar-expand  class of the  <nav>  element. Remember that class modifiers in Bootstrap work upwards. Using the .navbar-expand class without a class modifier will apply the class to all sizes from extra-small upwards. To make the navigation responsive in the way specified above, you need to apply the class modifier that expands the navbar menu for large screens and above. So, you’ll need to change it to .navbar-expand-lg:

<nav class="col navbar navbar-expand-lg navbar-dark">
...navbar content...
</nav>

Next, you need to add the toggle navigation button. For a Bootstrap responsive navigation, add a button just after the branding, with the following attributes and content:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>

As you can see, the button has a .navbar-toggler  class and data-toggle="collapse"  and  data-target="#navbarContent"  attributes.

The final step is to add the  .collapse  and  .navbar-collapse  classes to the  <div>  that wraps the unordered list containing the navigation links, as well as an id attribute with a value that matches that of the data-target attribute of the navbar toggle button—in this case  navbarContent.

<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav">
...nav items...
</ul>
</div>

The  .*collapse  classes and id of the  <div>, the corresponding  data-*  attributes of the toggle button, as well as the  .navbar-expand-*  class of the  <nav>  element, combine to give you a responsive Bootstrap navbar.

This is what your responsive navbar’s HTML will look like:

<nav class="col navbar navbar-expand navbar-dark">
<a class="navbar-brand" href="index.html">Space School</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
</ul>
</div>
</nav>

Go ahead and add this to the site and test it out to see if it works as expected. If you get stuck, you can check out the index.html file in the part-3/chapter-1/responsive-navigation folder of the GitHub repository.

Jumbotron

Now that the site's navigation is set up, it's time to start taking care of the content. For the homepage, we want a hero unit to greet visitors. For now, we’ll use Bootstrap’s jumbotron component. Jumobotron is a flexible, lightweight component for creating hero units.

To create a jumbotron, you simply add the .jumbotron class to a div:

<div class="jumbotron">
<h1>Welcome to the Space School!</h1>
</div>

Here's what it looks like:

The prototype of the home page for large screens showing the navbar, a Jumbotron with the text “Welcome to the Space School!”, and three prototype information cards with text content
The prototype of the homepage for large screens

The homepage is starting to take shape now! Add a jumbotron and test out its responsive behavior. As usual, if you get stuck you can check you work against the repository, in this case it’ll be in the part-3/chapter-1/jumbotron folder.

Cards

You can see from the designs in Part 2 that the homepage has information cards promoting the advantages of the Space School. Bootstrap has an aptly named card component for displaying content in this way. 

The card component is a flexible container that has options for a header, footer, and content. The basic setup for a card component is to assign a .card class to a  <div>  and add a child  <div>  with a .card-body class:

<div class="card">
<div class="card-body">
This is the content of the card body
</div>
</div>

The  .card-body  div can contain many types of card elements, but for now use these:

  • .card-title is added to a <h*> tag to style the title of the card.

  • .card-text is added to a  <p>  tag to style text such as lead-ins or descriptions.

This snippet shows the structure of a basic card:

<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some text to build on the card title and make up the card's content.</p>
</div>
</div>

Later in the course, you’ll add other elements to the cards; but for now, add a card in place of each of the placeholders on the homepage. For each, add a title and some text. You can use the design of the homepage in Part 2 for guidance on the content, or you can come up with your own if you prefer. Once you’ve added the cards, check out their responsive behavior to make sure everything’s working as it should.

Cards are also used to list the lessons on the Lessons page. Take a look at the design you saw in Part 2 and start creating that page in a file named lessons.html. 

When you add the Lessons page, remember to add the link to the new file to navbar.

If you need to, you can check your work against the part-3/chapter-1/cards folder in the course’s Git repository.

Let’s Recap!

You’ve learned how to:

  • Implement a responsive navigation component. 

  • Create a hero unit using a jumbotron.

  • Use the versatile card component to display content.

The homepage is starting to take shape with the new UI components you’ve learned how to implement. Now you’re ready to add more details to the page by learning about Bootstrap’s text formatting classes.

Example of certificate of achievement
Example of certificate of achievement