Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
input-groups.html 12.38 KiB
1 
<div class="bs-docs-section">
2 
  <h1 id="input-groups" class="page-header">Input groups</h1>
3
4 
  <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code>&lt;input&gt;</code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
5
6 
  <div class="bs-callout bs-callout-danger">
7 
    <h4>Textual <code>&lt;input&gt;</code>s only</h4>
8 
    <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
9 
    <p>Avoid using <code>&lt;textarea&gt;</code> elements here as their <code>rows</code> attribute will not be respected in some cases.</p>
10 
  </div>
11 
  <div class="bs-callout bs-callout-warning">
12 
    <h4>Tooltips &amp; popovers in input groups require special setting</h4>
13 
    <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
14 
  </div>
15 
  <div class="bs-callout bs-callout-warning">
16 
    <h4>Don't mix with other components</h4>
17 
    <p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
18 
  </div>
19
20
21 
  <h2 id="input-groups-basic">Basic example</h2>
22 
  <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
23 
  <p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
24 
  <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
25 
  <form class="bs-example bs-example-form" role="form">
26 
    <div class="input-group">
27 
      <span class="input-group-addon">@</span>
28 
      <input type="text" class="form-control" placeholder="Username">
29 
    </div>
30 
    <br>
31 
    <div class="input-group">
32 
      <input type="text" class="form-control">
33 
      <span class="input-group-addon">.00</span>
34 
    </div>
35 
    <br>
36 
    <div class="input-group">
37 
      <span class="input-group-addon">$</span>
38 
      <input type="text" class="form-control">
39 
      <span class="input-group-addon">.00</span>
40 
    </div>
41 
  </form>
42 
{% highlight html %}
43 
<div class="input-group">
44 
  <span class="input-group-addon">@</span>
45 
  <input type="text" class="form-control" placeholder="Username">
46 
</div>
47
48 
<div class="input-group">
49 
  <input type="text" class="form-control">
50 
  <span class="input-group-addon">.00</span>
51 
</div>
52
53 
<div class="input-group">
54 
  <span class="input-group-addon">$</span>
55 
  <input type="text" class="form-control">
56 
  <span class="input-group-addon">.00</span>
57 
</div>
58 
{% endhighlight %}
59
60 
  <h2 id="input-groups-sizing">Sizing</h2>
61 
  <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
62 
  <form class="bs-example bs-example-form" role="form">
63 
    <div class="input-group input-group-lg">
64 
      <span class="input-group-addon">@</span>
65 
      <input type="text" class="form-control" placeholder="Username">
66 
    </div>
67 
    <br>
68 
    <div class="input-group">
69 
      <span class="input-group-addon">@</span>
70 
      <input type="text" class="form-control" placeholder="Username">
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
</div> <br> <div class="input-group input-group-sm"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> </form> {% highlight html %} <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group input-group-sm"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> {% endhighlight %} <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2> <p>Place any checkbox or radio option within an input group's addon instead of text.</p> <form class="bs-example bs-example-form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> {% highlight html %} <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> {% endhighlight %} <h2 id="input-groups-buttons">Button addons</h2>
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-example bs-example-form"> <div class="row"> <div class="col-lg-6"> <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 --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <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><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> {% highlight html %} <div class="row"> <div class="col-lg-6"> <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 --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <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><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> {% endhighlight %} <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2> <p></p> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li>
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
<li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> {% highlight html %} <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> {% endhighlight %} <h2 id="input-groups-buttons-segmented">Segmented buttons</h2> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <input type="text" class="form-control"> </div><!-- /.input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div><!-- /.input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> {% highlight html %} <div class="input-group"> <div class="input-group-btn"> <!-- Button and dropdown menu --> </div> <input type="text" class="form-control"> </div> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <!-- Button and dropdown menu --> </div> </div> {% endhighlight %} </div>