CODEWITHSUNDEEP
twitter-bootstrap
João Cunha
João Cunha

Reputation: 10307

Bootstrap - Input group button in List group Item

Hey I'm kind of a new guy in bootstrap but I was wondering how to do something.

I've been trying and searching but I can't seem to do it. Does anyone know how to get these:

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

Sorry I can't quite provide an image right now but on the bootstrap website it is here on Button Addons.

into a list-group-item? I want a button like that but on a list-group-item.

Can anyone help me?

Upvotes: 3

Views: 13601

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

Just nest the input-group into the list-group-item, like this:

<ul class="list-group">
  <li class="list-group-item">
     <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
        <input type="text" class="form-control">
    </div><!-- /input-group -->
  </li>
</ul>

If you don't want to have the additional padding, you could do something like this:

1.) Add a special class to the .list-group-item:

<li class="list-group-item group-btn">
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
        <input type="text" class="form-control">
    </div><!-- /input-group -->
  </li>

2.) Give it the following CSS:

li.group-btn {
  padding: 0;
}

Working Example (1. li is the basic example, the 2. li is without padding)

Upvotes: 6

Related Questions