CODEWITHSUNDEEP
twitter-bootstrap
Philipp Nies
Philipp Nies

Reputation: 969

Bootstrap list-group-item with text-input and btn

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>

Upvotes: 2

Views: 12096

Answers (4)

Philipp Nies
Philipp Nies

Reputation: 969

@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.

Upvotes: 1

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

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>

Upvotes: 2

Monah
Monah

Reputation: 6784

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

Upvotes: 3

Crack_David
Crack_David

Reputation: 2843

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

Upvotes: 1

Related Questions