---

Search posts under Bootstrap:

---

Different Inputs in Bootstrap

How to create inputs form in Bootstrap?

Input

Bootstrap supports all type of HTML5 inputs 

Basic input

<h2> Basic input</h2>
   <div class="container">
       <div class="form-group">
           Name
           <input  type="text" class="form-control" id="user"/>
           Password
           <input  type="password" class="form-control id="password"/>
       </div>
   </div>

In the above code snippet we have defined the input, we have value class attribute as container to create the input in the container and we are having the value of class attribute form-group in the div, we have created input type with text and password using class attribute form-control with id as user and password 

output

Text area

We can create text area in bootstrap by using following 

<h2> Bootstrap text area</h2>
   <div class="container">
       <div class="form-group">
          <textarea class="form-control rows="3"></textarea>
       </div>
   </div>

Text area

• In the above code snippet we have created text area, we have class attribute valueas container in the div
• In the nextline we created div with class attribute  value as form-group to create textarea using class attribute form-control  with rows 3 which defines the textarea with 3 rows

output

Check boxes

It is used to select the items in many number of options 

 <h2>Bootstrap checkbox</h2>
    <div class="container">
            <div class="checkbox">
                <label><input type="checkbox" value="1">TechFunda</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" value="2">DotNetFunda</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" value="3">ITFunda</label>
            </div>
    </div>

Checkbox

• In the above code snippet we have defined the checkbox, we have the value of class attribute as container
• We created three checkboxes using class attribute value as checkbox in the div with three different values TechFunda, DotNetFunda and ITFunda 

output

Radio button

We can create radio button using bootstrap, radio button is used to select the single item among different buttons 

<h2>Bootstrap radio button</h2>
    <div class="container">
            <div class="radio">
                <label><input type="radio" name="optradio">TechFunda</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="optradio">DotNetFunda</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="optradio">ITFunda</label>
            </div>
    </div>

Radio button

• In the above code snippet we have class attribute value  as container 
• We created three radio buttons using class attribute value  as radio with input type as radio and name as optradio in the label 

 <h2>Bootstrap select list</h2>
    <div class="form-group">
        <label for="select">Select list:</label>
        <select class="form-control" id="select">
            <option>TechFunda</option>
            <option>DotNetFunda</option>
            <option>ITFunda</option>
            <option>KidsFunda</option>
        </select>
    </div>