How To Create A Login Form In Bootstrap

In Bootstrap, creating a responsive web page is a piece of cake, as Bootstrap has classes to create web design.

Bootstrap has different types of form layout given below.

Now, create all style forms, one by one

Vertical form

We used some classes like form-group, form-control, checkbox, btn and btn-primary.

Example

<html>
<head>
<title>Bootstrap 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.3.7/css/bootstrap.min.css">
<script src="https//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical form</h2>
<form>
<div class="form-group"> <label for="email">User Name</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div>
<div class="form-group"> <label for="pwd">Password</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div>
<div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
</div>
</body>
</html>

Output

Explanation

Horizontal form

We used some classes like form-horizontal, form-group, control-label col-sm-2, form-control, checkbox and btn btn-primary.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajay malik bootstrap 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.3.7/css/bootstrap.min.css">
<script src="https//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal">
<div class="form-group"> <label class="control-label col-sm-2" for="email">User Name</label>
<div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Enter 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 password"> </div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"> <label><input type="checkbox"> 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-primary">Submit</button> </div>
</div>
</form>
</div>
</body>
</html>

Output

Explanation

Inline form

We used some classes like form-inline, form-group, form-control, sr-only, checkbox and btn btn-danger.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajay Malik Bootstrap 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.3.7/css/bootstrap.min.css">
<script src="https//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Inline form</h2>
<form class="form-inline">
<div class="form-group"> <label class="sr-only" for="email">User Name</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div>
<div class="form-group"> <label class="sr-only" for="pwd">Password</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div>
<div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-danger">Submit</button> </form>
</div>
</body>
</html>