Bài 35: Input Group trong Bootstrap 5

Chí Vỹ

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>

Nhóm nhập trong Bootstrap

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>

Kích thước nhóm trường nhập trên Bootstrap

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>

Thêm nhiều input hoặc addon

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>

Nhóm Input trong Bootstrap 5

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>

Nhóm nút bấm cho trường nhập

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>

Nhóm input kèm nút bấm thả xuống

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.

Thứ Sáu, 09/12/2022 10:47

5 ★ 1 👨 698

#Bootstrap

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!

0 Bình luận

Sắp xếp theo

Xóa Đăng nhập để Gửi

Bootstrap

Cũ vẫn chất

Xem thêm

Bootstrap 5

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Phường Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: info@meta.vn. Chịu trách nhiệm nội dung: Lê Ngọc Lam.

Bài 35: Input Group trong Bootstrap 5

Input Group

Kích thước Input Group

Nhiều Input và Helper

Input Group với checkbox và radio

Các nút Input Group

Input Group với nút bấm thả xuống

Bạn nên đọc

Bài 10: Button trong Bootstrap 5

Bài 30: Flex trong Bootstrap 5

Bài 2: Tìm hiểu về Container trong Bootstrap 5

Bài 33: Checkbox và Radio Button trong Bootstrap 5

Bài 34: Range trong Bootstrap 5

Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?

Bài 7: Ảnh trong Bootstrap 5

Bài 3: Hệ thống lưới Grid System trong Bootstrap 5

Bài 5: Màu sắc trong Bootstrap 5

Cũ vẫn chất

Lời chúc 1-6 cho con hay và ý nghĩa

Cách xóa Fanpage Facebook trên điện thoại, máy tính

10 vị tướng vĩ đại nhất trong lịch sử thế giới do Hội đồng khoa học Hoàng gia Anh xét phong

Cách dùng Ultraviewer gửi và nhận file

Cấu hình Wuthering Waves mới nhất

Proxy và VPN khác gì nhau?

Lập trình game Mèo Đuổi Chuột cùng Scratch

Công cụ chuyển đổi tiếng Việt sang teencode

Giảm dung lượng ảnh, cách nén ảnh online miễn phí

Cài Ultraviewer cho Win 10, cách sử dụng UltraViewer trên máy tính