<div class="hstack gap-2">
                                                        <a class="btn btn-primary mb-2" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                                                            لینک با href
                                                        </a>
                                                        <button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                                            دکمه با data-bs-target
                                                        </button>
                                                    </div>
                                                    <div class="collapse" id="collapseExample">
                                                        <div class="card mb-0">
                                                            <div class="card-body">
                                                                مقداری محتوای placeholder برای کامپوننت collapse. این پنل به طور پیش‌فرض پنهان است اما هنگامی که کاربر محرک مربوطه را فعال می‌کند، آشکار می‌شود.
                                                            </div>
                                                        </div>
                                                    </div>
                                                
                                            

                                                
                                                    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
                                                        جمع کردن عرض
                                                    </button>
                                                    <div style="min-height: 135px;">
                                                        <div class="collapse collapse-horizontal" id="collapseWidthExample">
                                                            <div class="card card-body mb-0" style="width: 300px;">
                                                                این مقداری محتوای placeholder برای یک جمع‌شدن افقی است. به طور پیش‌فرض پنهان است و هنگام فعال شدن، نشان داده می‌شود.
                                                            </div>
                                                        </div>
                                                    </div> 
                                                
                                            

                                                
                                                    <div class="hstack gap-2 mb-3">
                                                        <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">تغییر وضعیت عنصر اول</a>
                                                        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">تغییر وضعیت عنصر دوم</button>
                                                        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">تغییر وضعیت هر دو عنصر</button>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="collapse multi-collapse" id="multiCollapseExample1">
                                                                <div class="card card-body">
                                                                    مقداری محتوای placeholder برای اولین کامپوننت collapse از این مثال multi-collapse. این پنل
                                                                    به طور پیش‌فرض پنهان است اما هنگامی که کاربر محرک مربوطه را فعال می‌کند، آشکار می‌شود.
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="collapse multi-collapse" id="multiCollapseExample2">
                                                                <div class="card card-body">
                                                                    مقداری محتوای placeholder برای دومین کامپوننت collapse از این مثال multi-collapse. این
                                                                    پنل به طور پیش‌فرض پنهان است اما هنگامی که کاربر محرک مربوطه را فعال می‌کند، آشکار می‌شود.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>