Bootstrap Jumbotron not becoming full width of Body
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.
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.
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