Composants

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

Bouton avec icône

Détails des équipes

Bouton contour avec icône

Informations sur les joueurs

Pilule avec icône

Aperçu des matchs

Pilule contour avec icône

Actualités et informations

Badges

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

Étiquette pilule

Moments Forts
Scores en Temps Réel Mises à Jour Rapides Opération réussie Risque système Fluctuation de service Infos match express Message d'erreur Message d'alerte

Étiquette contour

Vidéos complètes
Analyse d'Événements Couverture Complète Mise à jour de statut Contactez le support Veuillez réessayer plus tard Aperçu des actualités Message de succès Information secondaire

Alert

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

Alerte avec lien

Suivre les Événements

Contenu additionnel

Alerte fermable

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>

Alerte avancée

Mises à Jour d'Événements

Alerte contour avancée

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

Le site de diffusion en direct de la Coupe du Monde offre des diffusions de football HD et des scores en temps réel. Couvre les matchs populaires de la FIFA 2026, les nouvelles des équipes et les informations sur les événements.

世界杯直播 se spécialise dans 高清无卡顿赛事直播, servant chaque utilisateur avec soin.

Pour tout ce qui concerne 实时比分与数据更新, 世界杯直播 offre un support attentif et réfléchi.

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
Construit autour de 世界杯赔率, 世界杯直播 continue d'affiner un meilleur service.

世界杯直播 se spécialise dans 高清无卡顿赛事直播, servant chaque utilisateur avec soin.

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>
...
Pour tout ce qui concerne 实时比分与数据更新, 世界杯直播 offre un support attentif et réfléchi.

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">

Avatar rond

Expérience fluide

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

Avec 深度赛事分析与前瞻 en son cœur, 世界杯直播 offre une expérience rapide et transparente.

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>