<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>
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>
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>
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>
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>
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>
<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>