FAQ: Building with Bootstrap - The Jumbotron

Frequently Asked Questions Make & Deploy a Website FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises

This community-built FAQ covers the “The Jumbotron” exercise from the lesson “Building with Bootstrap”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Make a Website

FAQs on the exercise The Jumbotron

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Hey! I am doing this for the first time, so forgive any mistakes.

I am currenyly doing the “building with bootstrap” lesson and couldn’t help wondering: is what I am currently doing “inline CSS”? As all the customisations seem to be done on the HTML page and not the external css one.

Thanks for any replies!

1 Like
3

From the lesson overview page (can’t find the link!), the image of the 12-column grid included .col-span-3 class names. Since these are classes that Bootstrap gives CSS for, you assign the class and the CSS to make it span 3 columns happens.

It should work just the same as if you wrote the styling in your own CSS file for
.col-span-3 {column-span: 3;} yourself, right? (My apologies for any syntax errors!)

I’m just a noob too, so same disclaimer here: I could be totally wrong.
If we’re assigning classes like ‘text-right’ and ‘row’, I expect these are also styled to match.

.text-right {
  align-text: right;
}
/* and */
.row {
  row-span: 100%; /* tho this one feels incorrect */
}

(These might need to be some grid ‘justify-item’ -type declaration in the parent container. I’m still struggling with CSS grids generally, tbf.)

I think it isn’t inline CSS since we’re not applying any styles in the HTML, we’re just applying class properties. These act like shorthand styling so it’s more like linking to a stylesheet (like regular CSS you write yourself) than adding style as a property?

Inline CSS would be:
<div style="font-weight: bold;"> ... </div>

(<element style="property: value;"> is roughly correct! I checked with a coworker.)

4

In the example for the lesson, a container class is included under the jumbotron class like this:

<section class="jumbotron">
   <div class="container">
  ... 
   </div>
</section>

Why not just make the section a container? What is the point of the jumbotron class if all the child elements are under a container class?

5

Jumbotron can be used without a container but here in the lesson CC is making you style with it as the result is different and they are aiming for that outcome.

Please read Bootstrap document to get an understanding: Jumbotron · Bootstrap

having multiple classes on one element with contradicting styling is never a good idea and most likely won’t work.

6

Why do we need to create separate

tags for the “container” class and the “row text-center” class? Here is the code:
7

In the fragment:

<section class="jumbotron">
  <div class="container">
    <div class="row text-center">
      <h2>Homemade Goods</h2>
      <h3>This Year's Best</h3>
      <a class="btn btn-primary" href="#" role="button">See all</a>
    </div>
  </div>
</section>

why was role="button" attribute used?

8

I was wondering the same thing. I think it’s confusing here because there is only that one <div> child, but in theory when building an actual website you might have a background image or something that you want to span the whole width of the webpage. Changing that <section> element to class="container" would limit its contents to only taking up the 12 columns.

I thought of it as the section is the whole jumbotron, the first container div is a 12-column-wide box within the jumbotron, and then the subsequent row div is the first line in that 12-column-wide box.

Hope that helps!

10

This is what you need to study here:

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

1 Like