The jumbotron is one of the easiest BS components, so it's a good place to start.

What is a jumbotron?

It's for highlighting key messages, like this:

It's also called a hero unit.

Making one

Let's make a jumbotron. We'll:

• Find some template HTML
• Paste it into our page
• Change it to do what we want

This is the process for all of the components.

You need to try it, to see how jumbotrons work. Make a page of your own, using the sample BS template given earlier. Leave the existing content there.

Find some template HTML

The best place is on the official BS site. There are other templates on the web, lots of them. If you use one, make sure it's for BS 4.

I always use templates from the official site, just to be safe.

Check out the official jumbotron page. It will show you an example, and then the code that makes the example.

Copy the code. It will look something like this:

Horizontal rule. A horizontal line. You can use it, or remove it. Your choice.

Paste the code

The next step is to paste the code into your page.

You know how.

Here's what I got:

W00f!

Customize the jumbotron

Here are the steps again:

• Find some template HTML >>Done<<
• Paste it into our page >>Done<<
• Change it to do what we want >>Now<<

Here's the code we have right now.

Let's break it down. The first thing is the jumbotron's title:

We run into our first issue. For a11y, it's best to use the hx tags carefully, so that they really reflect the structure of the document. Remember the rule-of-thumb: only give hx tags to things you would put in the table of contents (ToCs).

The heading in a jumbotron usually isn't part of the document structure. That is, it doesn't start a section of the document. And it would mess up programs that use hxs to make ToCs.

An easy fix. Replace it with:

It will look right, but not mess up the ToC.

We have:

The rest is clear enough, except for the button:

It's actually an a tag, though it looks like a button. You can change the look of it by messing with the classes. For example, this...

... looks like...

There's just one more thing. Here's the button code:

That's an a11y thing. When you intend a link to look like and act like a button, include role="button". It's part of the template, so you don't need to change anything.

Anything you want, apart from:

So if you wanted to just have a message:

Exercise

Up next

Let's talk about navbars.