CARDS

Tables

Cards là thành phần giao diện người dùng linh hoạt, giúp sắp xếp nội dung thành các phần có ý nghĩa. Cards chứa nhiều thành phần nhỏ hơn, chẳng hạn như hình ảnh, văn bản, liên kết và nút và có thể đóng vai trò là mục nhập vào thông tin chi tiết hơn, giúp người dùng quét trang nhanh chóng và tìm thấy nội dung có liên quan nhất.

Card cơ bản

Đây là text trong card-body.

<div class="card">
    <div class="card-body">
        <p>Đây là text trong card-body.</p>
    </div>
</div>

Card và tiêu đề

Tiêu đề

Đây là text ở card-body.

<div class="card">
    <div class="card-header">Tiêu đề</div>
    <div class="card-body">
        <p class="text-secondary">Đây là text ở card-body.</p>
    </div>
</div>

Card và hình ảnh

Card with title and image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. 

<div class="card">
    <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/dist/static/photos/cup-of-coffee-and-an-open-book.jpg)"></div>
    <div class="card-body">
        <h3 class="card-title">Card with title and image</h3>
        <p class="text-secondary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
        iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
        </p>
    </div>
</div>

Card blog

Card side image

Xin chào!

Đây là card blog nơi viết đăng bài
Egan Poetz
3 days ago
<div class="card d-flex flex-column">
<div class="row row-0 flex-fill">
    <div class="col-md-3">
        <a>
            <img src="/dist/static/photos/a-woman-works-on-a-laptop-at-home.jpg" class="w-100 h-100 object-cover" alt="Card side image">
        </a>
    </div>
    <div class="col">
        <div class="card-body h-full d-flex flex-column">
            <div class="card-status-top bg-danger"></div>
            <h3 class="card-title">
            <a href="">Xin chào!</a>
            </h3>
            <div class="text-secondary">
            Đây là card blog nơi viết đăng bài 
            </div>
            <div class="d-flex align-items-center pt-4 mt-auto">
            <span class="avatar" style="background-image: url(/dist/static/avatars/029m.jpg)"></span>
            <div class="ms-3">
                <a href="" class="text-body">Egan Poetz</a>
                <div class="text-secondary">3 days ago</div>
            </div>
            <div class="ms-auto">
                <a href="" class="icon d-none d-md-inline-block ms-3 text-red">
                <!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-1"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>
                </a>
            </div>
            </div>
        </div>
    </div>
</div>
<div class="card-footer">
    <button class="btn btn-outline-primary ms-auto">Đăng bài</button>
</div>
</div>