<div class="alert alert-success alert-dismissable fade show p-3">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <h4 class="alert-heading">آفرین!</h4>
  <p> شما با موفقیت این پیام هشدار مهم را بخوانید.این مثال متن، کمی طولانی تر می شود تا بتوانید ببینید که چگونه فاصله در یک هشدار با این نوع محتوا کار می کند.</p>
  <hr />
  <p class="mb-0">هر زمان که شما نیاز دارید، مطمئن شوید که از مزایای حاشیه استفاده کنید تا چیزها را خوب و مرتب نگه دارید.</p>
</div>

<span class="badge badge-primary">اولیه</span>
<span class="badge bg-secondary">ثانوی</span>
<span class="badge bg-success">موفقیت</span>
<span class="badge bg-danger">خطر</span>
<span class="badge bg-warning">هشدار</span>
<span class="badge bg-info">اطلاعات</span>
<span class="badge bg-light">روشن</span>
<span class="badge bg-dark">تاریک</span>

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">خانه</a></li>
  <li class="breadcrumb-item"><a href="#">کتابخانه</a></li>
  <li class="breadcrumb-item active">داده ها</li>
</ol>

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/728x400/c9d2e3/212837" class="d-block w-100" alt="" />
      <div class="carousel-caption d-none d-md-block">
        <h5 class="text-dark">اولین برچسب اسلاید</h5>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم </p>
      </div>
    </div>
    ...
  </div>
  <a class="carousel-control-prev" href="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

<div class="bg-white bg-opacity-25 p-5 rounded-3">
  <h1 class="display-4">سلام دنیا!</h1>
  <p class="lead">این یک واحد قهرمان ساده است، یک جزء ساده جامبوترون ساده برای تماس با توجه به محتوای یا اطلاعات برجسته است.</p>
  <hr class="my-4">
  <p>از کلاس های کاربردی برای تایپوگرافی و فاصله به محتوای فضایی در ظرف بزرگتر استفاده می کند.</p>
  <a class="btn btn-outline-theme btn-lg" href="#" role="button">بیشتر بخوانید</a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">لورم ایپسوم</a>
  <a href="#" class="list-group-item list-group-item-action">متن ساختگی با تولید سادگی</a>
  <a href="#" class="list-group-item list-group-item-action">نامفهوم از صنعت چاپ</a>
  <a href="#" class="list-group-item list-group-item-action"> با استفاده از طراحان</a>
  <a href="#" class="list-group-item list-group-item-action disabled"> چاپگرها و متون بلکه روزنامه</a>
</div>

<div class="d-flex align-items-start mt-3">
  <a href="#">
    <img src="https://via.placeholder.com/128x128/c9d2e3/212837" alt="" width="64" class="rounded" />
  </a>
  <div class="ms-3">
    <h5 class="mt-0 mb-1">عنوان رسانه</h5>
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
  </div>
</div>

<!-- default nav -->
<nav class="nav">
  <a class="nav-link active" href="#">فعال</a>
  <a class="nav-link" href="#">لینک</a>
  <a class="nav-link" href="#">لینک</a>
  <a class="nav-link disabled" href="#">غیرفعال</a>
</nav>

<!-- vertical nav -->
<nav class="nav flex-column">
  ...
</nav>

<!-- navbar-light -->
<nav class="navbar navbar-expand-lg navbar-light bg-white bg-opacity-25 rounded">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLight">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarLight">
      <a class="navbar-brand" href="#">نام تجاری پنهان</a>
      <ul class="navbar-nav me-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">خانه</a></li>
        <li class="nav-item"><a class="nav-link" href="#">لینک</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#">غیرفعال</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
      	<input class="form-control me-sm-2" type="search" placeholder="جستجو" />
      	<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<!-- navbar-dark -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black bg-opacity-25 rounded">
  ...
</nav>

<ul class="pagination mb-0">
  <li class="page-item disabled"><a class="page-link">قبلی</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><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="#">بعد</a></li>
</ul>

<!-- default -->
<div class="progress">
  <div class="progress-bar" style="width: 50%">50%</div>
</div>

<!-- multiple bars -->
<div class="progress">
  <div class="progress-bar" style="width: 33%">33%</div>
  <div class="progress-bar bg-warning" style="width: 20%">20%</div>
  <div class="progress-bar bg-danger" style="width: 20%">20%</div>
</div>

<!-- striped -->
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 50%">50%</div>
</div>

<!-- striped & animated -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 33%">33%</div>
</div>

<!-- border spinner -->
<div class="spinner-border"></div>

<!-- grow spinner -->
<div class="spinner-grow"></div>

<!-- colors -->
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-dark"></div>

<!-- size -->
<div class="spinner-grow spinner-grow-sm"></div>