CODEWITHSUNDEEP
csstwitter-bootstrap
Jeremy
Jeremy

Reputation: 1835

Bootstrap 3 Grid Overlapping Everything Else

I am using the grid system (Bootstrap 3.3.4) to try to make about four columns. The only problem is it puts the grid in the background. And the footer just sits on top of everything in the grid. Here is the jsFiddle, notice how the last little bit of text is cut off by the navbar on the bottom. Here is my code:

<div class="jumbotron">
   <h1>Example page header</h1>
</div>

<div class="col-md-2">
    <div ng-repeat="category in main_business_categories">
        {{category}}
    </div>
</div>
<div class="col-md-2">
    <p>column2</p>
</div>
<div class="col-md-2">
    <p>third</p>
</div>
<div class="col-md-6">
    <p>fourth</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <a href="https://github.com/JeremyCraigMartinez">Made with love by Jeremy Martinez</a>
  </div>
</div>

How do I get it to where everything (header, footer, and text in grid) are all on the same depth. Right now, grid is in background and everything else is in foreground.

Upvotes: 1

Views: 506

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

First you should wrap your columns inside a .container or .container-fluid and .row: https://jsfiddle.net/bhbhv38f/2/

The .navbar-fixed-bottom cause the behaviour you describe. You should remove that class to get the footer at the end of your content, see https://jsfiddle.net/bhbhv38f/3/

Upvotes: 2

Related Questions