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

Question

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.

jeanpier_re · Accepted Answer · 2015-04-19 22:21:20Z

3

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>

edited Apr 19, 2015 at 22:21

answered Apr 19, 2015 at 22:17

jeanpier_re

8351 gold badge6 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

khan shah Over a year ago

Thanks for answer. But, the input group is covering whole page. I need to make it small and pull it right. Please help. class pull-right is not working..

jeanpier_re Over a year ago

Just wrap the row in class="col-lg-6 pull-right" or whatever size you want it to be.

jeanpier_re Over a year ago

Glad I could help. Best of luck to you.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related