CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user5357650
user5357650

Reputation:

Bootstrap max width

I'm trying to use Bootstrap for my website. I want to limit the max width to 1000px for large desktops while maintaining the responsive layout. This is what I have currently:

body {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

But this doesn't work for navbar. Is there a way to limit the entire page to this width including navbar?

Upvotes: 0

Views: 2883

Answers (1)

Raja Khoury
Raja Khoury

Reputation: 3195

You could instead give the .container class a maximum width on larger screen and wrap your navbar inside a container

@media (min-width: 1200px) {
.container {
   max-width: 1000px; // or better set the width to 1000px
  }
}

Here is a full screen demo

Keep in mind setting the .container class to 1000px will affect your entire site's width, if you wish to only have the .navbar fixed to this size then you can create a custom class and assign it to its parent container only.

@media (min-width: 1200px) {
.customclass {
   max-width: 1000px!important; 
  }
}

<div class="container customclass">
  <nav class="navbar navbar-default">
  </nav>
</div>

Upvotes: 2

Related Questions