Check out this code snippet here.
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div type="text" class="form-control">
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</div>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
I've experimented with various CSS properties like "white-space", "display:inline", etc. However, I'm facing a challenge where making the labels inline causes them to overflow the bootstrap column div. I'm looking for a way to constrain the width of div.input-group while ensuring it remains a single line containing div.form-control and div.input-group-btn.