In this tutorial I’ll show you how to make a basic form in Bootstrap. By adding Bootstrap classes to your form, it will be responsive and also gain some neat and tidy styling.
Starting code for this tutorial
As with most of the other Bootstrap tutorials, I started with the same template that we created in tutorial 3. Inside of a container, a row and a div taking up 12 columns.
Creating a form
By creating a
.form-group inside of the form tag, bootstrap will apply responsive styling and some nice neat padding between the label and the input element.
<form action="" method="">
<div class="form-group">
<!-- label here -->
<!-- input here -->
</div>
</form>
Email and password fields
Input elements also need to have a class of
.form-control to add the Bootstrap theme styling, which makes it look a little better. This only needs to be applied to text, email or password fields.
<form action="" method="">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email"/>
</div>
</form>
File uploads
File uploads should also be in the form group to apply the correct spacing and styling, however they do not need the
.form-control class because that will apply a really funny looking border around it.
<div class="form-group">
<label for="file-upload">File upload</label>
<input type="file" id="file-upload"/>
</div>
Submit buttons
File uploads should also be in the form group to apply the correct spacing and styling, but no label is necessary here.
<div class="form-group">
<input type="submit" class="btn btn-default" id="submit" value="submit" />
</div>
Final code for the tutorial
Here is the final form code for the tutorial.
<form action="" method="">
<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="password">Password</label>
<input type="password" class="form-control" id="password"/>
</div>
<div class="form-group">
<label for="file-upload">File upload</label>
<input type="file" id="file-upload"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" id="submit" value="submit" />
</div>
</form>
0 comments