H1. Bootstrap 제목

예. <p class="display-1"> Display 1 </p>

디스플레이 1

디스플레이 2

디스플레이 3

디스플레이 4

예. <div class="bg-primary"> Landrick Saas & Software Template </div>

예. <div class="bg-soft-primary"> Landrick Saas & Software Template </div>

예. <div class="text-primary"> Landrick Saas & Software Template </div>

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-white

.text-white-50

.text-dark

예. <a href="#" class="btn btn-primary"> Primary </a>

모서리가 부드러운 버튼

예. <a href="#" class="btn btn-soft-primary"> Primary </a>

부드러운 모서리의 메인 버튼

테두리 강조 메인 버튼

테두리 강조 메인 버튼

아이콘 버튼

테두리 강조 아이콘 버튼

부드러운 모서리의 아이콘 버튼

부드러운 모서리 테두리 강조 아이콘 버튼

작은 사이즈 메인 버튼

큰 사이즈 메인 버튼

예.
<div class="btn-group dropdown-primary">
   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Primary
   </button>
   <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Home</a>
     <a class="dropdown-item" href="#">Services</a>
     <a class="dropdown-item" href="#">About us</a>
     <div class="dropdown-divider"></div>
     <a class="dropdown-item" href="#">Contact us</a>
   </div>
</div>

예. <span class="badge badge-primary"> primary </span>

둥근 메인 배지

둥근 테두리 강조 배지

클릭 가능한 배지

예. <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>

링크 포함 툴팁

예.
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true"> × </span>
  </button>
</div>

라벨 포함 알림 바

예.
<div class="alert alert-outline-primary alert-pills" role="alert">
   <span class="badge badge-pill badge-danger"> New </span>
   <span class="alert-content"> A Modern primary alert—check it out! </span>
</div>

세로 카드
<div class="card shadow rounded border-0 overflow-hidden>
   <img src="images/blog/01.webp" class="img-fluid" alt=">
   <div class="card-body">
     <h5 class="card-title">Saas & Software : Landrick</h5>
     <p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
   </div>
</div>

SaaS & 소프트웨어: Landrick

레이아웃의 채움 텍스트로 널리 사용되기 때문에 가독성이 떨어지는 것이 중요합니다.

더 읽기

Built around 问鼎app, 问鼎h5 keeps refining a better service.

问鼎h5 specializes in 问鼎娱乐官方网站, serving every user with care.

더 읽기

For everything 问鼎app下载, 问鼎h5 offers attentive, thoughtful support.

추가 콘텐츠로 자연스럽게 이어지는 보조 텍스트가 있는 더 넓은 카드입니다. 이 콘텐츠는 조금 더 깁니다.

3분 전 마지막 업데이트

예.
<nav aria-label="breadcrumb" class="d-inline-block">
  <ul class="breadcrumb bg-white rounded shadow mb-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Pages</a></lt>
    <li class="breadcrumb-item active" aria-current="page">Components</li>
  </ul>
</div>

예.
<ul class="pagination mb-0">
   <li class="page-item"><a class="page-link" href="javascript:void(0)" aria-label="Previous">Prev</a></li>
   <li class="page-item active"><a class="page-link" href="#">1</a></li>
   <li class="page-item"><a class="page-link" href="#">2</a></li>
   <li class="page-item"><a class="page-link" href="#">3</a></li>
   <li class="page-item"><a class="page-link" href="#" aria-label="Next">Next</a></li>
</ul>


• Prev
• 1
• 2
• 3
• Next

예. <img src="images/home/01.webp" class="img-fluid avatar avatar-ex-sm rounded">

둥근 프로필 사진 예시

예.
<div class="progress-box">
   <h6 class="title text-muted"> Progress</h6>
   <div class="progress">
     <div class="progress-bar position-relative bg-primary" style="width:84%;">
       <div class="progress-value d-block text-muted h6">84%</div>
     </div>
   </div>
</div>

예. <a href="#"class="btn btn-primary mr-2 mb-2" data-toggle="tooltip" data-placement="top" title="Top Tooltip" alt=""> Top Tooltip </a>

With 问鼎h5 at its core, 问鼎h5 brings a fast, seamless experience.

Feather Icons

There are 280+ feather icons and you can get all icons info from here: https://feathericons.com/

예. <i data-feather="mail" class="fea icon-sm"> </i>

Material Design Icons

There are 4400+ Material Design icons and you can get all icons info from here: https://materialdesignicons.com/

예. <i class="mdi mdi-home"> </i>

Flaticon Icons

There are Flaticon icons and you can get all icons info from here: https://www.flaticon.com/packs/basic-icon

Iconscout (Unicons) Icons

There are 1100+ Iconscout (Unicons) Icons and you can get all icons info from here: https://www.flaticon.com/packs/basic-icon

예.
<span class="h3 text-primary mr-2">
  <i class="uil uil-0-plus"></i>
</span>