Bootstrap is an input group button in a list group.
Hey, I'm kind of like the new guy in bootstrap, but I was wondering how to do something.
I tried and searched but I cannot seem to do it. Does anyone know how to get them:
<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 provide an image right now, but the bootstrap site here at Button Addons.
in a list-group-item
? I want a button like this, but in a list-list item.
Can anyone help me?
source to share
Just paste input-group
in list-group-item
, for example:
<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 an extra padding, you can do something like this:
1.) Add a custom class to .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 basic example, 2.li without padding)
source to share