Bài 35: Input Group trong Bootstrap 5
Nhóm input hay Input Group trong Bootstrap 5 mang tới cho bạn cách đơn giản để mở rộng một Input Control. Dưới đây là cách dùng Input Group trong Bootstrap 5.
Input Group
Class .input-group
là một container nâng cao input bằng cách thêm icon, văn bản hoặc một nút bấm ở phía trước hay phía sau trường nhập dưới dạng “help text” - văn bản trợ giúp.
Để định dạng kiểu text trợ giúp, dùng class .input-group-text
:
Code mẫu:
<form>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Your Email">
<span class="input-group-text">@example.com</span>
</div>
</form>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Input Group cho Quantrimang.com</h2>
<form action="/action_page.php">
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Tên người dùng" name="usrname">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Địa chỉ email của bạn" name="email">
<span class="input-group-text">@example.com</span>
</div>
<button type="submit" class="btn btn-primary">Đăng ký</button>
</form>
</div>
</body>
</html>
Kích thước Input Group
Dùng class .input-group-sm
cho các nhóm input nhỏ và .input-group-lg
cho các nhóm input lớn. Code mẫu:
<div class="input-group mb-3 input-group-sm">
<span class="input-group-text">Small</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Default</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3 input-group-lg">
<span class="input-group-text">Large</span>
<input type="text" class="form-control">
</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Kích thước nhóm Input</h2>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Nhỏ</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Mặc định</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text">Lớn</span>
<input type="text" class="form-control">
</div>
</div>
</body>
</html>
Nhiều Input và Helper
Thêm nhiều input và addon như code mẫu:
<!-- Multiple inputs -->
<div class="input-group mb-3">
<span class="input-group-text">Person</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
<!-- Multiple addons / help text -->
<div class="input-group mb-3">
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
<input type="text" class="form-control">
</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>Thêm nhiều input hoặc addon:</p>
<!-- Multiple inputs -->
<div class="input-group mb-3">
<span class="input-group-text">Họ tên</span>
<input type="text" class="form-control" placeholder="Tên">
<input type="text" class="form-control" placeholder="Họ">
</div>
<!-- Multiple addons / help text -->
<div class="input-group mb-3">
<span class="input-group-text">Quantrimang 1</span>
<span class="input-group-text">Quantrimang 2</span>
<span class="input-group-text">Quantrimang 3</span>
<input type="text" class="form-control">
</div>
</div>
</body>
</html>
Input Group với checkbox và radio
Bạn cũng có thể dùng các ô tích hoặc radio button thay cho text. Code mẫu:
<div class="input-group mb-3">
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input type="radio">
</div>
<input type="text" class="form-control" placeholder="Some text">
</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2> Chọn trang bạn thích </h2>
<!-- Multiple inputs -->
<div class="input-group mb-3">
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control" placeholder="Quantrimang">
</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input type="radio">
</div>
<input type="text" class="form-control" placeholder="Downloadvn">
</div>
</div>
</body>
</html>
Các nút Input Group
Code mẫu:
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button">Basic Button</button>
<input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Something clever..">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Nút bấm nhóm input</h3>
<div class="input-group mb-3 mt-3">
<button class="btn btn-outline-primary" type="button">Nút bấm cơ bản</button>
<input type="text" class="form-control" placeholder="Truy cập Quantrimang.com">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Tìm kiếm">
<button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Xem...">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
</div>
</body>
</html>
Input Group với nút bấm thả xuống
Thêm một nút bấm thả xuống trong nhóm input. Lưu ý rằng bạn không cần “wrapper” .dropdown
như bình thường.
Code mẫu:
<div class="input-group mt-3 mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
<input type="text" class="form-control" placeholder="Username">
</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="input-group mt-3 mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Nút bấm thả xuống
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link Quantrimang 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
<input type="text" class="form-control" placeholder="Quantrimang.com">
</div>
</div>
</body>
</html>
Trên đây là những điều bạn cần biết về cách tạo Input Group trong Bootstrap 5. Hi vọng bài học Bootstrap kèm ví dụ này hữu ích với các bạn.
Bạn nên đọc
-
Bài 33: Checkbox và Radio Button trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 31: Tạo Form trong Bootstrap 5
-
Bài 30: Flex trong Bootstrap 5
-
Bài 34: Range trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 32: Menu lựa chọn trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 6: Bảng trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Hình ảnh chào buổi sáng, hình ảnh chào ngày mới đẹp
Hôm qua -
Hướng dẫn tự tạo mod Minecraft để chơi game theo phong cách của bạn
Hôm qua 1 -
Hướng dẫn cách đăng nhập vào máy tính khi quên mật khẩu
Hôm qua 1 -
Cách tải LOL PBE, tạo tài khoản PBE DTCL mùa 14 Thành Phố Công Nghệ
Hôm qua 17 -
Cách tắt Windows Update trên Windows 10, tắt update win 10 vĩnh viễn
Hôm qua 18 -
Ảnh Free Fire giàu, ảnh nick Free Fire giàu, ảnh acc Free Fire giàu
Hôm qua -
57+ câu đố về địa danh Việt Nam
Hôm qua 5 -
Email "Facebook Protect" từ "Security@facebookmail.com" có hợp pháp không?
Hôm qua -
Icon chim cánh cụt có nghĩa là gì?
Hôm qua -
6 cách xóa file vĩnh viễn trên Windows
Hôm qua 3