Form Custom 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 Custom Classes Bootstrap CSS</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Form_Custom_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 mb-5">
<h2 class="py-3 text-center">Bootstrap Custom Form Classes</h2>
<div class="row py-3">
<div class="col">
<select name="" class="custom-select">
<option value="">India</option>
<option value="">USA</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
<option value="">SriLanka</option>
</select>
<select name="" class="custom-select custom-select-lg mb-3">
<option value="">India</option>
<option value="">USA</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
<option value="">SriLanka</option>
</select>
<select name="" class="custom-select custom-select-sm mb-3">
<option value="">India</option>
<option value="">USA</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
<option value="">SriLanka</option>
</select>
<select name="" class="custom-select mb-3" multiple size="3">
<option value="">India</option>
<option value="">USA</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
<option value="">SriLanka</option>
</select>
</div>
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customcheckbox1">
<label class="custom-control-label" for="customcheckbox1">Music</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customcheckbox2">
<label class="custom-control-label" for="customcheckbox2">Sports</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customcheckbox3">
<label class="custom-control-label" for="customcheckbox3">Books</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" class="custom-control-input" id="customradio1">
<label class="custom-control-label" for="customradio1">Male</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" class="custom-control-input" id="customradio2">
<label class="custom-control-label" for="customradio2">Female</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" class="custom-control-input" id="customradio3">
<label class="custom-control-label" for="customradio3">Other</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customcheckbox4">
<label class="custom-control-label" for="customcheckbox4">Sports</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customcheckbox5">
<label class="custom-control-label" for="customcheckbox5">Music</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
</div>
<div class="col">
<div class="custom-file">
<input type="file" class="custom-file-input form-control">
<label class="custom-file-lable"></label>
</div>
</div>
</div>
<div class="input-group">
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"
aria-label="Upload">
</div>
<div class="row py-3">
<div class="col">
<div class="form-inline">
<div class="form-group">
<label class="sr-only">Enter name</label>
<input type="text" class="form-control is-valid" placeholder="Enter Username">
<div class="valid feedback">Look Good!</div>
<!--<div class="valid tooltip">Look Good!</div>-->
</div>
<div class="form-group mx-3">
<label class="sr-only">Enter password</label>
<input type="password" class="form-control is-invalid" placeholder="Enter Password">
<div class="invalid feedback">Enter valid password</div>
<!--<div class="invalid feedback">Enter valid password</div>-->
</div>
<button class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
</body>
</html>
Below File is css/Form_Custom_Classes_Bootstrap_CSS.css File
.container {
border: 5px solid #000000;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment