Bootstrap 4 - Bootstrap Helper Classes

Helper classes background color trong bootstrap

Tương tư như như các class màu sắc văn bản thì bootstrap 3 cũng hỗ trợ chúng ta các class tạo ra màu nền như sau:

Ví dụ:

  <p class="text-primary">.text-primary</p>
    <p class="text-secondary">.text-secondary</p>
    <p class="text-success">.text-success</p>
    <p class="text-danger">.text-danger</p>
    <p class="text-warning">.text-warning</p>
    <p class="text-info">.text-info</p>
    <p class="text-light bg-dark">.text-light</p>
    <p class="text-dark">.text-dark</p>
    <p class="text-body">.text-body</p>
    <p class="text-muted">.text-muted</p>
    <p class="text-white bg-dark">.text-white</p>
    <p class="text-black-50">.text-black-50</p>
    <p class="text-white-50 bg-dark">.text-white-50</p>

Xem ví dụ


Lớp Màu Nền Trong Bootstrap

Tương tự như các lớp màu theo ngữ cảnh, chúng ta có thể sử dụng các lớp màu nền theo ngữ cảnh để thiết lập cho thuộc tính background-color của phần tử để nhấn mạnh thêm phần tử đó.

Ví dụ:

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info text-white">.bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Xem ví dụ


Các Lớp Căn Chỉnh Văn Bản

Bằng cách sử dụng các lớp căn chỉnh văn bản để căn chỉnh và định dạng nội dung văn bản.

Ví dụ:

<h2>Text alignment</h2>
    <p class="text-left">Left aligned text on all viewport sizes.</p>
    <p class="text-center">Center aligned text on all viewport sizes.</p>
    <p class="text-right">Right aligned text on all viewport sizes.</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.</p>
    <hr>
    <h2>Responsive Text alignment</h2>
    <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
    <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
    <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
    <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
    <hr>
    <h2>Text wrapping and overflow</h2>
    <p class="badge badge-primary text-wrap" style="width: 6rem;">This text should wrap.</p>
    <p class="text-nowrap bd-highlight" style="width: 10rem;">No wrap text. This text should overflow the parent.</p>
    <!-- Block level -->
    <div class="row">
        <div class="col-2 text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <!-- Inline level -->
    <span class="d-inline-block text-truncate" style="max-width: 150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <hr>
    <h2>Word break</h2>
    <p class="text-break">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    <hr>
    <h2>Text transform</h2>
    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">CapiTaliZed text.</p>
    <hr>
    <h2>Font weight and italics</h2>
    <p class="font-weight-bold">Bold text.</p>
    <p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
    <p class="font-weight-normal">Normal weight text.</p>
    <p class="font-weight-light">Light weight text.</p>
    <p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
    <p class="font-italic">Italic text.</p>
    <hr>
    <h2>Monospace</h2>
    <p class="text-monospace">This is in monospace</p>
    <hr>
    <h2>Reset color</h2>
    <p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a>.</p>
    <hr>
    <h2>Text decoration</h2>
    <a href="#" class="text-decoration-none">Non-underlined link</a>

Xem ví dụ


 Các Lớp Viền Trong Bootstrap

Bằng cách sử dụng các lớp tiện ích viền để thiết lập kiểu đường viền và kích thước viền cho phần tử.

Ví dụ:

 <span class="border"></span>
    <span class="border-top"></span>
    <span class="border-right"></span>
    <span class="border-bottom"></span>
    <span class="border-left"></span>

Xem ví dụ


Các Lớp Căn Chỉnh Khoảng Cách Trong Bootstrap

Bằng cách sử dụng các lớp căn chỉnh khoảng cách để căn chỉnh khoảng cách các phần tử.

Ký tự # trong các lớp .mt-#, .pt-#, ... đại diện cho kích thước của lề hoặc padding. Giá trị của kích thước có thể là một số nguyên từ 0 đến 5 hoặc auto.

Để xóa lề hoặc padding, chúng ta thiết lập giá trị kích thước là 0, hoặc thiết lập giá trị là auto để tự động thiết lập lề.

Các số nguyên từ 1 đến 5 thiết lập lề hoặc padding theo thứ tự tăng dần (trong khoảng từ 0.25rem đến 3rem).

Dưới đây là bảng danh sách các lớp căn chỉnh khoảng cách trong Bootstrap:

Ví dụ:

 <div class="mx-0">.mx-0</div>
    <div class="mx-1">.mx-1</div>
    <div class="mx-2">.mx-2</div>
    <div class="mx-3">.mx-3</div>
    <div class="mx-4">.mx-4</div>
    <div class="mx-5">.mx-5</div>
    <div class="mx-auto w-50">.mx-auto</div>

Xem ví dụ


Các Lớp Căn Chỉnh Nội Dung Theo Chiều Dọc Trong Bootstrap

Dưới đây là bảng danh sách các lớp căn chỉnh nội dung theo chiều dọc trong Bootstrap:

Ví dụ:

 <h2>With inline elements:</h2>
    <p>
        <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>
    <hr>
    <h2>With table cells:</h2>
    <table class="table-bordered" style="height: 100px;">
        <tbody>
            <tr>
                <td class="align-baseline">baseline</td>
                <td class="align-top">top</td>
                <td class="align-middle">middle</td>
                <td class="align-bottom">bottom</td>
                <td class="align-text-top">text-top</td>
                <td class="align-text-bottom">text-bottom</td>
            </tr>
        </tbody>
    </table>

Xem ví dụ


Các Lớp Vị Trí Trong Bootstrap

Chúng ta có thể sử dụng các lớp vị trí trong Bootstrap để cấu hình vị trí của phần tử.

Ví dụ:

   <p class="mb-3"><strong>Note:</strong> The element is positioned relative to its normal position. You can use the left, right, top and bottom properties to adjust element's positioning.</p>
    <div class="box position-relative">.position-relative</div>

Xem ví dụ


Quick floats trong bootstrap 3

Trong css thông thường thì để canh trái , canh phải một đoạn nội dung hay background thì chúng ta đã quá quen thuộc với 2 thuộc tính là float:left, float:right. Nhưng với bootstrap thì chúng ta chỉ cần tạo ra thẻ div và gán class hỗ trợ vào:

  • pull-left (Canh trái)
  • pull-right (Canh phải)
<b><div class="pull-left text-info">Nội dung nằm bên trái</div>
<div class="pull-right text-warning">Nội dung nằm bên phải</div></b>

Xem ví dụ

 Ví dụ:

 <div class="wrapper clearfix">
        <div class="float-left">.float-left</div>
    </div>
    <div class="wrapper clearfix">
        <div class="float-right">.float-right</div>
    </div>
    <div class="wrapper clearfix">
        <div class="float-left">.float-left</div>
        <div class="float-right">.float-right</div>
    </div>
    <div class="wrapper clearfix">
        <div class="float-none" style="float: right;">.float-none</div>
    </div>

Xem ví dụ