Building a Resume Website - Panels

Locked lesson.

Upgrade

About this lesson

Adding Work Experience with panels.

Quick reference

Building a Resume Website - Panels

Let's add some Panels to our website.

When to use

Panels are a great way to break apart different sections of a web page.

Instructions

To add a panel, copy and paste the Panel code from the Components section of GetBootstrap.com 

We want the Panel with heading code.

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Hints & tips

  • Panels are a great way to break apart content.
  • Panels are found on the Components page at GetBootstrap.com.
  • We want "Panels with Heading" for our project.
Login to download
  • 00:05 Okay so the next thing to do is add this panel thing.
  • 00:09 So let's head back to bootstrap and I'm in the component section still where we have
  • 00:14 our nav bar text, and if we scroll down a little bit.
  • 00:19 We got to go all the way down.
  • 00:23 Click on this panels.
  • 00:24 And we looked at this just earlier.
  • 00:26 This is how you do a panel.
  • 00:27 We want a panel heading, but we want to have a title in there.
  • 00:31 So look through here.
  • 00:33 This is the panel heading without a title.
  • 00:36 Looks like this is a panel heading with a title.
  • 00:39 So let's copy this.
  • 00:41 Normally we click the copy button,
  • 00:42 but I'm gonna highlight cuz we just want this part of it.
  • 00:45 And I'm gonna click Ctrl+C on my keyboard, command c on a mac, or
  • 00:48 you can right click and click copy.
  • 00:50 Either one works.
  • 00:52 So let's head back up here and remember we talked a few videos ago about
  • 00:56 the special tags in HTML5 and one of them was nav.
  • 01:00 Well you can see bootstrap is taking advantage of that tag right there,
  • 01:04 kind of interesting.
  • 01:05 So I'm going to paste this in here and let's save this and see what we got.
  • 01:10 So we have this panel title and it stretches all the way across here.
  • 01:14 And it has some text here.
  • 01:15 So what is my text?
  • 01:17 I listed myself as a Senior Full Stack Web Developer.
  • 01:20 So I come up here to our panel title section and slap that in there.
  • 01:25 CTRL+S to save it.
  • 01:27 We have Senior Full Stack Web Developer.
  • 01:29 Now here, I have this bold.
  • 01:32 So how would we do that?
  • 01:33 Well, we need to actually wrap this in a nested strong tag.
  • 01:39 Remember we talked about nesting earlier.
  • 01:41 Piece of cake.
  • 01:43 Save this, boom.
  • 01:45 Just like that, that works.
  • 01:46 So, let's look at this.
  • 01:48 This thing stretches all the way across, and that looks kind of funky.
  • 01:51 Here we've got it, it looks much better.
  • 01:53 How do we do this?
  • 01:54 How do we change this?
  • 01:56 Well, to go back to bootstrap, at the very top we click on CSS.
  • 02:00 And we looked at this earlier, but right here the top it mentions these containers.
  • 02:05 And bootstrap, it does work with something called containers.
  • 02:08 And we need to wrap everything in a container.
  • 02:11 It's just sort of how Bootstrap works.
  • 02:13 So if we come back here and we come back.
  • 02:15 We want this right below our nav bar.
  • 02:21 Let's tab all this over.
  • 02:26 And in fact, we want this to go all the way down to the body.
  • 02:30 Let's close that div tag and Tab this guy over a little bit.
  • 02:38 Make things line up all nice and neat.
  • 02:40 Okay, so if we save this and come back and
  • 02:42 hit reload, boom, it pulls that right over.
  • 02:44 And now all of this stuff is inside a container.
  • 02:47 And you notice on our web site, this goes flush with this.
  • 02:52 But, here, this is all the way over.
  • 02:54 Because this navbar is not in a container.
  • 02:57 If we come back here to the navbar, we see this container-fluid.
  • 03:02 If we delete the .fluid and save it, boom now you can see this gets
  • 03:07 pushed over flush with this and this link gets pushed over, mostly flush with this.
  • 03:13 Okay so let's take a look here we've got our one panel,
  • 03:17 then we've got another panel, and then we've got our education panel.
  • 03:22 I think we're gonna leave out this books written panel, but we need one,
  • 03:26 two, three panels, we have one already.
  • 03:30 So I'm just going to add in a couple of
  • 03:34 line breaks and paste this code again.
  • 03:40 Add in another couple of line breaks, And then paste this code again.
  • 03:46 And for here I'm gonna put education.
  • 03:51 And what was the other one?
  • 03:53 Programming technical skills.
  • 03:59 So paste that in there.
  • 04:00 Let's save this.
  • 04:02 Okay, we've got our three sections here, top resume section, technical skills,
  • 04:06 and education.
  • 04:07 In the next video, we'll talk about the bootstrap grid system and
  • 04:10 I'll show you how to change the layout of your site very quickly and easily.

Lesson notes are only available for subscribers.

Gift this course