유틸리티

미리보기

소스

<div class="card overflow-auto mt-3" id="example-utilities">
    <div class="card-status-top bg-purple"></div>
    <div class="card-header">
        <div>
            <h3 class="card-title">유틸리티</h3>
            <div class="card-subtitle">Borders · Cursors · Margins · Vertical align</div>
        </div>
    </div>
    <div class="card-body">
        <div class="row row-cards">
            <div class="col-lg-6">
                <h4>테두리</h4>
                <div class="d-flex flex-wrap gap-3 mb-4">
                    <div class="border rounded d-flex align-items-center p-3 bg-white">전체 테두리</div>
                    <div class="border-top d-flex align-items-center border-blue border-3 p-3 bg-blue-lt">위쪽 강조</div>
                    <div class="border-start d-flex align-items-center border-green border-3 p-3 bg-green-lt">시작점 강조</div>
                    <div class="border d-flex align-items-center border-dashed rounded p-3">점선 테두리</div>
                    <div class="border border-wide rounded-circle d-flex align-items-center justify-content-center w:64 h:64">원형</div>
                </div>
                <h4>바깥 여백</h4>
                <div class="d-flex flex-wrap align-items-start gap-3">
                    <div class="bg-blue-lt rounded">
                        <div class="m-0 px-3 py-2 bg-blue text-white rounded">m-0</div>
                    </div>
                    <div class="bg-blue-lt rounded">
                        <div class="m-2 px-3 py-2 bg-blue text-white rounded">m-2</div>
                    </div>
                    <div class="bg-blue-lt rounded">
                        <div class="m-4 px-3 py-2 bg-blue text-white rounded">m-4</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <h4>커서</h4>
                <div class="d-flex flex-wrap gap-2 mb-4">
                    <span class="badge bg-blue-lt text-blue cursor-pointer p-2">클릭 가능</span>
                    <span class="badge bg-azure-lt text-azure cursor-move p-2">이동 가능</span>
                    <span class="badge bg-red-lt text-red cursor-not-allowed p-2">사용 불가</span>
                    <span class="badge bg-purple-lt text-purple cursor-zoom-in p-2">확대 보기</span>
                    <span class="badge bg-yellow-lt text-yellow cursor-help p-2">도움말</span>
                    <span class="badge bg-green-lt text-green cursor-wait p-2">처리 대기</span>
                </div>
                <h4>세로 정렬</h4>
                <div class="table-responsive">
                    <table class="table table-bordered mb-0" style="height: 110px">
                        <tbody>
                            <tr>
                                <td class="align-baseline">기준선</td>
                                <td class="align-top">위</td>
                                <td class="align-middle">가운데</td>
                                <td class="align-bottom">아래</td>
                                <td class="align-text-top">텍스트 위</td>
                                <td class="align-text-bottom">텍스트 아래</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>