1

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.

Jeremy
  • 1,717
  • 5
  • 30
  • 49

1 Answers1

2

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/

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • This works, so thank you! But how do I (1) remove that small space between the footer and the bottom of the webpage, and (2) make the containers width the width of the webpage? – Jeremy Apr 03 '15 at 07:27
  • (1) use in your css / less `.navbar {margin-bottom:0;}` (2), see also http://stackoverflow.com/questions/19164377/reduce-the-gutter-default-30px-on-smaller-devices-in-bootstrap3/19179407, use `padding:0;` for you `.container-fluid` and (or) `.col-*` classes – Bass Jobsen Apr 03 '15 at 07:53