Bootstrap 4 Forms, How To Learn Bootstrap 4 Forms Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 Forms

The Bootstrap 4 forms are textual form controls—like <input>, <textarea>, and <select> elements with class .form-control have a width of 100% by default. Included are styles for general appearance, focus state, sizing, and more.

<form action="" method="post">
  
  <div class="row">
    <div class="col">
      <div class="form-group">
		<label for="">Name</label>
		<input type="email" class="form-control" id="" placeholder="name@example.com">
	  </div>
    </div>
    <div class="col">
      <div class="form-group">
		<label for="">Email address</label>
		<input type="email" class="form-control" id="" placeholder="name@example.com">
	  </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="form-group">
		<label for="">Select Tutorial</label>
		<select class="form-control" id="">
		  <option value="">HTML5</option>
		  <option value="">CSS3</option>
		  <option value="">Bootstrap 3</option>
		  <option value="">Bootstrap 4</option>
		  <option value="">JavaScript</option>
		</select>
	  </div>
	  <div class="form-group">
		<label for="exampleFormControlFile1">Profile Pic</label>
		<input type="file" class="form-control-file" id="">
	  </div>
    </div>
    <div class="col">
      <div class="form-group">
		<label for="">Select Multiple Tutorial</label>
		<select multiple class="form-control" id="">
		  <option value="">HTML5</option>
		  <option value="">CSS3</option>
		  <option value="">Bootstrap 3</option>
		  <option value="">Bootstrap 4</option>
		  <option value="">JavaScript</option>
		</select>
	  </div>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Address</label>
    <textarea class="form-control" id="" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output :

Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.

Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls. For <legend> elements, you can use .col-form-legend to make them appear similar to regular <label> elements.

<form action="" method="post">
  
<div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" name="" id="" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" name="" id="" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-legend col-sm-2">Nationality</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="" id="" value="option1" checked>
            Indian
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="" id="" value="option2">
            USA
          </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="" id="" value="option3" disabled>
            UK
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Tutorials</div>
    <div class="col-sm-10">
	  <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox"> HTML
        </label>
		<label class="form-check-label">
          <input class="form-check-input" type="checkbox"> CSS
        </label>
		<label class="form-check-label">
          <input class="form-check-input" type="checkbox"> Bootstrap
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
       <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>
 
</form>

Output :

Form and Label Sizing

To Use .col-form-label-sm or .col-form-label-lg to your <label>s to correctly follow the size of .form-control-lg and .form-control-sm.

<form action="" method="post">
  
 <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label col-form-label-sm">User Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control form-control-sm" id="" name="" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="" name="" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label col-form-label-lg">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control form-control-lg" id="" name="" placeholder="col-form-label-lg">
    </div>
  </div>
 
</form>

Output :

Inline Forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<form action="" method="post" class="form-inline">
  
 <label class="sr-only" for="">Name</label>
  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon"><i class="fa fa-user"></i></div>
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="" placeholder="User Name">
  </div>

  <label class="sr-only" for="">Password</label>
  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon"><i class="fa fa-lock"></i></div>
    <input type="text" class="form-control" id="" placeholder="Password">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
 
</form>

Output :

Help text & Disabled Forms

Help text below inputs can be styled with .form-text, and add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

<h4>Help Text</h4>
<form class="form-inline">
  <div class="form-group">
    <label for="">Password</label>
    <input type="password" id="" name="" class="form-control mx-sm-3" aria-describedby="passwordHelpText">
    <small id="passwordHelpText" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

<hr />

<h4>Disabled Forms</h4>
<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="">Disabled input</label>
      <input type="text" id="" name="" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="">Disabled select menu</label>
      <select id="" name="" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Output :

Readonly plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

<form>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="" class="sr-only">Name</label>
      <input type="text" readonly class="form-control-plaintext" id="" placeholder="Name" value="Free Time Learning">
    </div>
    <div class="col-md-6 mb-3">
      <label for="" class="sr-only">Email Id</label>
      <input type="text" readonly class="form-control-plaintext" id="" placeholder="Email Id" value="freetimelearn@gmail.com">
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="">City</label>
      <input type="text" class="form-control" id="" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="">State</label>
      <input type="text" class="form-control" id="" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="">Zip</label>
      <input type="text" class="form-control" id="" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Output :

Supported elements & Custom forms

<h4>Supported elements</h4>
<form class="was-validated">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" required>
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">www.freetimelearning.com</span>
  </label>

  <div class="custom-controls-stacked d-block my-3">
    <label class="custom-control custom-radio">
      <input id="" name="radio-stacked" type="radio" class="custom-control-input" required>
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Google</span>
    </label>
    <label class="custom-control custom-radio">
      <input id="" name="radio-stacked" type="radio" class="custom-control-input" required>
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Yahoo</span>
    </label>
  </div>

  <select class="custom-select d-block my-3" required>
    <option value="">Select One Website</option>
    <option value="1">www.freetimelearning.com</option>
    <option value="2">www.freetimelearn.com</option>
    <option value="3">www.freetimelearning.xyz</option>
	<option value="3">www.freetimelearn.xyz</option>
  </select>
  
  <label class="custom-file">
    <input type="file" id="file2" class="custom-file-input">
    <span class="custom-file-control">Choose file...</span>
  </label>

</form>

<hr />

<h4>Checkboxs</h4>
<form>
	<label class="custom-control custom-checkbox">
	  <input type="checkbox" class="custom-control-input">
	  <span class="custom-control-indicator"></span>
	  <span class="custom-control-description">Free Time Learn</span>
	</label>
	<label class="custom-control custom-checkbox">
	  <input type="checkbox" class="custom-control-input">
	  <span class="custom-control-indicator"></span>
	  <span class="custom-control-description">Free Time Learning</span>
	</label>
</form>

<hr />

<h4>Radio Buttons</h4>
<form>
	<label class="custom-control custom-radio">
	  <input id="radio1" name="radio" type="radio" class="custom-control-input">
	  <span class="custom-control-indicator"></span>
	  <span class="custom-control-description">www.freetimelearn.com</span>
	</label>
	<label class="custom-control custom-radio">
	  <input id="radio2" name="radio" type="radio" class="custom-control-input">
	  <span class="custom-control-indicator"></span>
	  <span class="custom-control-description">www.freetimelearning.com</span>
	</label>
</form>

<hr />

<h4>Stacked Radio Buttons</h4>
<form>
	<div class="custom-controls-stacked">
	  <label class="custom-control custom-radio">
		<input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
		<span class="custom-control-indicator"></span>
		<span class="custom-control-description">Free Time Learn</span>
	  </label>
	  <label class="custom-control custom-radio">
		<input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">
		<span class="custom-control-indicator"></span>
		<span class="custom-control-description">Free Time Learning</span>
	  </label>
	</div>
</form>

Output :

Bootstrap 4 Tutorial