BOOTSTRAP CSS

BS Home BS Introduction BS Setup BS Grid System BS Typography BS Fixed Layout BS Fluid Layout BS Responsible Layout BS Code BS Lists BS Tables BS Forms BS Images BS Helper Class

BS COMPONENTS

BS Glyphicons BS Buttons BS Button Groups BS Button Dropdowns BS Input Groups BS Navigation BS Navigation Bars BS Breadcrumbs BS Pagination BS Labels BS Badges BS Jumbotron/Headers BS Thumbnails BS Alerts BS ProgressBars BS MediaObjects BS List Groups BS Panels BS Wells

BS JAVASCRIPT

BS Modals BS Dropdown BS Scrollspy BS Tabs BS Tooltips BS Popovers BS Alerts BS Button BS Collapse BS Carousel BS Affix

BS Reference

BS Examples BS CSS Reference BS JavaScript

---

Twitter Bootstrap Forms

---

To Create styled forms with various states

---

Twitter Bootstrap: Basic Form

1. Bootstrap enables user to create forms using simple HTML markups with extended class to add different styles to the form.

2. All form elements <input> <textarea> <select> with class .form-control are set to width of 100% by default.

3. Labels and controls can be grouped using class .form-group for optimum utilization of space.

Example: Twitter Bootstrap Basic Forms

<form> <fieldset> <!--HTML form elements--> <legend>Notify</legend> <label for="name">Product Code</label> <input type="text" id="name" placeholder="4 character code ..."> <span class="help-block">Specified at the top left corner.</span> <label class="checkbox" for="checkbox"> <input type="checkbox" id="checkbox"> remember IP adress </label> <button type="submit" class="btn">Done!</button> </fieldset> </form> Give it a TRY! »

---

Twitter Bootstrap: Inline Forms

1. An Inline form controls can be created using class="form-inline" with element <form>.

Its applicable only to forms with viewport sizes greater than 768px

Example:Twitter Bootstrap Inline Form Controls

<form class="form-inline" role="form"><!-- class "form-inline" to display form inline --> <div class="form-group"> <!-- formgroup --> <label class="sr-only" for="exampleInputEmail2">Email </label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email or Id"> <!-- email input --> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password(lowercase)"> <!-- password input --> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember Password </label> <!-- checkbox input --> </div> <button type="submit" class="btn btn-success">Sign in</button> <!-- submit button --> </form> Give it a TRY! »

---

Twitter Bootstrap: Horizontal Forms

1. A horizontal form group can be created by adding .form-horizontal to the element <form>.

2. It forces elements using .form-group class to behave as grid rows, hence no need to use .row

Example:Twitter Bootstrap Hover Tables

<form class="form-horizontal" role="form"> <!-- horizontal-form class --> <div class="form-group"> <!-- email form group --> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email or ID"> </div> </div> <div class="form-group"> <!-- password form group --> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password(lowercase)"> </div> </div> <div class="form-group"><!-- checkbox form group --> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember Password </label> </div> </div> </div> <div class="form-group"><!-- button form group --> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> Give it a TRY! »

---

Twitter Bootstrap: Form Input

1. The most common form control is text based input field, the fields will be styled completely only if the type property is declared .

2. It supports all HTML5 types: datetime-local , date , month , time , week , number , email , url , search , tel , color.

Example:Twitter Bootstrap Form Input

<div class="bootstrap-demo"> <p><input type="text" class="form-control" placeholder="Text input"></p> <!-- text --> <p><input type="datetime-local" class="form-control" placeholder="datetime"></p> <!-- datetime-local --> <p><input type="date" class="form-control" placeholder="date"></p> <!-- date --> <p><input type="month" class="form-control" placeholder="month"></p> <!-- month --> <p><input type="week" class="form-control" placeholder="week"></p> <!-- week --> <p><input type="number" class="form-control" placeholder="number"></p> <!-- number --> <p><input type="email" class="form-control" placeholder="email"></p> <!-- email --> <p><input type="url" class="form-control" placeholder="url"></p> <!-- url --> <p><input type="search" class="form-control" placeholder="search"></p> <!-- search --> <p><input type="tel" class="form-control" placeholder="telephone"></p> <!-- telephone no --> <p><input type="color" class="form-control" placeholder="color"></p> <!-- color select --> </div> Give it a TRY! »

---

Twitter Bootstrap: Form Textarea

1. The <textarea> is a form control which can contain multiple line of text.

The size of the textarea is specified using the attributed row

Example:Twitter Bootstrap Textarea for Inputs

<div class="bootstrap-demo"> <textarea class="form-control" rows="3"></textarea> <!-- textarea elements, display size 3 rows--> </div> Give it a TRY! »

---

Twitter Bootstrap: CheckBox and Radio Buttons

1. Checkbox allows users to select multiple options while radio buttons allow only a single input.

2. To define a checkbox or radio button use the attribute type , just like normal HTML code.

3. Inline checkbox or radio button can be created using .checkbox-inline or .checkbox-radio class.

Example:Twitter Bootstrap CheckBox and Radio Options

<label class="checkbox-inline"> <!-- class checkbox-inline to display checkbox inline --> <!-- input type checkbox --> <input type="checkbox" id="inlineCheckbox1" value="option1"> CheckBox 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> CheckBox 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> CheckBox 3 </label> Give it a TRY! »

---

Twitter Bootstrap: Form Selects

1.A select is used to enable users to pick from multiple options, but by default it allows only a single value

2. To allow users to select more than one options use multiple="multiple" within the <select> element.

Example:Twitter Bootstrap Selects Form

<select class="form-control"> <!-- select element to dropdown options--> <option>Lord Voldemort</option> <option>Albus Dumbledore</option> <option>Harry Potter</option> <option>Ron Weasley</option> <option>Severus Snape</option> </select> <select multiple="multiple" class="form-control"> <!-- multiple="multiple" to display multiple options--> <option>Lord Voldemort</option> <option>Albus Dumbledore</option> <option>Harry Potter</option> <option>Ron Weasley</option> <option>Severus Snape</option> </select> Give it a TRY! »

---

Twitter Bootstrap: Static Form Controls

1. In order to place a plain text adjacent to a form label within a horizontal form group, use class .form-control-static within the element <p>.

Example:Twitter Bootstrap Static Form Controls

<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">User@tutorialspark.com</p> <!-- class form-control-static to display static text --> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password(Case-Sensitive)"> </div> </div> </form> Give it a TRY! » Note: It creates a thick grey border to the left side.

---

Twitter Bootstrap: Disabled Form Inputs

1. To disable a form control add attribute disabled , it even changes the appearance the cursor style

Example:Twitter Bootstrap Disabled form Inputs

<div class="bootstrap-demo"> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> <!-- attribute disabled to disable form field--> </div> Give it a TRY! » Note: It creates a thick grey border to the left side.

---

Twitter Bootstrap: Disabled Form Fieldsets

1.The entire fieldset can be disabled by adding the class disabled to the <fieldset> element .

Example:Twitter Bootstrap Disabled Form Fieldsets

<form role="form"> <fieldset disabled> <!--complete fieldset disabled using attribute disabled --> <div class="form-group"> <label for="disabledTextInput">Input(Disabled)</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Input Disabled"> </div> <div class="form-group"> <label for="disabledSelect">Select Menu(Disabled)</label> <select id="disabledSelect" class="form-control"> <option>Options</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox">CheckBox(disabled) </label> </div> <button type="submit" class="btn btn-primary">I am Done!</button> </fieldset> </form> Give it a TRY! »

---

Twitter Bootstrap: Form with Validation States

1. The Bootstrap has three validation styles to show error, warning and success states on a form control.

2. To use the feature, add .has-error , .has-warning and .has-success to the parent element.

3. Use any .control-label , .form-label and .help-block within the element to recieve the validation styles.

Example:Twitter Bootstrap Validation States

<div class="form-group has-success"> <!-- class has-success --> <label class="control-label" for="inputSuccess1">Input (Successful)</label> <input type="text" class="form-control" id="inputSuccess1"> </div> <div class="form-group has-warning"><!-- class has-warning--> <label class="control-label" for="inputWarning1">Input(Warning)</label> <input type="text" class="form-control" id="inputWarning1"> </div> <div class="form-group has-error"><!--class has-error --> <label class="control-label" for="inputError1">Input(Error)</label> <input type="text" class="form-control" id="inputError1"> </div> Give it a TRY! »

---

Twitter Bootstrap: Forms Validation States with Glyphicon Icons

1. You can even add a feedback icon using gylphicon icons by adding an additional class within the <span> attribute or any other element .

2. The positioning of the icon can be done setting right: 0; to an appropriate pixel.

Example:Twitter Bootstrap Form Validation states using glyphicon Icons

<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input (Successful)</label> <input type="text" class="form-control" id="inputSuccess2"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> <!-- glyphicon-ok --> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning2">Input(Warning)</label> <input type="text" class="form-control" id="inputWarning2"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> <!-- glyphicon-warning-sign--> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError2">Input(Errors)</label> <input type="text" class="form-control" id="inputError2"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> <!-- glyphicon-remove --> </div> Give it a TRY! »

---

Twitter Bootstrap: Icons with Inline and Horizontal Forms

1. Validation icons can be even added on horizontal and inline forms .

Example:Twitter Bootstrap Icons with Horizontal and Inline Forms

<form class="form-horizontal" role="form"> <!-- horizontal form --> <div class="form-group has-success has-feedback"> <label class="control-label col-sm-3" for="inputSuccess3">Input(successful)</label> <div class="col-sm-9"> <input type="text" class="form-control" id="inputSuccess3"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> </form> <hr> <h4>Inline Form </h4> <form class="form-inline" role="form"> <!-- inline form --> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess4">Input(successful)</label> <input type="text" class="form-control" id="inputSuccess4"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </form> Give it a TRY! »

---

Twitter Bootstrap: Sizing of Form Controls

1. The height of the input controls can be set using class .input-lg for large and .input-sm for small input control.

2. The width of the form control is specified using grid column class like .col-lg-*.

Example:Twitter Bootstrap Sizing of form controls

<input class="form-control input-lg" type="text" placeholder=".input-lg"><br> <!-- large input using class input-lg--> <input class="form-control" type="text" placeholder="Default input"><br> <!-- default sized input --> <input class="form-control input-sm" type="text" placeholder=".input-sm"><br> <!-- small input using class input-sm--> <select class="form-control input-lg">...</select><br> <!-- large select using class input-lg--> <select class="form-control">...</select><br><!-- default sized select--> <select class="form-control input-sm">...</select><!-- small select using class input-sm--> Give it a TRY! »

---

Twitter Bootstrap: Column Sizing of Inputs

1. The size of the columns can be specified wrapping inputs in grid columns or any other parent element, to have the desired width.

Example:Twitter Bootstrap column-Sizing form inputs

<div class="row"> <div class="col-xs-2"> <!-- grid size 2 i.e 1/6--> <input type="text" class="form-control" placeholder="xs-2"> </div> <div class="col-xs-3"><!-- grid size 3 i.e 1/4--> <input type="text" class="form-control" placeholder="xs-3"> </div> <div class="col-xs-4"><!-- grid size 4 i.e 1/3--> <input type="text" class="form-control" placeholder="xs-4"> </div> </div> Give it a TRY! »

---

Twitter Bootstrap : Help Blocks

1. A held block's purpose is to guide the user about the details of the form input, add .help-block to create this text block.

Example:Twitter Bootstrap Help Blocks

<div class="bootstrap-demo"> <input type="text" class="form-control" placeholder="What's on your Mind"> <!-- class help-block to guide the user --> <span class="help-block">An Help Block is used as a guide for Users</span> </div> Give it a TRY! »

---