Inline and Horizontal Form Classes in Bootstrap CSS tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Inline Horizontal Form Classes Bootstrap CSS</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Inline_Horizontal_Form_Classes_Bootstrap_CSS.css">
</head>
<body>
<!--How to make Website Layout with Bootstrap ?-->
<!--3 Bootstrap CSS Classes : Container, Row, Col-->
<!--When use "Col" Class ? Answer: For Equal Width Div Tag-->
<!--Total width of Grid in Every row is 12-->
<!--Col Class for different Break Points-->
<!--Extra Large:col-lg, Large:col-lg, Medium:col-md, Small:col-sm, Extra Small-->
<!--Total width of Column Grid must be maximum 12 in one Row-->
<div class="container">
<h2 class="py-3 text-center">Bootstrap Inline & Horizontal Form Classes</h2>
<div class="row py-3">
<div class="col">
<form action="" class="form-inline">
<div class="form-group">
<label class="sr-only">User Name</label>
<input type="text" class="form-control" placeholder="User Name">
</div>
<div class="form-group mx-sm-3">
<label class="sr-only">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
<form class="row py-3">
<div class="col-md-4">
<label class="sr-only">User Name</label>
<input type="text" class="form-control" placeholder="User Name">
</div>
<div class="col-md-4">
<label class="sr-only">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="col-md-4"><br>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
<div class="col">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
<form class="form-row py-3">
<div class="col-md-4">
<label class="sr-only">Username</label>
<input type="text" class="form-control" placeholder="User Name">
</div>
<div class="col-md-4">
<label class="sr-only">Password</label>
<input type="text" class="form-control" placeholder="Password">
</div>
<div class="col-md-4"><br>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
<div class="row">
<div class="col py-3">
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="musicCheck">
<label for="musicCheck" class="form-check-label">Music</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="SportCheck">
<label for="SportCheck" class="form-check-label">Sport</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="bookCheck" disabled>
<label for="bookCheck" class="form-check-label">Book</label>
</div>
</div>
</div>
<div class="row">
<div class="col py-3">
<div class="form-check form-check-inline">
<input type="radio" name="gender" class="form-check-input" id="maleCheck">
<label for="maleCheck" class="form-check-label">Male</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="gender" class="form-check-input" id="femaleCheck">
<label for="femaleCheck" class="form-check-label">Female</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="gender" class="form-check-input" id="otherCheck">
<label for="otherCheck" class="form-check-label">Other</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<form action="">
<div class="form-group row">
<label class="col-sm-2 col-form-label-lg">
User Name
</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label-sm">
Password
</label>
<div class="col-sm-10">
<input type="password" class="form-control form-control-sm">
</div>
</div>
<div class="row">
<div class="col">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Below File is css/Inline_Horizontal_Form_Classes_Bootstrap_CSS.css
.container {
border: 5px solid #000000;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment