How to Change Navbar/Container Width? Bootstrap 3

Bootstrap3 - Change navbar size

You can apply the height css attribute to your navbar class and it will work

However you should do this in a separate css file and not modify
bootstrap's own css.

One thing that you should keep in mind is that when you include the css file in your html is that, it should be included after the bootstrap.min.css so that it will override bootstrap css.

.navbar {

  height: 80px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >

    <div class="container" >

        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">

                <li>

                    <a href="#" style="font-family: 'Roboto', sans-serif;">ACCUEIL</a>

                </li>

                <li>

                    <a href="#" style="font-family: 'Roboto', sans-serif;">BOUTIQUE</a>

                </li>

                <li>

                    <a href="#" style="font-family: 'Roboto', sans-serif;">CONTACT</a>

                </li>

            </ul>

          <ul class="nav navbar-nav navbar-right">

            <li>

              <a href="#" style="font-family: 'Roboto', sans-serif;">MON COMPTE</a>

            </li>

            <li>

              <div class="input-group-btn">

                <button type="button" class="btn btn-default btn-lg" style="background-color:orange">

                  <span class="glyphicon glyphicon-lock" ></span>

                </button>

            </div>

            </li>

          </ul>

      <form class="navbar-form navbar-right" role="search">

        <div class="input-group">

            <input type="text" class="form-control" placeholder="Recherche un produit">

            <div class="input-group-btn">

                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>

            </div>

        </div>

      </form>

          <!-- /.navbar-collapse -->

      </div>

    </div>

    <!-- /.container -->

</nav>

Bootstrap 3: Navbar not full width

I think this code looks fine as per your requirements.

<div style="border: 1px solid">  
  <nav class="navbar navbar-default" role="navigation">
    <div>
      <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Bootflat</a>
      </div>
    </div>
  </nav>
</div>

Please see here

Bootstrap navbar and containers exceed/overflow the max-width assigned

It's because bootstrap container has it's on width.

You better change container width in bootstrap.min.css instead of adding your div with 800px.

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
} 

You can change this to your value 800px.

Or Add max-width: 100%; to all your child tag.

---

Related Topics