Align All Elements in One Horizontal Row in Twitter Bootstrap Navbar

Question

I'm encountering issues keeping all 3 components of the Bootstrap-based navbar in one horizontal row. This navbar has fluid width.

Question: How can we tweak the code to get all the 3 items (from left to right: a, form and ul) to be arrange in one line? The form should take 100% of the space remaining betweem the orange color a and the Login/Signup ul.

Bootply: http://www.bootply.com/oEkHN0DVmE

Currently

Desired

HTML

<nav class="navbar navbar-default navbar-fixed-top">

    <a class="brand" href="#">
        <img src="/img/logo-white.png">
    </a>

    <form role="form" class="form-horizontal search-form">        
        <!-- <i class="fa fa-search"></i> -->
        <input type="text" class="form-control" placeholder="Search">
    </form>

    <ul class="nav navbar-nav pull-right">
        <li><a href="/users/sign_in">Login</a></li>
        <li><a href="/users/sign_up">Sign up</a></li>
    </ul>

</nav>

CSS

.brand {
    width: 170px;
    height: 80px;
    background-color: #fc4310;
    display: inline-block
}

.search-form {
    width: 100%;
    height: 30px;
    display: inline-block;
}

Enclose `a` and `form` tags in `ul` also. – Sachi Tekina Dec 14 '15 at 05:30 — Sachi Tekina, Dec 14 '15 at 05:30

score 3 · Accepted Answer · edited May 23 '17 at 12:00

Very simply:

nav { display: flex; }

That aligns all nav child elements in a single row.

For spacing the elements on the row, see options here: Methods for Aligning Flex Items

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

score 1 · Answer 2 · answered Dec 14 '15 at 06:17

Did some changes to your code...

I hope this will help you..

refer this demo

added navigation header

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <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="#"><img src="//placehold.it/100x50"></a>
    </div>

and change the form little bit with css

<form class="navbar-form">
        <div class="form-group" style="display:inline;">
          <div class="fill">
            <input type="text" class="form-control" placeholder="Search"><span class="btn"></span>
          </div>
        </div>

.fill {
  position: relative;
  display: table;
  border-collapse: separate;
}

.fill .form-control {
  width: 100%;
  margin-bottom: 0;
  display: inline-block;
}


.fill .btn {
  white-space:nowrap;
  width:1%;
  display: table-cell;
}

.navbar-brand{
    padding:0;
    margin-right:15px;
  }

score 0 · Answer 3 · answered Dec 14 '15 at 05:31

Use the gird sistem:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="col-lg-2">
    <a class="brand" href="#">
        <img src="/img/logo-white.png">
    </a>
  </div>
  <div class="col-lg-8">
    <form role="form" class="form-horizontal search-form">        
        <!-- <i class="fa fa-search"></i> -->
        <input type="text" class="form-control" placeholder="Search">
    </form>
    </div>
<div class="col-lg-2">
    <ul class="nav navbar-nav pull-right">
        <li><a href="/users/sign_in">Login</a></li>
        <li><a href="/users/sign_up">Sign up</a></li>
    </ul>
  </div>
</nav>

http://www.bootply.com/rV9ZF8sO7N

score 0 · Answer 4 · answered Dec 14 '15 at 05:36

0

Change some css

  .search-form {
      width: 83%;
      height: 30px;
      display: inline-block;
  }
 .search-form input{margin-top:35px}
 .nav.navbar-nav{margin-top:25px;}

http://www.bootply.com/YFnjNIZ7Wo

answered Dec 14 '15 at 05:36

Lalji Tadhani

14,041
3
23
40

Align All Elements in One Horizontal Row in Twitter Bootstrap Navbar

4 Answers4