bootstrap navbar left, right and center

In this example below you will see how to do a bootstrap navbar left, right and center with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kosukehorai, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kosukehorai ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>bootstrap navbar left, right and center</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<header id="header">
	<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Brand</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Left</a></li>
          </ul>
          <div class="nav navbar-center hidden-xs hidden-sm">
            <form class="search">
                <div class="input-group">
                    <input type="text" class="form-control" value="C"> <span class="input-group-btn">
                  <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
              </span>

                </div>
            </form>
          </div>
          
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Right</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</header><!-- /header -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/kosukehorai/bootstrap-navbar-left-right-and-center-kXVLGQ */
.navbar-center
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index: 3;
}
.nav .search {
  display: inline-block;
  margin-top: 8px;
  width: 80px;
}

Comments