Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you'll learn how containers, rows, and columns work together to form Bootstrap's flexible grid system.
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
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 teachers
notes with this video.
0:43
So Bootstrap's mobile-first flexbox grid,
0:46
let's 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 other 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 teachers 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
it's 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
center 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 with 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 grade.
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