Geek Answers Handbook

How to make a full-sized jumbotron?

If you look at the twitter-bootstrap website , their jumbotron will touch them nav-header. This is what I am trying to reproduce.

I added it at the beginning of my assessment index as follows:

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

I also tried it without a container, although bootstrap says

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

Is it because my application.html.erb is split into columns and so will jumbotron only expand to width 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>

, nav-header jumbotron, , . , , . - , jumbotron .

bootstap?

!

+4
1

, , , <%= yield%>, col-md-9. :

  • col-md-9 , jumbotron, .
  • col-md-9 application.rb, .

EDIT:

, jumbotron layouts/header container-fluid . :

<%= 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"> 
      ...
+1

More articles:


All Articles