Bootstrap Forms

Bootstrap 3 Tutorial � Bootstrap Forms

Bootstrap greatly simplifies the process of styling and alignment of form controls like labels, input fields, selectboxes, textareas, buttons, etc. through predefined set of classes.

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap Form Layouts

Bootstrap provides three types of form layouts:

Vertical form (default)
Horizontal form
Inline form

Will give you the detailed of all these form layouts one by one.

Creating Vertical Form Layout (default)

This example will create a vertical form with two input fields, checkbox and submit button:

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Vertical form - Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>Creating Vertical Form Layout (basic)</h2>

  <form action="/action.php">

  <div class="form-group">

  <label for="email">Email:</label>

  <input type="email" class="form-control" id="email" placeholder="Enter your email" name="email">

  </div>

  <div class="form-group">

  <label for="pwd">Password:</label>

  <input type="password" class="form-control" id="pwd" placeholder="Enter your password" name="pwd">

  </div>

  <div class="checkbox">

  <label><input type="checkbox" name="remember"> Remember me</label>

  </div>

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

  </form>

  </div>
</body>

  </html>

Bootstrap Horizontal Form - example

Horizontal form layouts where labels and form controls are aligned side-by-side using the Bootstrap grid classes.

Additional rules for a horizontal form:

lass�.form-horizontal�to the�<form>�element
class�.control-label�to all�<label>�elements

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap Horizontal form, Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>Bootstrap Horizontal form, Example</h2>

  <form class="form-horizontal" action="/action_page.php">

  <div class="form-group">

  <label class="control-label col-sm-2" for="email">Email:</label>

  <div class="col-sm-10">

  <input type="email" class="form-control" id="email" placeholder="Enter your email" name="email">

  </div>

  </div>

  <div class="form-group">

  <label class="control-label col-sm-2" for="pwd">Password:</label>

  <div class="col-sm-10"> 

  <input type="password" class="form-control" id="pwd" placeholder="Enter your password" name="pwd">

  </div>

  </div>

  <div class="form-group"> 

  <div class="col-sm-offset-2 col-sm-10">

  <div class="checkbox">

  <label><input type="checkbox" name="remember"> Remember me</label>

  </div>

  </div>

  </div>

  <div class="form-group"> 

  <div class="col-sm-offset-2 col-sm-10">

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

  </div>

  </div>

  </form>

  </div>
</body>

  </html>

Bootstrap Inline Form - example

The following example creates an inline form with two input fields, checkbox and submit button:
using this elements: .form-inline and <form>

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap Inline Form - example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>Bootstrap Inline Form - example</h2>

  <p>Make the viewport larger than 1024px wide to see all of the form elements are inline and left aligned</p>

  <form class="form-inline" action="/action_page.php">

  <div class="form-group">

  <label for="email">Email:</label>

  <input type="email" class="form-control" id="email" placeholder="Enter your email" name="email">

  </div>

  <div class="form-group">

  <label for="pwd">Password:</label>

  <input type="password" class="form-control" id="pwd" placeholder="Enter your password" name="pwd">

  </div>

  <div class="checkbox">

  <label><input type="checkbox" name="remember"> Remember me</label>

  </div>

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

  </form>

  </div>
</body>

  </html>

Bootstrap Forms templates, inline, examples, templates free, style, validation, css, online
Bootstrap Forms - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.