Bootstrap Jumbotron not becoming full width of Body

Question

Hi I am trying to fix my Jumbotron to be full width of the screen but somehow it need a 15px padding-left, padding-right. If I remove the padding the horizontal scrollbar appears with a 30px right margin. I am using the default Bootstrap ver 3.0.3 and default VS2013 layout. As per this link I removed the Jumbotron outside all .container my page looks sth like this

<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>

/////////////////////////////////////////////////

body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}
                    
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover; 
}

Edit: Firefox + Chrome + IE10 results ===|================|===

Any Ideas on how to fix the layout? I haven't touch the Bootstrap CSS which I updated using Nuget.

Have you tried adding the class `container-fluid` to the jumbotron div? — Jeremy, Dec 31 '13 at 17:29
Take a look at your page in a different browser, too. It could be some default markup added by whatever browser you're working in, although the normalize.css file in bootstrap 3 should take care of that. — Jerreck, Dec 31 '13 at 17:36
@Jerreck its the same in all browsers look at my edit to see what is happening. — Flood Gravemind, Dec 31 '13 at 17:38
your code is fine, there's something else going on. http://jsbin.com/aGoBUYob/1/edit — Christina, Dec 31 '13 at 17:44
@FloodGravemind I agree with cab. Could you post the rest of your markup? — Jerreck, Dec 31 '13 at 17:50
Also, read this thread: https://github.com/twbs/bootstrap/issues/10711 — Christina, Dec 31 '13 at 18:02
Hi guys I found a solution. But don't know why it works. See my answer. — Flood Gravemind, Dec 31 '13 at 18:08

score 6 · Answer 1 · answered May 11 '17 at 17:06

Just to share my experience after creating an MVC web application in Visual Studio 2013 I could not get the jumbotron to stretch the width of the screen no matter what I did. I ultimately found that it was being blocked by a default **container body-content tag on the Views/Shared/_Layout.cshtml page. After removing the tag it displayed correctly. Hope that helps anyone with a similar situation to mine.

score 5 · Accepted Answer · edited Jan 23 '21 at 07:42

5

The solution was simple. This is how I div it:

    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
    <div> <===================this Div wrapping jumbotron
    <div class="jumbotron specialjum">
    <div class="over container body-content">
    ....page headers and other stuff
    </div>
    </div>
    <p class="just container body-content">
    ... body text
    </p>
    </div>
    </body>

No changes to any part of the CSS. I don't know why it works, but it just works.

edited Jan 23 '21 at 07:42

peterh

11,875
18
85
108

answered Dec 31 '13 at 18:06

Flood Gravemind

3,773
12
47
79

11

It works because the createors of bootstrap are smart! From the bootstrap docs "To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within." http://getbootstrap.com/components/#jumbotron – nomis Feb 06 '15 at 20:21

score 2 · Answer 3 · answered Dec 31 '13 at 17:40

If you're just trying to remove the padding, then you'll want to put padding:0; in your .specialjum and make sure that the custom stylesheet is called after bootstrap. Otherwise add padding:0!important; if it needs to be called before. Also repeat this for margin-right: and add in width:100%; if it isn't stretching to the width of the page which I believe it should already.

See this jsFiddle

score 1 · Answer 4 · answered Oct 07 '16 at 06:21

For anyone else that may end up here I have an alternative solution. I ran into this problem, but I just couldn't take my Jumbotron outside of it's container. What I did is just wrapped it in a <div class="row"></div>. I'm still learning bootstrap so I don't know if this will cause any problems down the road, but for now it works pretty good.

score 1 · Answer 5 · answered Nov 05 '16 at 03:13

1

In order to make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

answered Nov 05 '16 at 03:13

Eldiyar Talantbek

764
7
9

score 1 · Answer 6 · answered Mar 01 '20 at 05:51

Another option in _Layout.cshtml (Where "Home" is the page you want to be full width):

@if (ViewData["Title"].Equals("Home"))
{
    @RenderBody()
}
else
{
    <div class="container container-main">
        <main role="main">
            @RenderBody()
        </main>
    </div>
}

score 0 · Answer 7 · edited Jul 09 '14 at 19:51

0

Change width of .container to 100%:

container { width: 100% }

edited Jul 09 '14 at 19:51

sushain97

2,752
1
25
36

answered Jul 09 '14 at 19:28

Mohammed Raja

207
2
9

Bootstrap Jumbotron not becoming full width of Body

7 Answers7

Linked

Related