×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Forms


Form as we all know it is a type of sheet in which we used to fill the information. Same like that webpages do have a form like login form or etc.

In Bootstrap we are having two forms layout

  • Stacked (Full-width) form
  • Inline form

Stacked form


In stacked type all the elements comes one by one in sequential manner.
Let’s understand this by the following program:-

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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/4.3.1/css/bootstrap.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

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

</head>

<body>

<div class="container-fluid">

<h2>Stacked form </h2>

<form action="/action_page.php">

<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>

<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>

<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

Output of this Program


Stacked form

So we get our login form in a sequential manner .




Inline Forms



In inline forms all the elements are inline and left-aligned.
Let’s understand this by the following program:-

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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/4.3.1/css/bootstrap.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

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

</head>

<body>

<div class="container-fluid">

<h2>Inline form</h2>

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

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

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

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

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

<div class="form-check">

<label class="form-check-label">

<input class="form-check-input" type="checkbox" name="remember"> Remember me </label>

</div>

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

</form>

</div>

</body>

</html>

Output of this Program


Inline form



Form Row/Grid


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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/4.3.1/css/bootstrap.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

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

</head>

<body>

<div class="container">

<h2>Form Grid</h2>

<form action="/index.html">

<div class="row">

<div class="col">

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

</div>

<div class="col">

<input type="password" class="form-control" placeholder="Enter password" name="pswd">

<div>

</div>

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

</form>

</div>

</body>

</html>

Output of this Program


Form Grid

Form Validation



<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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/4.3.1/css/bootstrap.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

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

</head>

<body>

<div class="container">

<h2>Form Validation</h2>

<form action="/index.html" class="was-validated">

<div class="form-group">

<label for="uname">Username:</label>

<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please fill out this field.</div>

</div>

<div class="form-group">

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

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

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please fill out this field.</div>

</div>

<div class="form-group form-check">

<label class="form-check-label">

<input class="form-check-input" type="checkbox" name="remember" required> I agree <div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Check this checkbox to continue.</div>

</label>

</div>

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

</form>

</div>

</body>

</html>

Output of this Program


Form Validation

Valid.
Please fill out this field.
Valid.
Please fill out this field.

Here our login form is not sequential but its inline.






Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute