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>Form Classes Bootstrap CSS</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/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 4 Form Classes</h2>
<div class="row py-3">
<div class="col-md-6">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control form-control-lg">
<input type="text" class="form-control">
<input type="text" class="form-control form-control-sm">
</div><br>
<div>
<label>Email</label>
<input type="text" value="abc@gmail.com" class="form-control-plaintext" readonly>
</div><br>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
<small class="form-text text-muted">
Your password must be 8-20 Characters long.
</small>
</div><br>
<div class="form-group">
<label>Country</label>
<select name="" id="" class="form-control">
<option value="">India</option>
<option vlaue="">USA</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
</select>
</div><br>
<div class="form-group">
<label for="floatingTextarea">Message</label>
<textarea name="" class="form-control" placeholder="Type a message here..."
id="floatingTextarea"></textarea>
</div><br>
</div>
<div class="col-md-6">
<div class="form-group">
<label>File Upload</label><br>
<input type="file" class="form-control-file">
</div><br>
<div class="form-group">
<label>Amount</label>
<input type="range" class="form-control-range">
</div><br>
<div class="form-group">
<label>Hobbies</label>
<div class="form-check">
<!--Below id="" in <input> Tag and for="" in <label> Tag Must be Same-->
<input type="checkbox" class="form-check-input" id="musicCheck">
<label for="musicCheck" class="form-check-label">Music</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="sportCheck">
<label for="sportCheck" class="form-check-label">Sports</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="danceCheck">
<label for="danceCheck" class="form-check-label">Dance</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="watchingTvCheck">
<label for="watchingTvCheck" class="form-check-label">Watch TV</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="swimmingCheck">
<label for="swimmingCheck" class="form-check-label">Swimming</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="disabledCheck" disabled>
<label for="disabledCheck" class="form-check-label">Disabled</label>
</div>
</div><br>
<div class="form-group">
<label>Gender</label>
<div class="form-check">
<input type="radio" class="form-check-input" name="gender" id="maleGender">
<label for="maleGender" class="form-check-label">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="gender" id="femaleGender">
<label for="femaleGender" class="form-check-label">Female</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="gender" id="otherGender">
<label for="otherGender" class="form-check-label">Other</label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Below File is css/Form_Classes_Bootstrap_CSS.css File
.container {
border: 5px solid #000000;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment