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

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

<ol class="breadcrumb p-3 bg-light rounded">
  <li class="breadcrumb-item"><a href="#">HOME</a></li>
  <li class="breadcrumb-item"><a href="#">LIBRARY</a></li>
  <li class="breadcrumb-item active">DATA</li>
</ol>

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExample" data-slide-to="1"></li>
    <li data-target="#carouselExample" data-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>اولین پرچسب اسلاید</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    ...
  </div>
  <a class="carousel-control-prev" href="#carouselExample" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary 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="media mt-3">
  <a class="mr-3" href="#">
    <img src="https://via.placeholder.com/128x128/c9d2e3/212837" width="64px" class="rounded" alt="" />
  </a>
  <div class="media-body">
    <h5 class="mt-0">سربرگ رسانه</h5>
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته،.
  </div>
</div>

<!-- default nav -->
<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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

<!-- navbar-light -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLight">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarLight">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
    	<input class="form-control mr-sm-2" type="search" placeholder="Search" />
    	<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<!-- navbar-dark -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  ...
</nav>

<ul class="pagination mb-0">
  <li class="page-item disabled"><a class="page-link">Previous</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="#">Next</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>