Twitter Bootstrap Question posted in

Bootstrap list-group-item with text-input and btn – Twitter bootstrap

i need some help with twitter bootstrap.

I have a list group with n items. Every item has a name, needs a remove button and a litte text-input box.

------------------------------------
|        ______________     ___     |
| NAME   |  TEXT INPUT |   | X |    |
|        --------------     ---     |
------------------------------------

I tried out a lot of methods, with input-groups… but i didnt get a nice result.

Here is one of my tries

<a class="list-group-item" href="#">
    ITEM NAME
    <div class="input-group input-group-sm pull-right">
        <input class="form-control" type="text" >
    </div>
</a>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    @Faisal Ashfaq

    I tried out your code, in jsfiddle it looks pretty nice, but in my application I get a sizing bug.

     <div class="list-group">
      <div class="list-group-item">
            <div class="input-group">
                <span class="input-group-addon">NAME</span>
                <input type="text" class="form-control" placeholder="Suchbegriffe">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-success">+</button>
                </span>
            </div>
      </div>
 </div>

    It looks like this

    The Add Button is a little bit smaller then the other elements.


  2. 0

    Referring to https://getbootstrap.com/components/#input-groups:
    You tried that one?

    <div class="input-group">
  <span class="input-group-addon">TEXT</span>
  <input type="text" class="form-control" aria-label="your text">
  <span class="input-group-addon">x</span>
</div>

    https://plnkr.co/edit/YyTtOzx7cro5DPw6qzmz?p=preview

    Login or Signup to reply.
  3. 0

    You can do the following

    <div class="col-md-12">
  <div class="form-group">
    <label for="nameText" class="control-label">Name</label>
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button id="nameText" type="button" class="btn btn-warning">
          X
        </button>
      </div>
    </div>
  </div>
</div>

    here a working demo

    and also you can do the following if you want to display the “Name” as a part of the text

    <div class="col-md-12">
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">Name</span>
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-warning">
          X
        </button>
      </div>
    </div>
  </div>
</div>

    here another working demo

    Login or Signup to reply.
  4. 0

    You can try following:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><br/><br/><br/><br/>
<div class="col-md-12">
  <div class="list-group">
    <div class="list-group-item">
      <div class="input-group">
      <span class="input-group-addon" id="basic-addon3">Name</span>
      <input id="nameText" type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger">
          X
        </button>
      </div>
    </div>
    </div>
  </div>
   
    
  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search