Bootstrap Form Examples and Tutorials

Bootstrap Provides Pre-Defined Classes for All input/select/ and buttons. All Form<input>, <textarea>, and <select> elements with class .form-control have a width of 100%. Included are styles for general appearance, focus state, sizing, and more.

Bootstrap Default Form

<div class="container">
<div class="row">
<form action="#">
  <div class="form-group">
    <label for="Name">Name:</label>
    <input type="email" class="form-control" id="Name">
  </div>
  <div class="form-group">
    <label for="Mobile">Mobile:</label>
    <input type="password" class="form-control" id="Mobile">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>

Bootstrap Inline Form

<div class="container" style="margin-top:20px;">
<div class="row">
  <form class="form-inline" action="#">
    <div class="form-group">
      <label for="Name">Name:</label>
      <input type="Name" class="form-control" placeholder="Name">
    </div>
    <div class="form-group">
      <label for="Mobile">Mobile:</label>
      <input type="Mobile" class="form-control"  placeholder="Mobile">
    </div>
    
    <button type="submit" class="btn btn-danger">Submit</button>
  </form>
 </div>
</div>

Bootstrap Select List and Multiple Select List (With Shift Key Select Multiple Item)

Bootstrap Provides Multiple Select List With its class, Lets know how to Create Multiple Select List in Bootstrap.

<div class="container" style="margin-top:20px;">
<div class="row">
  <form action="#">
   
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select List</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  
  </form>
 </div>
</div>

Bootstrap Checkboxes and Bootstrap Radio Button Examples

<div class="container" style="margin-top:20px;">
<div class="row">
    <h3>Default Checkbox | Form control</h3>
    <div class="checkbox">
     <label><input type="checkbox" value="">Option 1</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 2</label>
    </div>
    
    <h3>Inline Checkbox | Form control</h3>
    <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
    <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
    
    <h3>Radio Button | Form Control</h3>
    <div class="radio">
      <label><input type="radio" name="optradio" checked>Option 1</label>
    </div>
    <div class="radio">
     <label><input type="radio" name="optradio">Option 2</label>
    </div>
    
    <h3>Inline Radio Button | Form Control</h3>
    <label class="radio-inline"><input type="radio" name="optradio" checked>Option 1</label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
    
    
 </div>
</div>

Bootstrap Text Area

<div class="container" style="margin-top:20px;">
<div class="row">
  <h3>Bootstrap Text Area</h3>
  <form action="#">
     <div class="form-group">
      <label for="comment">Your Comment Hera:</label>
      <textarea class="form-control" rows="4" id="comment"></textarea>
     </div>
  </form>
 </div>
</div>

Bootstrap Input Groups

In Bootstrap Input Group ( .input-group ) class make form more attractive by adding icons,buttons in input left or right.

Bootstrap Input With Search Icon

<div class="container">
<div class="row">
 <form action="/action_page.php">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search" name="search">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>
 </div>
</div>