Tổng hợp các mẫu Bootstrap 5 miễn phí tốt nhất

Bootstrap 5 cho bạn những mã nguồn lập trình web tuyệt vời. Dưới đây là những mẫu Bootstrap 5 miễn phí tốt nhất cho bạn tham khảo.

Ví dụ mẫu Bootstrap 5 cơ bản

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Website 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>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>

<div class="p-5 bg-primary text-white text-center">
<h1>Trang Quantrimang.com đầu tiên</h1>
<p>Thay đổi kích thước trang responsive này để thấy sự thay đổi</p>
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Không hoạt động</a>
</li>
</ul>
</div>
</nav>

<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h2>Giới thiệu về Quantrimang</h2>
<h5>Logo</h5>
<div class="fakeimg">Ảnh đại diện</div>
<p>Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...</p>
<h3 class="mt-4">Liên kết</h3>
<p>Quantrimang</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>10 vật liệu cứng nhất hành tinh</h2>
<div class="fakeimg">Ảnh</div>
<p>Nội dung</p>
<p>Nhờ công nghệ tiên tiến, các nhà khoa học đã cho ra đời những "siêu vật liệu" nhân tạo có độ cứng vượt trội hơn nhiều kim cương. Dưới đây là 10 siêu vật liệu cứng nhất trên thế giới hiện nay, theo thứ tự tăng dần.</p>

<h2 class="mt-5">Cận cảnh cú đớp mồm nhanh nhất thế giới động vật, 1/6000 giây</h2>
<h5>2/9/2020</h5>
<div class="fakeimg">Ảnh</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>

<div class="mt-5 p-4 bg-dark text-white text-center">
<p>Footer</p>
</div>

</body>
</html>

Mẫu Bootstrap cơ bản

Mẫu Bootstrap 5 miễn phí tốt nhất

Soft UI

Soft UI

Soft UI có hơn 7.000 lượt tải và được đánh giá 5/5 sao. Con số đó đã đủ cho thấy sự hấp dẫn của mẫu Bootstrap 5 này. Nếu đang xây dựng một dashboard, đây là gợi ý đáng thử dành cho bạn. Bạn sẽ có một bộ sưu tập 70 phần tử, một plugin và 7 trang thực hành trong mẫu này. Bạn có quyền kết hợp các phần tử như ý muốn.

SaaSpal

SaaSpal

SaaSpal đúng như tên gọi. Nó là một mẫu Bootstrap5 miễn phí cho mọi phần mềm và web liên quan tới ứng dụng. Thiết kế hiện đại và sáng tạo nhanh chóng đưa mọi nhân tố trên sản phẩm của bạn lên một tầm cao mới.

SaaSpal cũng là mẫu một trang. Điều đó có nghĩa, nội dung sẽ được hiển thị toàn bộ trên một trang, chỉ sau một vài lần cuộn.

AppGrids

AppGrids

Nếu đang muốn tạo một trang đích cho ứng dụng, hãy thử AppGrids. Đây là mẫu Bootstrap 5 miễn phí hữu ích, dùng HTML5 và đảm bảo mang tới cho bạn một trải nghiệm code tuyệt vời, ngay cả với người mới bắt đầu.

Tuy nhiên, phiên bản miễn phí của AppGrids chỉ dành cho người dùng cá nhân. Bạn thoải mái tạo trang quảng cáo chính xác như ý muốn mà không phải bắt đầu lại từ đầu. Rất nhiều lựa chọn có sẵn, chỉ đợi bạn thêm chi tiết và nội dung.

Thứ Tư, 14/12/2022 09:50
52 👨 1.206
0 Bình luận
Sắp xếp theo
    ❖ Bootstrap