Bootstrap Form Inputs, Form Control Supported by Bootstrap, Bootstrap Input, Bootstrap Checkbox, Bootstrap Radio Buttons, Bootstrap Select List

Bootstrap Form Inputs

In Previous article i teach you how to create responsive forms with bootstrap. Now in this article i am going to teach you how to use input types textarea, checkbox etc in bootstrap. Because we always need input with form.

Form Control Supported by Bootstrap

Basically Bootstrap support some basic inputs likes.

• input
• textarea
• checkbox
• radio button
• select

Bootstrap Input

Bootstrap also support all HTML5 input types like text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, phonea and color. Like HTML5 bootstrap wont support fully styled if their property type not declared properly.

Example:- 

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="phone">Phone:</label>
  <input type="number" class="form-control" id="phone">
</div>

Bootstrap Textarea

when we have need multiple row in input then we have to use textarea. like in contact form or in feedback we use comment box or message box.

Example:- 

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="6" id="comment"></textarea>
</div>

Bootstrap Check boxes

If you have basic knowledge of HTML then you already know why we use checkbox. when we have to select multiple optoin then we use checkbox.

Example:- 

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 3
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 4
  </label>
</div>

Bootstrap Checkbox Inline

If you want your checkbox should come in single row then we have to use checkbox inline. To create checkbox inline you have to add another class .from-check-inline.

Example:- 

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 3
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 4
  </label>
</div>

Bootstrap Radio Buttons

As you know already in radio button we can select only one option. How to use radio button in bootstrap follow the example

Example:- 

<div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 3</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 4</label>
</div>

Bootstrap Radio Button Inline

If you want your all readio button should come in single row. then you have to add class .radio-inline

Example:- 

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 4</label>

Bootstrap Select List

Basically select are two type in first select list you can select single option and in second select list you can choose multiple option.

Example for single select list

<div class="form-group">
   <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Example for multiple select list

<div class="form-group">
  <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
</div>