Bootstrap Forms

Check the updated DevOps Course.

Course Registration link:

Create an Account

Course Link:

101 Days of DevOps

YouTube link:

Prashant Lakhera

CSS · Bootstrap

So the important class we take a note here is form-group which place spacing between component of forms

form-control its rounding the corner and stretching the form

<div class="container">
<form>
 <div class=”form-group”>
 <label for=”exampleInputEmail1">Email address</label>
 <input type=”email” class=”form-control” id=”exampleInputEmail1" placeholder=”Email”>
 </div>
 <div class=”form-group”>
 <label for=”exampleInputPassword1">Password</label>
 <input type=”password” class=”form-control” id=”exampleInputPassword1" placeholder=”Password”>
 </div>
 <div class=”form-group”>
 <label for=”exampleInputFile”>File input</label>
 <input type=”file” id=”exampleInputFile”>
 <p class=”help-block”>Example block-level help text here.</p>
 </div>
 <div class=”checkbox”>
 <label>
 <input type=”checkbox”> Check me out
 </label>
 </div>
 <button type=”submit” class=”btn btn-default”>Submit</button>
 </form>
</div>

Form

Dropdown Menu with select option https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

<div class=”form-group”>
 <label for=”sel1">Select list:</label>
 <select class=”form-control” id=”sel1">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 </select>
 </div>

Now if we want to select multiple options use keyword multiple

<select multiple class=”form-control” id=”sel1">

For textarea

<textarea class=”form-control” rows=”3"></textarea>

Radio Button

<div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
          Option two can be something else and selecting it will deselect option one
        </label>
      </div>
      <div class="radio disabled">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
          Option three is disabled
        </label>
      </div>

Checkbox http://getbootstrap.com/css/

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>