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

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
Copyright kosukehorai ©


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

  <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=''>
<link rel='stylesheet prefetch' href=''>

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



<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>
          <a class="navbar-brand" href="#">Brand</a>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Left</a></li>
          <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>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Right</a></li>
        </div><!--/.nav-collapse -->
</header><!-- /header -->
  <script src=''></script>
<script src=''></script>




/*Downloaded from */
    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;