Mục lục
Hướng dẫn và ví dụ tiện ích Bootstrap Sizing
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


Bootstrap Sizing là một tiện ích của Bootstrap, nó cung cấp một vài lớp giúp bạn thiết lập chiều rộng và chiều cao cho phần tử.
Class .w-*
Lớp | Mô tả |
w-25 | Tương đương với sử dụng Css {width: 25%}. |
w-50 | Tương đương với sử dụng Css {width: 50%}. |
w-75 | Tương đương với sử dụng Css {width: 75%}. |
w-100 | Tương đương với sử dụng Css {width: 100%}. |
w-auto | Tương đương với sử dụng Css {width: auto}. |
w-example
<div class="border p-1">
<div class="w-25 p-3 bg-primary">Width 25%</div>
<div class="w-50 p-3 bg-secondary">Width 50%</div>
<div class="w-75 p-3 bg-info">Width 75%</div>
<div class="w-100 p-3 bg-danger">Width 100%</div>
<div class="w-auto p-3 bg-success">Width auto</div>
</div>
Class .h-*
Lớp | Mô tả |
h-25 | Tương đương với sử dụng Css {height: 25%}. |
h-50 | Tương đương với sử dụng Css {height: 50%}. |
h-75 | Tương đương với sử dụng Css {height: 75%}. |
h-100 | Tương đương với sử dụng Css {height: 100%}. |
h-auto | Tương đương với sử dụng Css {height: auto}. |
h-example
<div class="border p-1 mt-3" style="height:155px;">
<div class="h-25 bg-primary" style="display:inline-block; width: 55px;">
.h-25
</div>
<div class="h-50 bg-secondary" style="display:inline-block; width: 55px;">
.h-50
</div>
<div class="h-75 bg-info" style="display:inline-block; width: 55px;">
.h-75
</div>
<div class="h-100 bg-danger" style="display:inline-block; width: 55px;">
.h-100
</div>
<div class="h-auto bg-success" style="display:inline-block; width: 70px;">
.h-auto
</div>
</div>
.mw-100, .mh-100
Lớp | Mô tả |
.mw-100 | Tương đương với sử dụng Css {max-width: 100%}. |
.mh-100 | Tương đương với sử dụng Css {max-height: 100%}. |
mw-100-example
<h4>Image with max-width:100%</h4>
<img class="mw-100" src="../images/flower.jpeg" alt="Max width 100%">
