Navbar covering text (Bootstrap)

Question

I finally started playing around with twitter bootstrap a little but. Im trying to center some text in the middle of the page, however the Navbar is covering part of it. Can somebody help? Im still new to bootstrap and web design in general.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/bootstrap.min.css" rel="stylesheet">


      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <style type="text/css">
  .container{
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
  vertical-align:text-bottom;
  }
  .starter-template{

  }

</style>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 class="navbar-brand" href="#">Me</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>
    </div>




    <script src="https://code.jquery.com/jquery.js"></script>

    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

possible duplicate of [twitter bootstrap navbar fixed top overlapping site](http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site) — Adrift, Jan 20 '14 at 20:18

score 4 · Answer 1 · answered Jan 20 '14 at 20:25

4

When using .navbar-fixed-top, you have to add padding to the top of the body.

body {
    padding-top: 50px;
}

answered Jan 20 '14 at 20:25

Joe Conlin

5,976
5
25
35

this saved me tons of hours – tatskie Aug 02 '18 at 13:53

score 0 · Answer 2 · answered Jan 20 '14 at 20:22

One solution is just to center the text.

text-align:center

Another solution is to center the block.

<!--Stack the columns on mobile by making one full-width and the other half-width-->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop-->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Navbar covering text (Bootstrap)

2 Answers2