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
Next, let's work on the HTML for the profile section and the image gallery.
Resources
- Bootstrap 4 Basics: Layout in Bootstrap - Check out this video from the Bootstrap 4 Basics course for some helpful review.
- Bootstrap: Layout - If you need a refresher on how to use the Bootstrap 4 grid system, check out this link to the documentation.
Now we're finished with a header section,
0:00
let's just indent this properly and
remove this extra space.
0:03
And the next section is
the featured section, but
0:09
we're actually gonna leave this blank.
0:12
It's just gonna be a large image or
block of color that we'll add in later.
0:16
So, let's move on to this profile area.
0:20
I'll type this out and then explain it.
0:24
So let's open up this section, and
0:28
create a div with the class col, or
0:32
column, lg for large -4.
0:36
So at the largest responsive size,
this will take up 4 columns.
0:40
And then we'll also at
the class profile-info
0:47
to help us identify it
later if we need to.
0:52
And then I'm going to add an image inside
of this div with the class float-left.
0:57
So that the image is floated to the left
of a name and location text we'll add.
1:04
Then the source will be this image,
nickpettit.jpg, that I just added.
1:13
I'll include this with your workspace,
1:19
but feel free to add your
own image if you'd like.
1:21
So that's just a picture of me.
1:25
And then you should always
include some alternate text.
1:29
I'll say this is a Photograph,
Of Nick Pettit.
1:33
And then we'll close that image.
1:40
Then right after the image,
we'll use an h2 for
1:43
the name, And
feel free to type your own name there.
1:47
And then a paragraph with the class,
text-muted.
1:52
That's a bootstrap class
that we'll style this text.
1:58
And I'll put in my location of Orlando,
Florida.
2:02
But feel free to put in
your own location there.
2:05
So, to review this div is
going to be 4 columns across,
2:10
and inside, we have a profile picture.
2:15
And an h2 for a name, and
a paragraph for the persons location.
2:20
So right after this div, Let's
2:28
create another div with
the class col-lg-5, so
2:33
that will be 5 columns wide.
2:38
And inside of there, We'll type
2:41
a short paragraph about myself,
feel free to write about you.
2:45
We'll say Hi, my name is Nick!
2:51
I'm a teacher at Treehouse and
2:55
I enjoy designing websites.
2:59
So like I said,
this will be 5 columns across and
3:06
it will hold a short bio, or
other information about the designer.
3:10
And then finally, we'll add one more div,
3:15
With the class col-lg-3,
3:20
Inside there, and create a paragraph and
an anchor element with,
3:28
The class, btn for button.
3:36
btn-block, or a block-style button which
will fill up the width of the container.
3:40
And then btn-primary, or
3:49
button primary which will
give it a color of blue.
3:52
And then after that, add an href and
we don't need that to point anywhere, so
3:59
we will just put a hash.
4:04
And then inside,
we'll make this the Send Message button.
4:06
So we have 3 columns here,
which take up 4, 5, and 3 columns across.
4:13
And that will only occur if we're
at the largest responsive size.
4:21
Otherwise, this will collapse into
a column that's just one column
4:26
wide with all of these elements
stacked on top of one another.
4:31
So let's save this and take a look in
the browser to see where we're at.
4:36
Right now, this looks pretty messy
because nothing is sized properly.
4:44
The profile image dominates the page.
4:49
And the featured image is nonexistent
because it doesn't have any height or
4:52
content inside, and so forth.
4:57
We need to add CSS to make all
the elements proportional.
5:01
However at this point, we're still just
concerned with the basic HTML elements.
5:05
The CSS will come after the remaining
content is in place, so
5:09
let's work on the gallery now.
5:13
I'll switch back to our workspace,
type this out and then explain it.
5:16
So inside of the gallery, we're just
going to create a bunch of links.
5:21
So I'll create an anchor element that goes
no where, and inside I'll create an image.
5:26
And this image will also go nowhere.
5:35
So we'll just have a hash for
the source and
5:40
href, and
we'll create a whole bunch of these.
5:43
Here's one, two, three, four,
5:47
five, six, seven, eight, nine.
5:51
So here, we've just created this
container in gallery section, and
5:56
there's links with images inside.
6:01
If we save this and
look at it in the browser,
6:04
It won't look like anything at all yet,
because the images are blank and
6:11
the links are in line, so
they also appear blank.
6:16
In the next video, we'll start sizing
some of these content areas so
6:20
that they're proportional to one another
and actually take up some space.
6:24
You need to sign up for Treehouse in order to download course files.
Sign up