Bootstrap Articles - Page 43 of 49

Bootstrap form controls can have a block level help text that flows with the inputs. To add a full width block of content, use the .help-block after the .The following example demonstrates thisExampleLive Demo           Bootstrap Example                                          Example of Help Text                                 A longer block of help text that breaks onto a new line and may extend beyond one line.                    

The input-lg is used to set the height of forms in Bootstrap.You can try to run the following code to implement the input-lg Bootstrap class ExampleLive Demo           Bootstrap Example                                                                                                                .input-lg                                

Use classes like .input-lg and .col-lg-* to set the height and width of forms.ExampleYou can try to run the following code to set the form height and width −Live Demo           Bootstrap Example                                                                                                                                                                                .input-lg                                                            Default select                                                            .input-sm                                                                                                                                                                            

The has-error class allows you to set error for input.You can try to run the following code to implement the has-error classExampleLive Demo           Bootstrap Example                                                                      Input with error                                                                        

A select is used when you want to allow the user to pick from multiple options, but by default, it only allows one.Use for list options with which the user is familiar, such as states or numbers.Use multiple = "multiple" to allow the users to select more than one option.ExampleYou can try to run the following code to implement Bootstrap form selectLive Demo           Bootstrap Example                                                             Country                            India                Australia                US                                

The has-warning class allows you to set warning for input.You can try to run the following code to implement has-warning class −ExampleLive Demo           Bootstrap Example                                                                      Input with warning                                                                        

The has-success class allows you to set success action for input −ExampleLive Demo           Bootstrap Example                                                                      Input with success                                                                        

Bootstrap offers to style for disabled inputs and classes for form validation, Input FocusWhen an input receives: focus, the outline of the input is removed and a box-shadow is applied.Disabled lnputsIf you need to disable an input, simply adding the disabled attribute will not only disable it; it will also change the styling and the mouse cursor when the cursor hovers over the element.Disabled FieldsetsAdd the disabled attribute to a to disable all the controls within the at once.Validation StatesBootstrap includes validation styles for errors, warnings, and success messages. To use, simply add the appropriate class to the parent element.Read More

To create multiple select lists in Bootstrap, use multiple,You can try to run the following code to implement multiple select −ExampleLive Demo           Bootstrap Example                                                             Country                            India                Australia                US                                

Use radio class if you want to limit the user to just one selection i.e. adding radio buttons. Use.radio-inline class to a series of radios for controls appear on the same line.You can try to run the following code to implement Bootstrap Forms radio buttonExampleLive Demo           Bootstrap Forms                                       Favourite TV Series                             Suits                                                            House of Cards