Cách đặt hai thẻ cạnh nhau trong HTML
|
Cái này đã có trong tài liệu Bootstrap. Nhưng tôi nghĩ phải mất một thời gian để tìm ra nơi. Dưới đây là giải thích chi tiết về cách bạn có thể tạo một hàng Bootstrap 5 thẻ cạnh nhau có cùng chiều cao đầu ra cuối cùng tiêu đề thẻMột số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và chiếm phần lớn nội dung của thẻ. Một số văn bản mẫu nhanh hơn cho nội dung của thẻ Hôm nay chúng ta sẽ xem các thẻ side by side sử dụng bootstrap 5. Chúng tôi sẽ tạo các thẻ hàng 3 và 4, thẻ phản hồi cạnh nhau với lưới bootstrap 5. trước tiên bạn cần thiết lập bootstrap v5. 2 dự án. bạn có thể sử dụng cdn hoặc đọc bài viết dưới đây Cách cài đặt Bootstrap 5. 2 với Vite Bootstrap 5 ví dụ về thẻ cạnh nhau1. Bootstrap 5 cạnh nhau 3 thẻ <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap v5.2 side by side Examplestitle> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 1h5> <p class="card-text">Some quick example text to build on the card title and make up thep> <a href="#" class="btn btn-primary">Read Morea> div> div> div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 2h5> <p class="card-text">Some quick example text to build on the card title and make up thep> <a href="#" class="btn btn-primary">Read Morea> div> div> div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 3h5> <p class="card-text">Some quick example text to build on the card title and make up thep> <a href="#" class="btn btn-primary">Read Morea> div> div> div> div> div> body> html> bootstrap 5 cạnh nhau 3 thẻ có lưới 2. Bootstrap 5 cạnh nhau 4 thẻ
3. Bootstrap 5 Cạnh 2 thẻ với thẻ ngắn và thẻ dài
bootstrap 5 cạnh nhau hai thẻ |
