Learn 'Mobile First' Web Design Using Bootstrap 3 by Rahul A. Sakla - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Chapter 11 Input Groups

 

11.1 Input Groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

 

 

Example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

  • Bootstrap do not support multiple add-ons on a single side.
  • img4.pngBootstrap do not support multiple form-controls in a single input group.

 

img213.png

 

img214.png

img215.png

img216.png

img217.png

 

11.2 Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize-no need for repeating the form control size classes on each element.

img218.png

img219.png

img220.png

img221.png

 

11.3 Checkbox And Radio Addon

Place any checkbox or radio option within an input group's addon instead of text.

 

img222.png

img223.png

img224.png

img225.png

img226.png

 

11.4 Button Addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use.input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

 

img227.png

 

img228.png

img229.png

img230.png

img231.png

 

11.5 Buttons With Dropdowns

 

img232.png

img233.png

img234.png

img235.png

img236.png

img237.png

img238.png

img239.png

img240.png

img241.png

 

11.6 Segmented Dropdown Buttons

 

img242.png

 

img243.png

img244.png