I try to make a tag list (like in stackoverflow) using a bootstrap 3 input group.
The result should look similar to this with a full height button on the right:
The base for my considerations looks like this:
<!-- language: lang-html --><div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
Here is my attempt to make a tag list out of it (please note that it should have multiple lines)
HTML:
<!-- language: lang-html --><div class="container-fluid">
<div class="input-group">
<div class="form-control">
<ul>
<li><span class="label label-default">Default</span></li>
<li><span class="label label-primary">Primary</span></li>
<li><span class="label label-success">Success</span></li>
... even more labels ...
<li><span class="label label-default">Default</span></li>
<li><span class="label label-primary">Primary</span></li>
<li><span class="label label-success">Success</span></li>
</ul>
<input type="text">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
CSS:
<!-- language: lang-css -->ul {
padding-left: 0;
display: inline;
list-style-type: none;
}
li {
display: inline-block;
}
However, that doesn't work as expected.