CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
khan shah
khan shah

Reputation: 1251

How to make input group inline to a list elements in bootstrap?

I want to make input group inline in a list. I wrote the following code :

<div class="container-fluid">
  <div class="row">
    <ul class="list-inline pull-right">
      <li>
       <button class="btn btn-info">
          <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
        Cart  <span class="badge">0</span>
      </button> 
      </li>
      <li>
         <div class="input-group">
          <input id="address" placeholder="City or Zipcode" class="form-control" type="textbox">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="addressSearch">Search</button>
          </span>
        </div>
         </li>
    </ul>
  </div>
</div>

I am not getting input group inline. Please help me to solve this.

Upvotes: 0

Views: 1687

Answers (1)

jeanpier_re
jeanpier_re

Reputation: 835

You can wrap the first button and the group of elements that you want to in-line with the .input-group class. I am note sure if you're attached to using unordered lists but the code is more expressive if you use spans since what you're representing in on the page is not an unordered list of items.

  <div class="container-fluid">
  <div class="row">
    <div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-info">
                <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                Cart  <span class="badge">0</span>
            </button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.row -->
</div>

Upvotes: 3

Related Questions