Bố cục linh hoạt với Bootstrap

Trung Nguyen
16/03/2022
4 min read

Nội dung chính của bài viết

Trong hướng dẫn này, bạn sẽ học cách tạo bố cục linh hoạt với Bootstrap (Bootstrap Fluid Layout).

Tạo bố cục linh hoạt với Bootstrap

Trong Bootstrap, bạn có thể sử dụng lớp .container-fluid để tạo bố cục linh hoạt nhằm sử dụng 100% chiều rộng của khung nhìn trên tất cả các thiết bị (extra small, small, medium, large, extra large và extra-extra large).

Lớp .container-fluid chỉ đơn giản là áp dụng width: 100% thay vì chiều rộng khác nhau cho các kích thước khung nhìn khác nhau. Tuy nhiên, bố cục sẽ vẫn đáp ứng và bạn có thể sử dụng các lớp lưới như bình thường. Xem hướng dẫn về Bootstrap Grid để tìm hiểu thêm về các lớp lưới.

Ví dụ sau sẽ tạo một bố cục linh hoạt bao phủ 100% chiều rộng của màn hình.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Fluid Layout Example</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Comdy</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Services</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>
            <div class="navbar-nav ms-auto">  
                <a href="#" class="nav-item nav-link">Register</a>            	
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="p-5 my-4 bg-light rounded-3">
        <h1>Learn to Create Websites</h1>
        <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://comdy.vn" class="text-success" target="_blank">comdy.vn</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
        <p><a href="https://comdy.vn" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
            <p><a href="https://comdy.vn/lap-trinh-html-co-ban/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>CSS</h2>
            <p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
            <p><a href="https://comdy.vn/lap-trinh-css/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Bootstrap</h2>
            <p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
            <p><a href="https://comdy.vn/bootstrap/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright &copy; 2021 Comdy</p>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="#" class="text-dark">Terms of Use</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Privacy Policy</a>
            </div>
        </div>
    </footer>
</div>
</body>
</html>

Kết quả của ví dụ trên sẽ giống như sau: