Twitter Bootstrap Question posted in

Align All Elements in One Horizontal Row in Twitter Bootstrap Navbar

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

enter image description here

Desired

enter image description here

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;
}
Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
  4. 0

    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;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search