• 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

Implement Your Page Structure

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

In the previous chapter, you saw how the page design could be broken down into the header, footer, and content sections.

Now that you have a good idea of how you’re going to implement the structure, it’s time to start building the pages!

Containers

Let’s start with the most basic layout element in Bootstrap, the container. Wrapping your content in a div with the  .container  class creates a centered container that adapts to the width of the viewport and provides horizontal padding for its contents, so they don’t push up against the edges.

<div class="container">
<!-- Content here -->
</div>

If you want the content to always take up 100% of the width of the viewport, then you can use the  .container-fluid  class instead.

Let’s Give it a Try Now!

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Bootstrap Grid

Bootstrap 4 has a powerful and flexible grid system that can be used to build all kinds of layouts.

In addition to containers, the Bootstrap grid uses a series of rows and columns to layout content on the page.

Rows are wrappers for columns, and content is placed within columns. So what does that mean in practice?

A representation of the nesting of Bootstrap 4 grid elements showing a container div that contains a row div. The row div contains two column divs.
Nesting of Bootstrap 4 grid elements

A row div is declared by giving it a .row class. For each column in the row, a div that is a direct child of the row div must be given one of the Bootstrap 4 column classes. The first of these column classes is the .col class. Take a look at this code snippet:

<div class="container">
<div class="row">
<div class="col">
First column
</div>
<div class="col">
Second column
</div>
</div>
</div>

You can see that there is one  .row  div with two  .col  children. Bootstrap has a 12-column grid, so in this case Bootstrap will automatically assign half of the columns to each of the  .col  divs, making each of them 6-columns wide—in other words, half the width of the row. So the general rule is that Bootstrap will divide up the 12 columns equally among the divs that are given the  .col  class.

Try It Out for Yourself!

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

But what if you want to specify the number of columns explicitly rather than leave it up to Bootstrap? For example, you might have a layout that doesn’t have equally-sized columns. Let’s say you have a row and want one column in that row to take up two-thirds of its width, and another column to take up the remaining one-third.

In this case, taking into account that a row in the Bootstrap grid is divided into 12 columns, you’d want one of the .col divs to take up four columns, and the other to take up eight columns. You would do this simply by appending each of those numbers to the respective .col class as shown in this snippet:

<div class="container">
<div class="row">
<div class="col-8">
First column
</div>
<div class="col-4">
Second column
</div>
</div>
</div>
Try Out These Numbered Column Classes for Yourself!

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Now you should be ready to start putting what you’ve learned into practice for the Space School site.

The design of the homepage for the example Space School website. It shows the full layout including a header section with the branding and a navigation bar; an image carrousel and information about the benefits of joining the Space School; as well as a fo
Homepage design for large screens

If you look at the design of the homepage in the image above, you’ll see the three main sections from the previous chapter for large screens: namely the header (with the navigation), the content area, and the footer.

To break it down a little more, the content section has two rows:

  • A row that contains the hero section (the promotional section at the top of the page with the large image).

  • A row that contains the three information cards

The following image illustrates the breakdown of the initial layout that you need to implement:

A representation of the nesting of Bootstrap 4 grid elements for the Space School home page. The page is wrapped in a container div that contains 4 row divs. The first row div contains one column div for the header section. The second row div contains one
Homepage grid layout

Put some placeholder text inside each column for now (for example, HEADER, HERO SECTION, INFO CARD, and FOOTER).

Once you’ve tried it yourself, you can check your work against the index.html file in the part-2/chapter-2/grid folder in the GitHub repository of the example site.

Let’s Recap!

  • The container, row, and column classes require a specific hierarchy when creating a grid in Bootstrap 4.

  • The Bootstrap grid is a 12-column grid.

  • Use the variations of the column classes to choose between automatic column width calculations or explicit column widths.

Now that you’ve learned how to implement the structure of the homepage using the Bootstrap grid, you’re ready to learn how to make it responsive to different screen sizes.

Example of certificate of achievement
Example of certificate of achievement