Bootstrap

champak
Bootstrap
₹2,000.00 ₹1,500.00
  • 22 students
  • 13 lessons
  • 0 quizzes
  • 10 week duration

Bootstrap

Bootstrap Forms

The basic tag for forms in Bootstrap is form-group. It stacks controls one over the other. Using form-control we can extend every control to 100% of the available width.

Here is a short sample


<!DOCTYPE html>

<html>
<head>
<title>Bootstrap Forms</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.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container bg-info row">
<div class="col-sm-12 ">
<h1 class="text-center">Bootstrap Forms</h1>
</div>
</div>
<div class="container">
<h2>Stacked form</h2>
<form action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Your 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="radio" name="gender"> Male
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gender"> Female
</label>
</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>

To create an inline form simply add class=”form-inline” to the form tag.


<!DOCTYPE html>

<html>
<head>
<title>Bootstrap Inline Forms</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.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container bg-info row">
<div class="col-sm-12 ">
<h1 class="text-center">Bootstrap Inline Forms</h1>
</div>
</div>
<div class="container">
<h2>Stacked form</h2>
<form class="form-inline" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Your 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="radio" name="gender"> Male
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gender"> Female
</label>
</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>

 

Leave a Reply

Your email address will not be published. Required fields are marked *