If you look at the twitter-bootstrap website their jumbotron touches their nav-header. That's what I'm trying to replicate.

I added it to the top of my valuations index like so:

<div class="jumbotron">
 <div class="container">
  <h1>Values <small>subjective, put here whatever inspires you. </small></h1>
 </div>
</div>

I also tried it without the container even though bootstrap says,

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

Is it because my application.html.erb is broken down into columns and so the jumbotron will only expand to the width of the col-md-9?

<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
  <%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="container-fluid">
  <div class="container">
    <div class="col-md-9">
      <%= yield %>
    </div>
    <div class="col-md-3">
      <% if current_user.present? %>
        <%= render 'layouts/sidebar' %>
      <% end %>
  </div>
</div>

I tried putting in its own partial but then there was padding between the nav-header and the jumbotron that I don't want. Like I said I want it like the bootstrap site. The other problem with a partial is I'd need a lot of them because I want to change the words in the jumbotron depending on the page.

How can we do it like bootstap?

Thanks for your time!

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"> 
      ...