Jumbotron occupies more horizontal space on smaller screens

[rlindner81]

When using a full-width Jumbotron (outside of any containers) and rendering to a small-width screen (below @screen-sm-min), the jumbotron uses horizontal padding, whereas on bigger screens it does not.

For the small-width screen case, any container inside the Jumbotron also uses the normal horizontal padding, so the Jumbotron's additional usage causes the Grid system to be misaligned there.

Fortunately, it's easy to fix. In less/jumbotron.less line 7 should be

.jumbotron {
  padding: @jumbotron-padding 0; /* changed */
  margin-bottom: @jumbotron-padding;

[thomasphorton]

Is the solution really that simple? Or do we need to think about what the intended use of the Jumbotron is in regards to the container elements?

I don't have any answers, just questions.

[rlindner81]

Well in my opinion, the behavior of the jumbotron in regards to the grid system should be consistent across all screen width.

So in order to get this consistency for the small-screen case I describe you need (at least) the change I pointed out. And I'm not aware of any other breakage, so if it exists, we'll have to cross that bridge when we get there...

[mdo]

The jumbotron can be used in three different ways right now:

• No container, outside or in
• Container inside
• Container outside

I put all three in a demo at https://jsbin.com/yozema/1/edit.

[mdo]

Punting as a won't fix/change. The proposal of nuking the side padding isn't viable as mentioned in #16406.

[rlindner81]

@mdo I had not seen your comment. Sorry for responding so late. Why do you want to behavior to be different for full-screen than for mobiles? That is just confusing.

Take your own demo http://jsbin.com/guhabuhuse/1/edit (I added a navbar on top to explain the grid problem better).

Consistency: On wide screens the "super basic" jumbotron has no inner padding but on small screens it does. That should be consistent.

Grid: Also imo just plain breaking the grid layout without a (legal) way to fix it is not an option. As you move the width of our example, you see that on wide screens the nav content is aligned with the "inner container" but on smaller screens it jumps and is aligned with "super basic" instead. So one jumbotron style never fully aligned with this nav style (from the official example) across all screen sizes.

[mdo]

Why do you want to behavior to be different for full-screen than for mobiles? That is just confusing.

In many cases the behaviors at different breakpoints are different :). However, looking at this again with your follow up comment, I do believe I made a mistake.

Consistency: On wide screens the "super basic" jumbotron has no inner padding but on small screens it does. That should be consistent.

Yeah, it's always super weird to undo stuff at certain breakpoints. I imagine the jumbotron is almost always used within a container—or with a container within. That first one looks great on mobile, but is kinda trash otherwise unless you've got only custom content in there.

Grid: Also imo just plain breaking the grid layout without a (legal) way to fix it is not an option.

The grid isn't broken, and there's nothing illegal about that 😁. It's designed to take up all the horizontal space it can. That means if there's additional padding on the parent, it will be a bit narrower than outside that parent element.

All that said though, I do think we can fix this now. Thanks for calling it out again :).