Các tiện tích trình bày Text

.text-{breakpoint}-{left|right|center}
Đó là các lớp để căn lề trái, phải, giữa của dòng chữ (.text-right, .text-md-center ...)
.text-monospace
class thiết lập chữ hiện thị ở font monospace
.text-justify
dãn đều dòng chữ
.text-nowrap
Thiết lập dòng chữ không có chế độ wrap (không ngắt dòng)
.text-truncate
Cắt chữ khi vượt quá chiều dài dòng
.text-lowercase
Chuyển thành chữ thường
.text-uppercase
Chuyển thành chữ in hoa
.text-capitalize
In hoa ký tự đầu
.font-weight-(light|normal|bold)
Thiết lập chữ mỏng, bình thường, đậm
.font-italic
Chữ nghiêng
.text-(white|primary| secondary|success|info|warning|danger| light| dark|muted)
Thiết lập màu chữ
.display-(1|2|3|4)
Sử dụng thiết lập tiêu đề trong trang
.lead
Làm nổi bật một đoạn văn (ví dụ tóm tắt nội dung)
.mark
Đánh dấu một đoạn văn
.small
Đánh dấu một đoạn văn có chữ nhỏ hơn
.blockquote
Tạo một hiện thị trích dẫn
.list-unstyled
Đánh dấu ul, li bỏ kiểu trình bày danh sách
.list-inline
Đánh dấu ul hiện thị dạng inline
.list-inline-item
Đánh dấu li hiện thị dạng inline float left

Ví dụ

<p class="text-right text-danger font-weight-bold font-italic text-uppercase">
    Đây là dòng chữ Ví dụ
</p>

Đây là dòng chữ Ví dụ

Căn lề theo chiều đứng các phần tử

.align-{baseline|top|middle|bottom|text-bottom|text-top}

Các lớp căn lề theo chiều đứng chỉ áp dụng cho các phần tủ inline, inline-block. inline-table và các cell trong bảng

<p class="bg-secondary text-light text-center" style="line-height: 40px">
    <span class="align-baseline">baseline</span>
    <span class="align-top">top</span>
    <span class="align-middle">middle</span>
    <span class="align-bottom">bottom</span>
    <span class="align-text-top">text-top</span>
    <span class="align-text-bottom">text-bottom</span>
</p>

baseline top middle bottom text-top text-bottom

Thiết lập margin và padding

Các lớp thiết lập margin là m{sides}-{size} hoặc m{sides}-{breakpoint}-{size}

Các lớp thiết lập padding là p{sides}-{size} hoặc p{sides}-{breakpoint}-{size}

Trong đó:

<div class="mx-auto p-1 bg-danger text-white text-center" style="width: 200px;">
    Hộp này nằm ở giữa do mx-auto
</div>
Hộp này nằm ở giữa do mx-auto

Thiết lập màu nền

Có các lớp:

bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-light
bg-dark
bg-white
bg-transparent

Thiết lập thuộc tính display

Thuộc tính CSS display nhận các giá trị none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex có thể thiết lập trong Bootstrap với các class có cấu trúc

.d-{breakpoint}-{value} ví dụ .d-none, .d-sm-inline, .d-lg-flex...

Thiết lập hiện thị phần tử dùng .visible

Thiết lập ẩn phần tử dùng .invisible

Thiết lập thuộc tính float

Thuộc tính CSS float nhận các giá trị left, right, none có thể thiết lập trong Bootstrap với các class có cấu trúc

.float-{breakpoint}-{value} ví dụ .float-none, .float-sm-right, .float-lg-left...

Muốn hủy thuộc tính float của một phần tử dùng class clearfix

Thiết lập thuộc tính position

Đó là các class: .position-(static|relative|absolute|fixed|sticky), .fixed-top, .fixed-bottom

Thiết lập thuộc border

Cạnh được kẻ

Màu đường kẻ thiết lập bằng các class: .border-(primary|secondary|success| danger|warning|info|light|dark|white)

Góc thiết lập bo tròn sử dụng các class:

Đổ bóng hình hộp

Thiết lập chiều cao, chiều rộng

Nhúng Video

Cách để nhúng Video đảm bảo tính năng responsive

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" 
        src="https://www.youtube.com/embed/xxxxx?rel=0" allowfullscreen></iframe>
</div>

FlexBox với Bootstrap

Bootstrap triển khai theo cách phong phú hơn về flexbox, tuy nhiên cơ bản đều thiết lập các tính năng tiện ích của flexbox như nội dung trong CSS thông thường, nên cần thiết đọc hiểu CSS flexbox trước

.flex trong Bootstrap là phần nhân quan trọng nhất nên hãy cố gắp hiểu thật tốt phần này

Phần tử chứa - kích hoạt có tính năng flexbox

Sử dụng các lớp: .d-flex hoặc .d-{breakpoint}-flex như .d-sm-flex, nếu áp dụng kiểu inline-flex thì sử dụng lớp .d-inline-flex hoặc .d-{breakpoint}-inline-flex

<div class="d-flex">
<!--Code HTML-->
</div>

Phần tử chứa - thiết lập flex-wrap

Như đã biết thuộc tính CSS flex-wrap nhận các giá trị nowrap, wrap, wrap-reverse gọi chúng là {wrap}. Trong Bootstrap các giá trị này thiết lập bàng lớp .flex-{breakpoints}-{wrap} như:

  • .flex-nowrap, .flex-wrap, .flex-reverse
  • .flex-sm-nowrap, .flex-lg-wrap, .flex-md-reverse ...

Ví dụ .flex-wrap - phần tử con xuống dòng mới khi vượt kích thước phần tử chứa

<div class="d-flex flex-wrap">
   <div class="bg-primary p-2 m-2">PT1</div>
    <div class="bg-primary p-2 m-2">PT2</div>
    <div class="bg-primary p-2 m-2">PT3</div>
    <div class="bg-primary p-2 m-2">PT4</div>
    <div class="bg-primary p-2 m-2">PT5</div>
    <div class="bg-primary p-2 m-2">PT6</div>
    <div class="bg-primary p-2 m-2">PT7</div>
    <div class="bg-primary p-2 m-2">PT8</div>
    <div class="bg-primary p-2 m-2">PT9</div>
    <div class="bg-primary p-2 m-2">PT10</div>
    <div class="bg-primary p-2 m-2">PT11</div>
    <div class="bg-primary p-2 m-2">PT12</div>
</div>
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12

Phần tử chứa - thiết lập hướng chính flex-direction

Như đã biết hướng chính của flexbox nhận các giá trị: row, row-reverse, column, column-reverse gọi chúng là {direction}

Để thiết lập các giá trị này cho phần tử dùng đến các thuộc tính: .flex-{direction} hoặc .flex-{breakpoint}-{direction} như:

  • .flex-row, .flex-column, .flex-column-reverse, .flex-row-reverse
  • .flex-xs-row, .flex-sm-column, .flex-lg-column-reverse, .flex-md-row-reverse ...

Ví dụ .flex-column - đổi hướng chính thẳng đứng

<div class="d-flex flex-wrap flex-column">
    <div class="bg-primary p-2 m-2">PT1</div>
    <div class="bg-primary p-2 m-2">PT2</div>
</div>
PT1
PT2

Phần tử chứa - đẩy phần tử con theo hướng chính justify-content

Trong phần CSS flexbox, đã biết thuộc tính justify-content để đẩy các phần tử con về một phía nào đó theo hướng chính, nhận các giá trị flex-start, flex-end, center, space-around, space-between thì trong Bootstrap các giá trị này viết là start, end, center, around, between ký hiệu chúng là {values}

Các thuộc tính thiết lập là: justify-content-{values} hoặc justify-content-{breakpoint}-{values}

Ví dụ hướng chính là nằm ngang, thì .justify-content-end đẩy các phần tử con về cuối hàng

<div class="d-flex justify-content-end">
    <div class="bg-primary p-4 m-2">PT1</div>
    <div class="bg-primary p-4 m-2">PT2</div>
</div>
PT1
PT2

Phần tử chứa - đẩy phần tử con theo hướng vuông góc align-items

Trong CSS flexbox, khi sư dụng thuộc tính align-items là nhằm đẩy các phần tử con theo hướng VUÔNG GÓC HƯỚNG CHÍNH

Sử dụng các class .align-items-{values} hoặc .align-items-{breakpoints}-{values} trong đó values là các giá trị stretch, center, baseline, around, between

Ví dụ hướng chính nằm ngang, thì align-items-center sẽ điều chỉnh phần tử con nằm giữa box theo phương đứng

<div class="bg-warning d-flex align-items-center" 
    style="height: 100px">
    <div class="bg-primary p-2 m-2">PT1</div>
    <div class="bg-primary p-2 m-2">PT2</div>
</div>
PT1
PT2

align-items-center đẩy phần tử xuống đáy box theo phương đứng, thử kết hợp với justify-content-center thì nó đẩy thêm nằm giữa theo phương ngang

<div class="bg-warning d-flex align-items-end justify-content-center"
     style="height: 100px">
    <div class="bg-primary p-2 m-2">PT1</div>
    <div class="bg-primary p-2 m-2">PT2</div>
</div>
PT1
PT2

Phần tử chứa - căn chỉnh chi có nhiều hàng (cột) align-content

Khi phần tử chứa có .flex-wrap, nếu các phần tử con bị chia ra thành nhiều hàng (hoặc cột) thì lúc này có thể sử dụng đến các thuộc tính .align-content-{values} hoặc .align-content-{breakpoint}-{values}

Với {values} là start, end, center, around, stretch

Tác động của các lớp này tương tự như ví dụ trong phần FlexBox


Phần tử con - trôi theo hướng vuông góc align-self

Đây là cách thiết lập cấp độ phần tử con, thiết lập hiệu lực riêng cho phần tử con cụ thể, nó thiết lập nó trôi về phía nào theo hướng vuông góc với chính.

Sử dụng class .align-self-{values} hoặc .align-self-{breakpoints}-{values}

Với values là: start, end, center, baseline, stretch

<div class="bg-warning d-flex align-items-sm-start" style="height: 100px">
    <div class="bg-primary p-2 m-2 align-self-center">PT1</div>
    <div class="bg-primary p-2 m-2 align-self-end">PT2</div>
    <div class="bg-primary p-2 m-2 align-self-stretch">PT3</div>
    <div class="bg-primary p-2 m-2">PT4</div>
</div>
PT1
PT2
PT3
PT4

Phần tử con - Fill

Nếu các phần tử con trong .flex có lớp .flex-fill thì nó ép các phần tử con đó theo hướng chính kích thước sẽ bằng nhau

<div class="d-flex ">
    <div class="bg-primary p-2 m-2 flex-fill ">PT1</div>
    <div class="bg-primary p-2 m-2 flex-fill ">PT2</div>
    <div class="bg-primary p-2 m-2 flex-fill ">PT3</div>
    <div class="bg-primary p-2 m-2 flex-fill ">PT4</div>

</div>
PT1
PT2
PT3
PT4

Phần tử con - Grow

Phần tử con kích hoạt với lớp .flex-grow-1 thì kích thước theo hướng chính của nó sẽ mở rộng tối đa kích thước có thể có trong phần tử chữa

<div class="d-flex">
    <div class="bg-primary p-2 m-2 flex-grow-1">PT1</div>
    <div class="bg-primary p-2 m-2">PT2</div>
    <div class="bg-primary p-2 m-2">PT3</div>
    <div class="bg-primary p-2 m-2">PT4</div>
</div>
PT1
PT2
PT3

Phần tử con - đẩy phần tử bằng margin

Nếu phần tử chứa có hướng chính nằm ngang, thì phần tử con nào có .mr-auto thì sẽ đẩy các phần tử bên phải nó trôi về phải của phần tử chứa, nếu có .ml-auto thì nó đẩy các phần tử con bên trái nó trôi về bên trái phần tử chứa

Nếu phần tử chứa có hướng chính thẳng đứng (.flex-column) thì phần tử nào có .mb-auto thì nó sẽ đẩy các phần tử dưới nó về đáy của phần tử, nếu có .mt-auto sẽ đẩy phần tủ trên nó về phía trên phần tử chứa.

<div class="d-flex">
    <div class="bg-primary p-2 m-2">PT1</div>
    <div class="bg-primary p-2 m-2 mr-auto">PT2</div>
    <div class="bg-primary p-2 m-2">PT3</div>
    <div class="bg-primary p-2 m-2">PT4</div>
</div>
PT1
PT2
PT3
PT4

Phần tử con - đổi thứ tự hiện thị

FlexBox có thuộc tính order gán bằng một con số là thứ tự hiện thị phần tử. Đặc tính này cho phép đổi thứ tự hiện thị mà không cần thay code HTML. Mặc định thứ tự hiện thị theo vị trí code HTML cái nào viết code trước thì hiện thị trước, tuy nhiên Bootstrap cho phép điều chỉnh bằng các lớp order-0 đến order-12

<div class="d-flex">
    <div class="bg-primary p-2 m-2 order-2">PT1</div>
    <div class="bg-primary p-2 m-2 order-3">PT2</div>
    <div class="bg-primary p-2 m-2 order-1">PT3</div>
</div>
PT1
PT2
PT3