CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Adam Brown
Adam Brown

Reputation: 2870

Bootstrap 3 Full-width Jumbotron outside container after <header>

Starting out with Bootstrap 3 and just getting used to it.

I've copied the navbar from the Bootstrap 3 docs becuase it has the exact functionality that I want and why invent the wheel hey.

I want to put a Jumbotron after the header but I want it to be full width, so according to the docs I don't enclose it in a container div.

The problem is that when I omit the container div it slides back under the header but I want it to start where the header ends. If I put it inside a container it sits nicely under it.

Can someone show me where I'm going wrong and how to fix it without making some hack div that pushes it down. Many thanks.

I want to keep the container in the header tag becuase I don't want these elements stretching to the sides.

<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="../" class="navbar-brand"><img src="imagenes/logo.png" /></a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav navbar-right pull-down">
        <li class="">
          <a href="#">Menu</a>
        </li>
        <li class="">
          <a href="#">Galería</a>
        </li>
        <li class="">
          <a href="#">Calendario</a>
        </li>
        <li class="">
          <a href="#">BH Musicos / Talentos</a>
        </li>
        <li class="">
          <a href="#">Blog</a>
        </li>
        <li class="">
          <a href="#">Contacto</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<div class="jumbotron">
  <h1>Hello World</h1>
  <p>Testing one two three</p>
</div>

Upvotes: 3

Views: 16163

Answers (2)

me gusta mucho
me gusta mucho

Reputation: 1

Adding a container inside the jumbotron will also fix this.

Upvotes: 0

omma2289
omma2289

Reputation: 54629

If you look at the "Fixed to top" section on the navbar docs, there's an alert urging you to add padding to the body:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

Upvotes: 7

Related Questions