<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
اصلی </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">تست 1</a></li>
<li><a class="dropdown-item" href="#">تست 2</a></li>
<li><a class="dropdown-item" href="#">تست 3</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک تست</a></li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
تایید </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">تست 1</a></li>
<li><a class="dropdown-item" href="#">تست 2</a></li>
<li><a class="dropdown-item" href="#">تست 3</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک تست</a></li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
اطلاعات </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">تست 1</a></li>
<li><a class="dropdown-item" href="#">تست 2</a></li>
<li><a class="dropdown-item" href="#">تست 3</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک تست</a></li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
اخطار </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">تست 1</a></li>
<li><a class="dropdown-item" href="#">تست 2</a></li>
<li><a class="dropdown-item" href="#">تست 3</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک تست</a></li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
خطا </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">تست 1</a></li>
<li><a class="dropdown-item" href="#">تست 2</a></li>
<li><a class="dropdown-item" href="#">تست 3</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک تست</a></li>
</ul>
</div>


<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">خانه</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">پروفایل</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">تماس با ما</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </div>
</div>


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">خانه</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">پروفایل</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">تماس با ما</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</div>
</div>

<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> بخش #1 </button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است،</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> بخش #2 </button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است،</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
بخش #3 </button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، </div>
</div>
</div>
</div>


<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">خانه</li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">خانه</a></li>
<li class="breadcrumb-item active" aria-current="page">شهرداری قم</li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">خانه</a></li>
<li class="breadcrumb-item"><a href="#">شهرداری قم</a></li>
<li class="breadcrumb-item active" aria-current="page">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</li>
</ol>
</nav>


<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>


<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>

<div class="spinner-border text-success" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<h4>حالت روشن خاموش</h4>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>

<h4>حالت دکمه</h4>
<button class="btn btn-success" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
در حال بارگذاری... </button>


<nav aria-label="...">
<ul class="pagination ">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>


<div class="alert alert-success" role="alert"> <strong>پیام موفقیت!</strong><br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </div>
<div class="alert alert-info" role="alert"> <strong>پیغام تایید!</strong><br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </div>
<div class="alert alert-warning" role="alert"> <strong>اخطار!</strong> <br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </div>
<div class="alert alert-danger" role="alert"> <strong>خطا!</strong><br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </div>

<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button> <strong>پیام موفقیت!</strong> <br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </div>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button> <strong>پیغام تایید!</strong><br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button> <strong>اخطار!</strong><br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </div>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button> <strong>خطا!</strong><br>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </div>
<h4 class="margin-top-30"><strong>پیوندها در هشدارها</strong></h4>
<p>نحوه استفاده از کلاس <code>alert-link.</code> </p>
<div class="alert alert-success" role="alert"> <strong>پیام موفقیت!</strong><br>
متن تستس برای نمایش<a href="#" class="alert-link">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</a>. </div>
<div class="alert alert-info" role="alert"> <strong>پیغام تایید!</strong><br>
متن تستی برای نمایش <a href="#" class="alert-link">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</a>, تست </div>
<div class="alert alert-warning" role="alert"> <strong>اخطار!</strong><br>
متن تستی برای نمایش <a href="#" class="alert-link">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</a>. </div>
<div class="alert alert-danger" role="alert"> <strong>خطا!</strong><br>
<a href="#" class="alert-link">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</a> تست. </div>


<div class="alert alert-success" role="alert"> <strong>پیام موفقیت!</strong><br>
متن تستس برای نمایش<a href="#" class="alert-link">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</a>. </div>
<div class="alert alert-info" role="alert"> <strong>پیغام تایید!</strong><br>
متن تستی برای نمایش <a href="#" class="alert-link">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</a>, تست </div>
<div class="alert alert-warning" role="alert"> <strong>اخطار!</strong><br>
متن تستی برای نمایش <a href="#" class="alert-link">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</a>. </div>
<div class="alert alert-danger" role="alert"> <strong>خطا!</strong><br>
<a href="#" class="alert-link">سازمان فناوری اطلاعات و ارتباطات شهرداری قم</a> تست. </div>

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60% </div>
</div>


<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<p></p>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<p></p>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<p></p>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<p></p>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>


<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%">
</div>
</div>


<ul class="list-group margin-top-20">
<li class="list-group-item">متن تستی 1</li>
<li class="list-group-item">متن تستی 2</li>
<li class="list-group-item">متن تستی 3</li>
<li class="list-group-item">متن تستی 4</li>
<li class="list-group-item">متن تستی 5</li>
</ul>


<ul class="list-group margin-top-20">
<li class="list-group-item"> <span class="badge">14</span> متن تستی 1 </li>
<li class="list-group-item"> <span class="badge">2</span> متن تستی 2 </li>
<li class="list-group-item"> <span class="badge">1</span> متن تستی 3 </li>
<li class="list-group-item"> <span class="badge">7</span> متن تستی 4</li>
<li class="list-group-item"> <span class="badge">9</span> متن تستی 5</li>
</ul>


<div class="list-group margin-top-20">
<a href="#" class="list-group-item active">متن تستی 1</a>
<a href="#" class="list-group-item">متن تستی 2</a>
<a href="#" class="list-group-item">متن تستی 3</a>
<a href="#" class="list-group-item">متن تستی 4</a>
<a href="#" class="list-group-item">متن تستی 5</a>
</div>


<div class="list-group margin-top-20">
<button type="button" class="list-group-item">متن تستی 1</button>
<button type="button" class="list-group-item">متن تستی 2</button>
<button type="button" class="list-group-item">متن تستی 3</button>
<button type="button" class="list-group-item">متن تستی 4</button>
<button type="button" class="list-group-item">متن تستی 5</button>
</div>


<div class="list-group">
<a href="#" class="list-group-item disabled">
متن تستی 1 </a>
<a href="#" class="list-group-item">متن تستی 2</a>
<a href="#" class="list-group-item">متن تستی 3</a>
<a href="#" class="list-group-item">متن تستی 4</a>
<a href="#" class="list-group-item">متن تستی 5</a>
</div>


<ul class="list-group">
<li class="list-group-item list-group-item-success">متن تستی 1</li>
<li class="list-group-item list-group-item-info">متن تستی 2</li>
<li class="list-group-item list-group-item-warning">متن تستی 3</li>
<li class="list-group-item list-group-item-danger">متن تستی 4</li>
<li class="list-group-item list-group-item-danger">متن تستی 5</li>
</ul>

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