Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

How the Bootstrap Grid Works

5:58 with Guil Hernandez

In this video, you'll learn how containers, rows, and columns work together to form Bootstrap's flexible grid system.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Code snippets

Quick start grid example:

<div class="container">
  <div class="row">
    <div class="col">
    </div>
    <div class="col">
    </div>
    <div class="col">
    </div>
  </div>
</div>

HTML for column 1

<h3>About Full Stack Conf</h3>
<p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
<p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>

HTML for column 2

<h3>Expert Speakers</h3>
<p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>

HTML for column 3

<h3>What You'll Learn</h3>
<ul>
  <li><strong>MongoDB</strong>: NoSQL database</li>
  <li><strong>Express</strong>: Framework for Node</li>
  <li><strong>React</strong>: JavaScript library</li>
  <li><strong>Node.js</strong>: JavaScript environment</li>
  <li><strong>ES2015</strong>: Latest version of JavaScript</li>
  <li><strong>Babel</strong>: JavaScript compiler</li>
</ul>

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Let’s begin laying out our page using Bootstrap's grid system. 0:00

To follow along using Workspaces. 0:03

Launch the Workspace with this video or 0:05

download the project files to use your preferred text editor. 0:07

In the Workspace I have a starter template setup in index.html, 0:11

along with an images folder containing the images we'll use in the site. 0:15

The template uses Bootstrap's CDN links, so it links to Bootstrap's CSS at the top. 0:20

And all Bootstrap plugins use jQuery, and a JavaScript library called Popper.js. 0:25

So the latest version of jQuery, Popper.js, and 0:31

Bootstrap's JavaScript file, are linked at the bottom of the document, 0:35

just before the end body tag, for performance purposes. 0:38

You can learn more about jQuery and 0:41

Popper.js in the teacher's notes with this video. 0:43

So Bootstrap's mobile-first flexbox grid, 0:46

lets you build layouts of all shapes and sizes using a 12 column system. 0:49

And there are three major components in Bootstrap's grid system. 0:54

Containers, rows and columns. 0:57

You can see an example of how these three components work together 1:00

to form the grid system here in the grid page. 1:04

For example, in the auto-layout columns demo, you can see that the container 1:07

centers your site's contents, and helps align your grid content. 1:13

Inside the container you add rows. 1:18

And rows are the horizontal groups of columns. 1:20

They ensure your columns line up properly. 1:23

Inside a row, you add columns. 1:26

Columns are immediate children of rows and they contain your content. 1:29

So any content in your grid should be placed within a column. 1:33

Rows can contain anywhere from 1 to 12 columns per row. 1:37

And the classes you assign each column, 1:41

specifies the width or the number of columns to expand. 1:45

The class can be a specific number of columns or 1:49

you can set columns to automatically layout with equal widths. 1:52

You'll learn more about column classes soon. 1:56

To start, let's create a simple grid layout for the, 1:59

About section of our website. 2:02

To add the grid to my page, I'll copy this equal width snippet from the docs 2:05

by clicking copy and pasting it into the body of my HTML. 2:09

I can adjust the code indentation in Workspaces, by selecting the content and 2:14

pressing Cmd or Ctrl followed by the closing square bracket key. 2:19

So I need one row and three columns to lay out the about content, so 2:24

I'll delete the extra row and add a third column inside my row here. 2:29

So I'll copy the second column and paste the new one below. 2:34

I'm also going to add a comment above the row, to indicate where the code for 2:39

the about content starts. 2:43

In Workspaces and in most text editors, you can press Cmd or Ctrl, 2:44

followed by the forward slash key, to create an HTML comment. 2:48

So this comment will say, about. 2:52

Then I'll add two other comments after the row and 2:55

containers' closing tags to indicate where they end. 2:58

So first we'll indicate where the about content ends and 3:01

right below we'll indicate where the container div ends. 3:07

We're going to be adding a lot of HTML to this page. 3:14

And with so much code in this file, it can be 3:16

difficult to determine where containers, rows, and columns start and stop. 3:20

So, you should get in the habit of adding code comments to identify 3:25

the components in a page. 3:28

So the predefined col classes, applied to the column div tags, 3:30

create three equal width columns and 3:35

extra small, small, medium, large, and extra large break points. 3:38

The columns are layed out side by side and centered in the page via the container. 3:42

So now let's replace this example text with the about content for 3:48

the first conf website. 3:53

And you can copy these exact snippets from the teacher's notes of this video or 3:55

from the final version of the project files. 3:59

So in the column, I'll add the, About Full Stack Conf content. 4:01

Then in the second column, the content about the expert speakers. 4:07

And then in the third column, 4:13

I'll paste in the content containing the topics you will learn. 4:17

So the container we used in both the coming soon landing page and 4:21

here in our grid, is a responsive fixed width container. 4:27

A fixed width container, is centered and 4:32

its width changes at each break point range. 4:34

So it resizes to the new width set for that break point. 4:37

But the container can also be fluid meaning, 4:41

it can be 100% wide at all times with the class container dash fluid. 4:45

The container now spans the full width of the view port so 4:53

it's no longer fixed and centered in the page. 4:57

Notice how the content fluidity adjusts to the size of the view port instead 5:00

of shifting to a new fixed width, as I reach a given break point range. 5:04

When a Bootstrap container is fluid, there´s no max width set on the container, 5:10

like there is when it´s a fixed width container. 5:14

So that means your content will keep expanding to the width of the view port, 5:17

no matter how wide it gets. 5:21

And this can make your content difficult to read in extra-large devices, 5:22

like wide desktop screens. 5:26

So I'm gonna stick with the responsive fixed width container for 5:28

my website, with the class container, because I like how it keeps my content 5:32

neatly centered while still applying a max width at each break point. 5:37

Keep in mind that containers are always required when using the Bootstrap grid. 5:43

But if you're creating a page without the grid system, you can still use containers 5:49

to make your content fluid or responsive and centered in the page. 5:53

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up