Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to add some space after Bootstrap navbar?

The following code displays a navbar always on the top of the page. I need the second container (content) to be positioned at the end of the navbar and not under it. At the moment second container is under the navbar.

I could add some empty space on the top of the content are, but I am not sure it is a good approach. Any idea how to solve it?

enter image description here

 <div class="container">
        <div class="row">
            <div class="container">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                </nav>
            </div>
        </div>
        <div class="row">
            <div ng-view></div>
        </div>
    </div>
Solution

  • Updated 2018

    Bootstrap 3

    According to the Bootstrap docs (http://getbootstrap.com/components/#navbar-fixed-top) you should use padding-top on the body..

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

    body { padding-top: 70px; }

    Demo: http://www.bootply.com/Ob3Bajkv1f

    Bootstrap 4

    Padding is also recommended for the fixed-top Navbar in Bootstrap 4 to prevent content hiding at the top of the body. You can add custom CSS for padding-top or use the pt-5 utility class on the body tag:

    <body class="pt-5"></body>