Geek Answers Handbook

Bootstrap Jumbotron does not become full body width

Hi, I'm trying to fix my Jumbotron to be full screen width, but somehow it needs 15px padding-left, padding-right . If I remove the padding, a horizontal scrollbar will appear with a 30px right margin . I am using Default Bootstrap ver 3.0.3 and the standard layout of VS2013. According to this link

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

 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 do not touch Bootstrap CSS, which I updated with Nuget.

+6
source share
6 answers

Hi guys, the solution was simple since I share 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 in any part of CSS. I don’t know why it works, but it just works.

+2
source

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

Code

Before

After

+4
source

If you are just trying to remove the add-on, then you will want to put padding:0; into your .specialjum and make sure the custom stylesheet is called after loading. Otherwise add padding:0!important; if you need to call it earlier. Also repeat this for margin-right: and add width:100%; if it does not stretch to the width of the page, which, I believe, should already be.

See this jsFiddle

+1
source

For someone else that might end here, I have an alternative solution. I ran into this problem, but I just couldn't take my Jumbotron outside the container. What I did is simply wrapped in <div class="row"></div> . I am still studying bootstrap, so I don’t know if this will lead to any problems in the future, but so far it works very well.

+1
source

To make the jumbotron full width and without rounded corners, place it outside of all .containers and add a container instead.

+1
source

Change the width of the .container to 100%:

 container { width: 100% }
0
source

More articles:


All Articles