• 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 Media to Your Page

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

Images

Images are an essential part of almost all websites, and our site is no exception. So let’s spice up its appearance by adding some the Bootstrap way!

Adding a logo

We’ll start by adding a logo to the header section.  It’s quite straightforward with Bootstrap. All you need to do is add an  <img>  tag to the  .navbar-brand  element. The only gotcha is that it will most likely need to have custom attributes or styles to make sure that it’s properly sized, as shown in this example:

<nav class="navbar">
<a class="navbar-brand" href="index.html">
<img src="/path/to/logo.png" width="40" height="30" alt="Site logo">
Site Name
</a>
</nav>

Download the logo file for the Space School website.

Now modify the  .navbar-brand  element in your files for the Space School website so the logo is displayed in the header section.

You can check your work against the files in the part-3/chapter-3/logo folder in the course’s Git repository if needed.

Add Images to Cards

Bootstrap cards are very versatile, and now you'll get a chance to see how to add more detail to them. To add an image to a card, you can add an  <img>  element with a  .card-img-top  class as a preceding sibling to the  .card-body  <div>, like this:

<div class="card">
<img class=”card-img-top” src=”...” alt=”...”>
<div class="card-body">
[card content]
</div>
</div>

Now try your hand at adding images to the cards in the homepage as well as the Lessons page. I've provided images for the homepage cards and images for the lesson cards on the Lessons Listing page.

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

Add Videos to Your Site

Vídeos are a great way to convey information online. So they are a must-have for our e-learning site!

Our site will have a video on the Lesson Details page, alongside a description. We're going to use Bootstrap’s embed classes to add videos from sites such as YouTube. To do that, you need to wrap the iframe that contains the video in a parent element that has the .embed-responsive class:

<div class="embed-responsive">
<iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>

Note that you don’t need to include a  frameborder=”0”  attribute to the  <iframe> - Bootstrap takes care of that for you. 

Bootstrap’s embed classes can also be used for other types of elements such as  <embed>,  <video>, and <object>.  Just as with the  <iframe>  example above, you can add the embed-responsive-item  class to match the styling for any of these other elements.

You can control the aspect ratio of the embedded content by using a modifier class with the wrapper element. These are self-explanatory:

Modifier Class

Aspect Ratio

.embed-responsive-21by9

21:9

embed-responsive-16by9

16:9

embed-responsive-4by3

4:3

embed-responsive-1by1

1:1 (square)

Since we want Bootstrap to maintain a responsive 16:9 ratio for our video, we’ll use the  .embed-responsive-16by9  modifier class for the wrapper  <div>:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Now it’s time to start on the Lesson Details page!

As a reminder, this is what the design of the page looks like:

The design of an example of the Lesson details page for the example Space School website. The main content includes the lesson title; a lesson video and an overview of the lesson’s details.
Lesson Details page design for large screens

As you can see, to build the Lesson Details page, as well as embedding the video, you’ll need need to use headings (h1  for the lesson title and  h2  for the Overview section title) and lists to render the content. You can use the content in the design or create your own lesson! If you want to use the video in the example, you can find it here.

If needed, you can check your work against the part-3/chapter-3/video folder in the course’s Git repository.

Let’s Recap!

You’ve learned how to:

  • Add a logo image to the navbar.

  • Add images to the card component.

  • Use Bootstrap’s embed classes to include videos in your pages and control their aspect ratios.

Now that you can create a responsive layout for your pages and add different types of content, you’re ready to enhance the user experience by adding some interactivity to the site!

Example of certificate of achievement
Example of certificate of achievement