Bootstrapping the Jumbothrone

1

Hi all!

So I’ve just finished my Personal Portfolio assignment. It was a great experience for me to build it.
Here it is: https://codepen.io/Gudetama/pen/GyrxOZ
I have only one issue that I couldn’t find a solution for. Would love to get your help with it:

I wanted the jumbothron section to be centered and have some of the body background-color on the sides, so I did this:

.jumbotron {
      max-width: 70%;
      margin: auto;
    }

However, when changing the display to smaller screens, I’d like to remove these sides and basically change the width of the jumbothron to 100%.

So, how do I do that? What am I missing?

Thanks!!
Dan :wink:

2

You’ll use media queries. Here’s how you could do it:

.jumbotron {
  max-width: 70%;
  margin: auto;
}

@media screen and (max-width: 768px) { /* feel free to tweak this value */
  .jumbotron {
    max-width: 100%;
  }
}
3

Thanks, I’ll try that.

Actually, I found a different way to go around it:
I added a container class to the jumbothrone's div, and styled it this way:

    .jumbotron {
      margin: 0 auto;
    }
4

Didn’t know you could do that. Neat!

5

hi Gudetama,

you’re not using the jumbotron component as it was intended for.
it is a component for calling extra attention to featured content or information.
pretty much like a banner, not as a container for your entire page.

the class that’s associated with your issue is just .container
it has a pre-defined width value which gave your content side margins
so even without .jumbotron you’ll still have those margins
(as long as you have .container and does not override its css)

1 Like
6

Good to know. It makes much more sense now.
Thanks!