Components

Typography Heading

Ex. <h1> H1. Bootstrap heading </h1>

H1. Bootstrap heading

H2. Bootstrap heading

H3. Bootstrap heading

H4. Bootstrap heading

H5. Bootstrap heading
H6. Bootstrap heading

Display Heading

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

Display 1

Display 2

Display 3

Display 4

Background Color

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

Soft Background Color

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

Text Color

Ex. <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

Buttons

Ex. <a href="#" class="btn btn-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark

Buttons Soft

Ex. <a href="#" class="btn btn-soft-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark

Iconography

Icon Button - Primary

Visual Cues

Icon Button - Outline Primary

Actionable Icons

Rounded Icon Button - Primary

Interactive Icons

Rounded Icon Button - Outline Primary

Platform Scalability

Small Primary Button
Home News Live Data
Large Primary Button
About Us Download App Reach Our Support Team FAQ

Badges

Ex. <span class="badge badge-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark

Tagging

Rounded Primary Badge
Official Partners Media Coverage User Feedback Match Broadcasts Match Updates Match Updates Match Preview Team News

Notifications

Rounded Outline Primary Badge
Download App Technical Support App Updates Important News Special Notice Quick Updates Professional Match Predictions Data Statistics

Alert

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

Interactive Banners

Primary Alert with Link

Content Modules

Dismissible Alerts

Ex.
<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>

Advanced Notifications

Rounded Alert with Badge

Subtle Alerts

Ex.
<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>

Accordions

Accordion #1

mk体育APP Official Download App Center builds a professional sports information platform around global football events and the 2026 World Cup, providing real-time updates on match schedules, team news, scores, and hot event news. The website integrates rich content like live match streaming, player statistics, popular match analysis, and highlight videos, offering a comprehensive World Cup viewing experience for football enthusiasts. The platform supports multi-terminal downloads and real-time event push notifications, allowing users to follow World Cup progress anytime, anywhere, and feel the passion and charm of the international football event.

mk体育 specializes in MK体育官网, serving every user with care.

For everything MK娱乐, mk体育 offers attentive, thoughtful support.

Cards

Vertical Card
<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 & Software : Landrick

Due to its widespread use as filler text for layouts, non-readability is of great importance

Read More
Built around multi-terminal downloads, grasp the latest match status anytime, anywhere, mk体育 keeps refining a better service.

mk体育 specializes in MK体育官网, serving every user with care.

Read More
Horizontal Card
<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>
...
For everything MK娱乐, mk体育 offers attentive, thoughtful support.

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Forms

Checkboxes

Radio Buttons

Switches Button

Form Select Box

Subscribe Form

Google Map

Default Avatars

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

Circular Avatars

Circular Avatar

Progressbar

Ex.
<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>
WordPress
84%
PHP / MYSQL
75%
Angular / JavaScript
79%
HTML
95%

Tooltip

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

Modal

Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Harry Potter @hpt

Blockquotes

With MK真人 at its core, mk体育 brings a fast, seamless experience.

Icons

Feather Icons

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

Ex. <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/

Ex. <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

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