Bootstrap 4
  Prev Page
Next Page  
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 :
  Prev Page
Next Page  
About F T L
Contact
Govt Exams
Partners
  © 2017 - 2022. All Rights Reserved by Free Time Learning .
    Designed by F T L

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.