Bootstrap Form

In bootstrap there are some form controls which rebooted styles. Bootstrap classes are used to make a form responsive different devices.

Basic Form

We'll never share your email with anyone else.

<form>
  <div class="form-group">
    <label for="inputEmailOne">Email address</label>
    <input type="email" class="form-control" id="innputEmailOne" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">You email will be secure here.</small>
  </div>
  <div class="form-group">
    <label for="inputPasswordOne">Password</label>
    <input type="password" class="form-control" id="inputPasswordOne" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheckOne">
    <label class="form-check-label" for="exampleCheckOne">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Explanation

In this example form-group class is used to apply proper margins. While some types of input like checkbox, email,password and submit are used.


Form sizing

<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"> 

Explanation

In this example form-control-sm class is used to make small size input form and form-control-lg is used to make large size input form.


Example of sizing

<select class="form-control form-control-lg">
  <option>Large select1</option>
  <option>Large select2</option>
  <option>Large select3</option>
</select>
<select class="form-control">
  <option>Default select1</option>
  <option>Default select2</option>
  <option>Default select2</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select1</option>
  <option>Small select2</option>
  <option>Small select3</option>
</select>


Example of Inline Form

<form class="form-inline">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Explanation

In this example form-inline class is used to make an inline form.


File inputs

<form>
  <div class="form-group">
    <label for="exampleFormControlFileOne">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFileOne">
  </div>
</form>








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.