"CSS Layout Basics" was retired on July 12, 2021. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Bootstrap Basics!
You have completed Bootstrap Basics!
Preview
Before we start using the grid options and configurations, let's add more content to the columns, then style it using Bootstrap's content, typography, and utility classes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Before we get into some of the grid
options and configurations,
0:00
let's add more content to the columns
then style it using Bootstrap's content,
0:03
typography, and utility classes.
0:08
First the content on the page would
look better if there was a little more
0:10
space between the headings and
the top of the page.
0:13
Well I can apply top
padding to the container
0:17
using Bootstrap's spacing utility classes.
0:20
Just like the margin utility classes we
used earlier in the Coming Soon landing
0:23
page, we can quickly set the vertical and
horizontal padding of an element.
0:27
So to apply top padding,
I'll give container
0:32
the class pt for
padding top followed by the size.
0:36
I'll use 4 which applies 1.5 rem
of top padding.
0:41
And while we're at it,
let's also give the h3 elements a bottom
0:44
margin to separate them from
the paragraphs and list.
0:49
This time I'll use the class mb-4 which
will apply a bottom margin of 1.5 rem.
0:53
So go ahead and copy this class attribute,
1:00
paste it inside the second h3's
opening tag and the third H3.
1:03
And that looks better.
1:10
Now in the first column I'm going
to add an image of Portland,
1:11
Oregon, the city that's
hosting Full Stack Conf.
1:17
So right below the h3
I'll add an image tag.
1:21
The image I wanna use is located inside
the image directory of our workspace and
1:29
it's named pdx.jpeg.
1:34
So in the source attribute
we'll add img/pdx.jpg.
1:38
Let's also include some alt
text that says Portland.
1:44
I'll also give the image a bottom margin
1:51
of 1.5 rem with the class mb-4.
1:56
I'll give this a save, and right away
you can see that the image is huge.
2:00
Well the image's original
size is 1024 by 436 pixels,
2:06
so it's taking up most of the page.
2:13
But we need to make the image responsive
so that it scales with the parent column.
2:16
Bootstrap provides classes for
opting images into responsive behavior so
2:22
they never become larger
than their parent elements.
2:27
So if I give the image
the class img-fluid,
2:31
The image will scale with the column, so
2:42
now it will never be wider
than the column width.
2:45
Back in the docs, click the utilities
link, and go to the Borders page.
2:48
And let's use a border utility to
apply a border radius to the image.
2:55
So we can change the shape of an element
with these border radius classes.
3:00
For example, a class rounded circle
gives an element a circular shape.
3:04
I think the first rounded shape here
better fits the design we're creating
3:09
because it applies a small
border radius on each side.
3:13
So back in my image element
I'll add the class rounded.
3:17
And the image looks good.
3:26
Now let's quickly lay some groundwork for
the other content sections of our site,
3:28
the speakers and schedule section.
3:32
So back in index.html,
inside the container rule,
3:35
right below the closing tag for
the about content, I'll add comments so
3:39
we can easily locate the speakers and
schedule sections in our code.
3:44
So first I'll add a comment for
speakers, and
3:48
below that let's add a comment for
schedule.
3:52
Now we'll create headings for
these two sections.
4:01
Below the speaker's comment,
4:04
I'll add an h1 tag with the text Speakers.
4:07
And we'll build these two sections
out in the next part of the course.
4:12
But in the mean time, I'll add place
holder text below the headings.
4:15
So for speakers,
I'll write Speaker bios go here.
4:19
And right below that I'll add a comment to
indicate where the speaker section ends.
4:27
Next, below the schedule comment,
I'll add an h1 tag for Schedule and
4:36
placeholder text that says
Conference schedule goes here.
4:43
And below that a comment that indicates
where the schedule section ends.
4:52
The site mock-up shows
that the speakers and
5:02
schedule headings should be larger and
centered in the page.
5:06
So I'll use a display heading
class to increase the text size.
5:11
I want the headings to stand out slightly,
so I'll give the h1s the class display-4.
5:15
And to center align the headings I can use
the same text alignment class we used to
5:30
center align the content earlier and
5:35
the coming soon landing page,
which is text-center.
5:37
Now let's add top and
bottom margins to each heading
5:47
to separate them from any content
placed above and below them.
5:50
By now you know that we can use spacing
utility classes where top, right,
5:55
bottom, left margin, or padding.
5:59
Well besides the individual
side properties,
6:02
Bootstrap provides short hand
properties to set both the top and
6:05
bottom margin or padding,
also the left and right margin or padding.
6:09
Even a shortcut to set padding or
margin on all four sides.
6:13
So to apply vertical margins,
that is top and
6:17
bottom margins,
use the class my followed by the size.
6:22
I'll apply a top and
bottom margin of 3 rem with my-5.
6:26
Now to give an element left and
right margins at once use x and
6:32
the class name, for example, mx-5.
6:36
And to apply margins on all four sides you
don't include a side, for example, m-5.
6:39
I'll stick with the class my-5, and
apply it to the schedule heading as well.
6:45
Finally I'll add some variety and contrast
6:57
to the page by lightning the heading
color with a heading typography class.
7:00
So back in the Docs I'll click Content,
Typography, and Customizing headings.
7:05
And I like the medium gray
color of this faded text.
7:12
So I can apply this color to my headings
by giving them the class, text-muted.
7:16
All right, so in the next video you'll
learn more about predefined classes for
7:30
creating grid columns and controlling how
columns display in a given breakpoint.
7:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up