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