<div class="row">
  <div class="col-lg-6 col-xl-3">
    <div class="card mb-4">
      <img class="card-img-top" src="images/elements/cc1.jpg">
      <div class="card-body">
        <h5 class="card-title ">عنوان</h5>
        <p class="card-text pb-3">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… </p>
        <a href="#" class="btn btn-outline-primary btn-pill">مشاهده</a>
      </div>
    </div>
  </div>

  <div class="col-lg-6 col-xl-3">
    <div class="card mb-4 p-0">
      <h5 class="card-title  pt-4 px-6">عنوان</h5>
      <div class="card-body">
        <img class="card-img-top mb-4 rounded" src="images/elements/cc1a.jpg">
        <p class="card-text pb-3">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… </p>
        <a href="#" class="btn btn-link  px-0 ml-3">مشاهده</a>
        <a href="#" class="btn btn-link text-success px-0">مشاهده</a>
      </div>
    </div>
  </div>

  <div class="col-lg-6 col-xl-3">
    <div class="card  mb-4 p-0">
      <h5 class="card-title  pt-4 px-6">عنوان</h5>
      <div class="card-body">
        <p class="card-text pb-2">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… </p>
        <a href="#" class="btn btn-outline-primary btn-pill">لینک</a>
      </div>
      <img class="card-img rounded-0" src="images/elements/cc1b.jpg">
    </div>
  </div>

  <div class="col-lg-6 col-xl-3">
    <div class="card mb-4">
      <div class="card-body">
        <h5 class="card-title mb-1">عنوان</h5>
        <p class="pb-3">Sub-heading text</p>
        <img class="mb-4 card-img" src="images/elements/cc1c.jpg">
        <p class="card-text pb-2">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند…</p>
        <a href="#" class="btn btn-link px-0 text-info ml-3">لینک</a>
        <a href="#" class="btn btn-link px-0 text-danger">لینک</a>
      </div>
    </div>
  </div>
</div>


      

<div class="row">
  <div class="col-xl-6">
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-3">
          <img src="images/elements/hc1.jpg" class="rounded-left horizontal-img" alt="Image">
        </div>
        <div class="col-md-9">
          <div class="card-body">
            <h5 class="card-title pt-2">عنوان</h5>
            <p class="card-text mb-6">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.</p>
            <a href="#" class="btn btn-outline-primary">مشاهده</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xl-6">
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-9">
          <div class="card-body">
            <h5 class="card-title pt-2">عنوان</h5>
            <p class="card-text mb-6">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.</p>
            <a href="#" class="btn btn-outline-primary">مشاهده</a>
          </div>
        </div>
        <div class="col-md-3">
          <img src="images/elements/hc2.jpg" class="rounded-right horizontal-img" alt="Image">
        </div>
      </div>
    </div>
  </div>
</div>

      

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="images/elements/cc3a.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title ">عنوان</h5>
      <p class="card-text pb-3">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.
      </p>
      <p class="card-text">
        <small class="text-muted">بروزرسانی 3 دقیقه پیش</small>
      </p>
    </div>
  </div>

  <div class="card">
    <img class="card-img-top" src="images/elements/cc3b.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title ">عنوان</h5>
      <p class="card-text pb-3">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.</p>
      <p class="card-text">
        <small class="text-muted">بروزرسانی 3 دقیقه پیش</small>
      </p>
    </div>
  </div>

  <div class="card">
    <img class="card-img-top" src="images/elements/cc3c.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title ">عنوان</h5>
      <p class="card-text pb-3">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند.</p>
      <p class="card-text">
        <small class="text-muted">بروزرسانی 3 دقیقه پیش</small>
      </p>
    </div>
  </div>
</div>

      

<div class="row">
  <div class="col-md-6 col-xl-4">
    <div class="card py-3 mb-4">
      <div class="card-body">
        <h5 class="card-title ">عنوان</h5>
        <p class="card-text pb-4 pt-1">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند…
        </p>
        <a href="#" class="btn btn-link text-primary px-0">مشاهده</a>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-4">
    <div class="card mb-4 py-3">
      <div class="card-body text-center">
        <h5 class="card-title ">عنوان</h5>
        <p class="card-text pb-4 pt-1">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند…
        </p>
        <a href="#" class="btn btn-link text-success px-0">مشاهده</a>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-4">
    <div class="card mb-4 py-3">
      <div class="card-body text-right">
        <h5 class="card-title ">عنوان</h5>
        <p class="card-text pb-4 pt-1">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند…
        </p>
        <a href="#" class="btn btn-link text-danger px-0">مشاهده</a>
      </div>
    </div>
  </div>
</div>

      

<div class="row">

  <div class="col-md-12 col-lg-6 col-xl-3">
    <div class="card mb-4 bg-overlay-primary">
      <img class="card-img-top" src="images/elements/cc2a.jpg">
      <div class="card-img-overlay">
        <h5 class="card-title text-white">عنوان</h5>
        <p class="card-text text-white pb-4 pt-1">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات </p>
        <a href="#" class="text-white">بروز رسانی 2 دقیقه پیش</a>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-6 col-xl-3">
    <div class="card mb-4 bg-overlay-success">
      <img class="card-img-top" src="images/elements/cc2a.jpg">
      <div class="card-img-overlay">
        <h5 class="card-title text-white">عنوان</h5>
        <p class="card-text pb-4 pt-1 text-white">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
        </p>
        <a href="#" class="text-white">بروزرسانی 2 دقیقه پیش</a>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-6 col-xl-3">
    <div class="card mb-4 bg-overlay-secondary">
      <img class="card-img-top" src="images/elements/cc2a.jpg">
      <div class="card-img-overlay">
        <h5 class="card-title text-white">عنوان</h5>
        <p class="card-text text-white pb-4 pt-1">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات 
        </p>
        <a href="#" class="text-white">بروزرسانی 2 دقیقه پیش</a>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-6 col-xl-3">
    <div class="card mb-4 bg-overlay-info">
      <img class="card-img-top" src="images/elements/cc2a.jpg">
      <div class="card-img-overlay">
        <h5 class="card-title text-white ">عنوان</h5>
        <p class="card-text pb-4 pt-1 text-white">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات 
        </p>
        <a href="#" class="text-white">بروزرسانی 2 دقیقه پیش</a>
      </div>
    </div>
  </div>

</div>

      

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="images/elements/cc4a.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title text-primary">عنوان</h5>
      <p class="card-text pb-4">این یک کارت عریض‌تر است که متن پشتیبان در زیر آن به عنوان مقدمه‌ای طبیعی برای محتوای اضافی قرار دارد. این محتوا کمی طولانی‌تر است.
       </p>
      <p class="card-text">
        <small class="text-muted">بروزرسانی 3 دقیقه پیش</small>
      </p>
    </div>
  </div>

  <div class="card">
    <img class="card-img-top" src="images/elements/cc4b.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title text-primary">عنوان</h5>
      <p class="card-text pb-4">این کارت دارای متن پشتیبانی در زیر است که به طور طبیعی به محتوای اضافی اشاره دارد.</p>
      <p class="card-text">
        <small class="text-muted">بروزرسانی 3 دقیقه پیش</small>
      </p>
    </div>
  </div>

  <div class="card">
    <img class="card-img-top" src="images/elements/cc4c.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title text-primary">عنوان</h5>
      <p class="card-text pb-4">این یک کارت پهن‌تر است که متن پشتیبان در زیر آن به عنوان مقدمه‌ای طبیعی برای محتوای اضافی قرار دارد. این کارت حتی از کارت اول هم محتوای طولانی‌تری دارد که آن عمل هم‌ارتفاع را نشان می‌دهد.</p>
      <p class="card-text">
        <small class="text-muted">بروزرسانی 3 دقیقه پیش</small>
      </p>
    </div>
  </div>
</div>

      

<div class="card w-75 mb-5">
  <div class="card-body">
    <h5 class="card-title">عنوان</h5>
    <p class="card-text pb-3">وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند. </p>
    <a href="#" class="btn btn-outline-primary btn-pill">دکمه</a>
  </div>
</div>

<div class="card w-50 mb-5">
  <div class="card-body">
    <h5 class="card-title">عنوان</h5>
    <p class="card-text pb-3">وطن، پاره تن من، کوه‌ های سر به فلک کشیده‌ ات آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت، رویاهای زیبای من هستند… بارز وطن سرسخت ترین، دلیرترین و فداکارترین مبارزی است که برای آزادی و استقلال وطن تا آخرین قطره خون خود مبارزه می کند. </p>
    <a href="#" class="btn btn-outline-primary btn-pill">دکمه</a>
  </div>
</div>

      

<div class="row">
  <div class="col-md-4">
    <div class="card text-white bg-success mb-3">
      <h5 class="card-header text-white">عنوان</h5>
      <div class="card-body">
        <p class="card-text">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… .
        </p>
        <a href="#" class="btn btn-link text-white px-0">مشاهده</a>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card text-white bg-primary mb-3">
      <h5 class="card-header text-white">عنوان</h5>
      <div class="card-body">
        <p class="card-text">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… .
        </p>
        <a href="#" class="btn btn-link text-white px-0">مشاهده</a>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card text-white bg-secondary mb-3">
      <h5 class="card-header text-white">عنوان</h5>
      <div class="card-body">
        <p class="card-text">وطن، پاره تن من،
کوه‌ های سر به فلک کشیده‌ ات
آرزوهای دست نیافتنی‌ ام و دشت‌ های بی‌ کرانت،
رویاهای زیبای من هستند… .
        </p>
        <a href="#" class="btn btn-link text-white px-0">مشاهده</a>
      </div>
    </div>
  </div>
</div>