|
|
This section clarifies about one more feature Bootstrap supports, the Input Groups. Input groups are prolonged Form Controls. Using input groups one can simply remove and add text or buttons to the text-based inputs.
By adding prepended and added content to an input field, you can add shared features to the user’s input. For instance, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be mutual for your application interface.
To remove or attach elements to a .form-control−
For cross browser compatibility, avoid using <select> elements here as they cannot be fully styled in WebKit browsers. Also do not apply input group classes directly to form groups. An input group is an isolated component.
The following example demonstrates basic input group −
You can alter the size of the input collections, by adding the relative form sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group itself. The contents within will automatically resize.
Following examples demonstrates this −
You can detach or attach radio buttons and checkboxes in its place of text as verified in the following example −
You can even detach or attach buttons in input groups. Instead of .input-group-addon class, you'll need to use class .input-group-btn to wrap the buttons. This is required due to the default browser styles that cannot be overridden. Following instances proves this −
Adding buttons with dropdown menus in input groups can be done by just wrapping the button and dropdown menu in a .input-group-btn class as demonstrated in the following example −
To segment button dropdowns in input groups, use the same overall style as the dropdown button, but improve a main action along with the dropdown as can be seen in the next instance −
|
|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.