How to Make a Full-Width Jumbotron

Bootstrap jumbotron full width and height of window with background image

So we have 3 issues here:

Remove excess space under navbar

The default bootstrap navbar has a margin-bottom: 20px, you want to override that like this:

.navbar {
    margin-bottom: 0px;
}

Make jumbotron full width

Bootstrap's documentation says:

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

So basically:

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Make jumbotron full hight

I'm not sure how cleanly this will fit into your project, but you can try something like:

.jumbotron{
    height: 100vh;
}

*A good-to-know: The vh stands for viewport height

Full width jumbotron image

Make the img width 100%..

.widewrapper {
  width:100%;
  }

.widewrapper > img {
  width:100%;
}

Bootply

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.

BootStrap Jumbotron width

.mycustom-jumbotron {  border:10px solid #003366;  width: 300px;  margin: 0 auto}

<meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="jumbotron mycustom-jumbotron text-center">  <h1>Bootstrap</h1>  <p>Bootstrap Web Design</p> </div>

How to make a full-width jumbotron?

Yes, it's because whatever is rendered in the <%= yield%> gets wrapped in col-md-9. You can either:

close col-md-9 in views where you want to have the full-width jumbotron, and re-open it again in the footer.
don't use col-md-9 in application.rb if most of your views need to be expanding to full width.

EDIT:

To avoid repetition, you can paste the jumbotron styling in between your layouts/header and container-fluid, and use a variable for populating it with page-specific text. Here is what I mean:

<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
  <%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="jumbotron">
  <p class="text-center">
  <%= @jumbotext %> <!-- this variable should be assigned in your controller action-->
  </p>
</div>
<div class="container-fluid">
  <div class="container"> <!-- check this too. not sure why you have two containers-->
    <div class="col-md-9"> 
      ...

Jumbotron background image isn't showing full-width

I think your problem might be the default margin or padding on the html and body tags. Try:

html, body {

    margin: 0px;
    padding: 0px;

}

Not sure if that will work, but it's worth a shot.