حاشیه ها

<span class="border border-container"></span>
        <span class="border-top border-container"></span>
        <span class="border-end border-container"></span>
        <span class="border-bottom border-container"></span>
        <span class="border-start border-container"></span>

<span class="border-0 border-container"></span>
        <span class="border border-top-0 border-container"></span>
        <span class="border border-end-0 border-container"></span>
        <span class="border border-bottom-0 border-container"></span>
        <span class="border border-start-0 border-container"></span>

<span class="border border-container border-1"></span>
        <span class="border border-container border-2"></span>
        <span class="border border-container border-3"></span>
        <span class="border border-container border-4"></span>
        <span class="border border-container border-5"></span>

<span class="border border-container border-primary"></span>
        <span class="border border-container border-secondary"></span>
        <span class="border border-container border-success"></span>
        <span class="border border-container border-danger"></span>
        <span class="border border-container border-warning"></span>
        <span class="border border-container border-info"></span>
        <span class="border border-container border-light"></span>
        <span class="border border-container border-dark"></span>
        <span class="border border-container border-white"></span>

<div class="mb-4">
        <label for="exampleFormControlInput1" class="form-label">آدرس ایمیل</label>
        <input type="email" class="form-control border-success"
            id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
    <div class="h4 pb-3 mb-4 text-danger border-bottom border-danger">
        پایین مرز خطر را نشان می‌دهد
    </div>
    <div
        class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end mb-1">
        سفارشی‌سازی مرزها با رنگ‌های پس‌زمینه
    </div>

<div class="border border-success p-2 mb-2">این مرز پیش‌فرض موفقیت است</div>
        <div class="border border-success p-2 mb-2 border-opacity-75">این مرز موفقیت با شفافیت 75% است</div>
        <div class="border border-success p-2 mb-2 border-opacity-50">این مرز موفقیت با شفافیت 50% است</div>
        <div class="border border-success p-2 mb-2 border-opacity-25">این مرز موفقیت با شفافیت 25% است</div>
        <div class="border border-success p-2 border-opacity-10">این مرز موفقیت با شفافیت 10% است</div>

<img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img rounded" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img rounded-top" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img rounded-end" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img rounded-bottom" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img rounded-start" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img rounded-circle" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img  rounded-pill" alt="...">

<img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img bd-placeholder-img rounded-0" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img bd-placeholder-img rounded-1" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img bd-placeholder-img rounded-2" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img bd-placeholder-img rounded-3" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img bd-placeholder-img rounded-4" alt="...">
        <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-58.jpg" class="bd-placeholder-img bd-placeholder-img rounded-5" alt="...">