Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Styling Content7:29 with Guil Hernandez
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.
Bootstrap 4 alpha has changed since this video was shot. Here are the needed changes for your code:
Three big changes for the spacing section of the video, where margins are added to the top of the headline and bottom of the paragraph:
- Bootstrap no longer uses class names like this
p-t-3to define the location, size and type of spacing (padding or margin). They've decided to remove the first hyphen character, so the correct class name would be
- The spacing values discussed in the video no longer reflect full REM values. In other words,
pt-3does not add 3 rem to the top padding. It actually is just 1 rem. To get the spacing above the headline as seen in the video the top margin should be
Top padding for the container
To add the top padding to the container as pictured in the video use this code:
<div class="container pt-5">
Bottom margin for the headlines
To add the bottom margin to the container as pictured in the video use this code:
Bootstrap 4 alpha v6 removed the image shapes classes. However you can get the same affect with border radius classes. In addition, you need to update the bottom margin class (see above notes for an explanation). So for the image in this video use this code:
<img class="mb-3 img-fluid rounded" src="img/pdx.jpg" alt="Portland">
The text centering and spacing classes have changed, so for the two
<h1> tags added in this video, use this code:
<!-- speakers --> <h1 class="display-4 text-center my-5 text-muted">Speakers</h1> [Speaker bios go here] <!-- schedule --> <h1 class="display-4 text-center my-5 text-muted">Schedule</h1> [Conference schedule goes here]
Before we get into some of the grid options and configurations,
let's add more content to the columns.
Then style it using Bootstrap's content, typography, and utility classes.
So first, the content on the page would look better if there were a little more
space between it and the top of the page.
So I can apply top padding to the container
using Bootstrap's spacing utility classes.
Just like the margin utility classes we used in the coming soon page,
we can quickly set the vertical and horizontal padding of an element.
So to apply top padding, I'll give the container the class p-t for padding top.
Followed by the amount of padding in rems.
So I'll say, 2 rems of top padding.
And while we're at it, let's also give the h3 elements inside
each column a bottom margin to separate them from the paragraphs and list.
This time I'll use the class m-b-2.
So, now I'll go ahead and copy this class attribute and
paste it in my other two h3 tags.
And that looks much better.
So now, in the first column, I'm going to add an image of Portland,
Oregon, the city that's hosting Fulls Stack Conf.
So right below the h3 for About Fulls Stack Conf, I'll add an image tag.
The image is located in the img directory of our workspace, and it's named pdx.jpg.
And I'll give the image a bottom margin of 1 rem
with the class m-b-1, or margin-bottom 1.
So, right away you can see that the image is huge.
The image's original size is 1024 by 436 pixels, so it's taking up the entire page.
We need to make the image responsive so that it scales with the parent column.
This is an easy fix because Bootstrap provides a class for
identifying responsive images.
So if I give my image the class img-fluid.
Notice how the image scales with the column.
So now it will never be wider than the column width.
While we're in the section of the docs,
let's see what other image classes we can use.
So, it looks like we can change the shape of an image with these
image shapes classes.
This looks useful.
We can use the class img-circle to give an image a circular shape like this.
We can also make images look like thumbnails with the class img-thumbnail.
Now, I think the rounded shape better fits the design we're creating.
So, I'll go ahead and copy the img-rounded class from the snippet and
paste it in my images class attribute.
All right, the image looks good.
So let's quickly lay some groundwork for
the other content sections of our site, the Speakers and Schedule sections.
So in the container, right below the closing tag for
the about content, I'll add new comments so
we can easily locate the Speakers and Schedule sections in our code.
So first I'll add a comment for speakers, and
right below I'll add a comment for schedule.
Now, we'll create headings for these two sections.
So below the speaker's comment, I'll add an h1 tag with the text Speakers.
We'll build these two sections out in the next part of the course, but
in the meantime I'll add placeholder text below the headings.
So for Speakers, I'll write, Speaker bios go here.
And below the schedule comment, I'll add an h1 tag for Schedule.
And placeholder text that says, Conference schedule goes here.
Now, the site mockup shows that the Speakers and
Schedule headings should be larger and centered in the page.
So, I'll use a display heading class to increase the text size.
I want the headings to stand out slightly, so
I'll use the class display-4 for both of them.
And now to center align the headings, I can use the same text alignment
class we used to center align the content earlier in the coming soon page.
So in the speakers h1 class attribute,
I'll type the class text xs-center.
And I'll go ahead and copy and paste it into the schedule heading.
Now the xs in the class name simply means that the text will be center aligned
on all viewport sizes from extra small devices to extra large devices.
So now let's add top and bottom margins to the headings
to separate the heading from content placed above and below them.
By now you know that we can use spacing utility classes for top, right, bottom,
left, margin and padding.
Besides the individual side properties, Bootstraps gives us shorthand properties
to set both the top and bottom margin or padding, the left and right margin or
padding, and even to set padding or margins on all four sides.
To apply vertical margins that is top and bottom margins,
use the class m-y followed by the margin amount.
So, I'll apply a top and bottom margin of 3 rem with the class m-y-3.
Now to give an element left and right margins at once,
you can use x and the class name.
And to apply margins on all four sides, use a, which stands for all.
I'll stick with the class m-y-3 and apply it to the schedule heading as well.
Finally, I'll add some variety and
contrast to the page by lightening the heading color with a utility class.
Now, I like the medium gray color of this text.
So, I can apply this color to my headings by giving them the class, text-muted.
So I'll go ahead and copy it and paste it in both my speakers and schedule headings.
All right, so in the next video you'll learn more about predefined classes for
creating grid columns and controlling how columns display in a given breakpoint.
You need to sign up for Treehouse in order to download course files.Sign up