CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Don Kooijman
Don Kooijman

Reputation: 803

bootstrap navbar how to give it a max width

I can't get this to work.

I've got a nav bar

<div class="container">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="pull-right">
        <button class="btn btn-small btn-primary">Nieuwe medewerker</button>
      </div>
    </div>
  </div>
</div>

Now this is a nice bar width the width of the container, it's centered in the middle, exactly how I want it.

Now I want this exact bar to be fixed to bottom, however when I add navbar-fixed-bottom, it automatically stretches to my window size. 

<div class="navbar navbar-fixed-bottom">

I've been trying to adjust the css but can't get it to work. Someone has a idea of how to do this.

thanks

Upvotes: 1

Views: 840

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

The navbar-fixed-bottom uses position:fixed so it's removed from the flow of the page and no longer takes the width of it's container.

You could instead make another class (ie; navbar-bottom) and use position absolute to place it on the bottom...

.navbar-bottom {
    position:absolute;
    bottom:0;
    width:90%;
    margin-bottom:0;
}

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

Upvotes: 2

Related Questions