Tiện ích Bootstrap 4

Bootstrap 4 có rất nhiều lớp tiện ích/trợ giúp để nhanh chóng tạo kiểu cho các phần tử mà không cần sử dụng bất kỳ mã CSS nào.

Biên giới

Sử dụng các lớp border để thêm hoặc xóa đường viền khỏi một phần tử:

Ví dụ

`.m-# / m-*-#`	lề ở tất cả các bên	Thử nó
`.mt-# / mt-*-#`	lề trên	Thử nó
`.mb-# / mb-*-#`	lề dưới	Thử nó
`.ml-# / ml-*-#`	lề trái	Thử nó
`.mr-# / mr-*-#`	lề phải	Thử nó
`.mx-# / mx-*-#`	lề trái và phải	Thử nó
`.my-# / my-*-#`	lề trên và dưới	Thử nó
`.p-# / p-*-#`	đệm ở tất cả các mặt	Thử nó
`.pt-# / pt-*-#`	đệm đầu	Thử nó
`.pb-# / pb-*-#`	đệm đáy	Thử nó
`.pl-# / pl-*-#`	phần đệm bên trái	Thử nó
`.pr-# / pr-*-#`	đệm bên phải	Thử nó
`.py-# / py-*-#`	đệm trên và dưới	Thử nó
`.px-# / px-*-#`	đệm trái và phải	Thử nó

Class	Description	Example
`.display-*`	Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: `.display-1` , `.display-2` , `.display-3` , `.display-4`	Try it
`.font-weight-bold`	Bold text	Try it
`.font-weight-bolder`	Bolder bold text	Try it
`.font-weight-normal`	Normal text	Try it
`.font-weight-light`	Light weight text	Try it
`.font-weight-lighter`	Lighter weight text	Try it
`.font-italic`	Italic text	Try it
`.lead`	Makes a paragraph stand out	Try it
`.small`	Indicates smaller text (set to 85% of the size of the parent)	Try it
`.text-break`	Prevents long text from breaking layout	Try it
`.text-center`	Indicates center-aligned text	Try it
`.text-decoration-none`	Removes the underline from a link	Try it
`.text-left`	Indicates left-aligned text	Try it
`.text-justify`	Indicates justified text	Try it
`.text-monospace`	Monospaced text	Try it
`.text-nowrap`	Indicates no wrap text	Try it
`.text-lowercase`	Indicates lowercased text	Try it
`.text-reset`	Resets the color of a text or a link (inherits the color from its parent)	Try it
`.text-right`	Indicates right-aligned text	Try it
`.text-uppercase`	Indicates uppercased text	Try it
`.text-capitalize`	Indicates capitalized text	Try it
`.initialism`	Displays the text inside an `<abbr>` element in a slightly smaller font size	Try it
`.list-unstyled`	Removes the default list-style and left margin on list items (works on both `<ul>` and `<ol>` ). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)	Try it
`.list-inline`	Places all list items on a single line (used together with `.list-inline-item` on each <li> elements)	Try it
`.pre-scrollable`	Makes a `<pre>` element scrollable	Try it

Class	Description	Example
`.d-none`	Hides an element	Try it
`.d-*-none`	Hides an element on a specific screen size	Try it
`.d-inline`	Makes an element inline	Try it
`.d-*-inline`	Makes an element inline on a specific screen size	Try it
`.d-inline-block`	Makes an element inline block	Try it
`.d-*-inline-block`	Makes an element inline block on a specific screen size	Try it
`.d-table`	Makes an element display as a table	Try it
`.d-*-table`	Makes an element display as a table on a specific screen size	Try it
`.d-table-cell`	Makes an element display as a table cell	Try it
`.d-*-table-cell`	Makes an element display as a table cell on a specific screen size	Try it
`.d-table-row`	Makes an element display as a table row	Try it
`.d-*-table-row`	Makes an element display as a table row on a specific screen size	Try it
`.d-flex`	Creates a flexbox container and transforms direct children into flex items	Try it
`.d-*-flex`	Creates a flexbox container on a specific screen size	Try it
`.d-inline-flex`	Creates an inline flexbox container	Try it
`.d-*-inline-flex`	Creates an inline flexbox container on a specific screen size	Try it

Câu đố

Được chứng nhận

Đăng nhập Đăng ký

Người tìm đường và việc học của tôi

Nâng cấp

Bắt đầu từ đâu

Trình chỉnh sửa mã (Dùng thử)

Video

Mẫu

Web hosting

Tạo một máy chủ

Làm thế nào để

Khung CSS

Thống kê trình duyệt

Tốc độ gõ

Đào tạo AWS

Bộ chọn màu

Trò chơi mã

Đặt mục tiêu

Bản tin

Việc làm

Liên hệ chúng tôi

Lớp học

Hướng dẫn khởi động 4

Lưới Bootstrap 4

Bootstrap 4 Khác

Bootstrap 4 Tham chiếu

Tiện ích Bootstrap 4

Tiện ích Bootstrap 4

Biên giới

Ví dụ

Ví dụ

Màu viền

Ví dụ

Ví dụ

Bán kính đường viền

Ví dụ

Ví dụ

Float và Clearfix

Ví dụ

Ví dụ

Phao đáp ứng

Ví dụ

Ví dụ

Căn giữa

Ví dụ

Ví dụ

Chiều rộng

Ví dụ

Ví dụ

Chiều cao

Ví dụ

Ví dụ

khoảng cách

Ví dụ

Ví dụ

Thêm ví dụ về khoảng cách

Bóng tối

Ví dụ

Ví dụ

Căn dọc

Ví dụ

Ví dụ

Nhúng đáp ứng

Ví dụ

Ví dụ

Hiển thị

Ví dụ

Ví dụ

Chức vụ

Ví dụ

Ví dụ

Ví dụ

Đóng biểu tượng

Ví dụ

Ví dụ

Trình đọc màn hình

Ví dụ

Màu sắc

Ví dụ