Input Group 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>Input Group Classes Bootstrap CSS</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Input_Group_Classes_Bootstrap_CSS.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</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 Input Group Classes</h2>
<div class="row py-3">
<div class="col">
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">First and Last name</span>
<input type="text" class="form-control" placeholder="Enter First name">
<input type="text" class="form-control" placeholder="Enter Last name">
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control">
<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input type="radio">
</div>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Enter username">
<button class="btn btn-secondary" type="button">Login</button>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<li><a href="" class="dropdown-item">Action</a></li>
<li><a href="" class="dropdown-item">Another action</a></li>
<li><a href="" class="dropdown-item">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a href="" class="dropdown-item">Separated link</a></li>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="User Name">
<div class="input-group-append">
<button class="btn btn-primary">SignIn</button>
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="" class="dropdown-item">Link One</a>
<a href="" class="dropdown-item">Link Two</a>
<a href="" class="dropdown-item">Link Three</a>
</div>
</div>
</div>
<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect02">
<option selected>Choose..</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputGroupFile">
<label class="input-group-text" for="inputGroupFile">Upload</label>
</div>
</div>
<div class="col">
<div class="input-group mb-3">
<input type="text" class="form-control">
<span class="input-group-text">@gmail.com</span>
</div>
<div class="input-group input-group-lg mb-3">
<input type="text" class="form-control">
<span class="input-group-text">@gmail.com</span>
</div>
<div class="input-group input-group-sm mb-3">
<input type="text" class="form-control">
<span class="input-group-text">@gmail.com</span>
</div>
</div>
</div>
</div>
</body>
</html>
Below File is css/Input_Group_Classes_Bootstrap_CSS.css File
.container {
border: 5px solid #000000;
}
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment