‫بررسی شیوه‌نامه‌های المان‌های پر کاربرد بوت استرپ 4

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="submit" value="Input">

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

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

<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-block">Block</button>

<h2>States</h2>
<h3>Active</h3>
<button class="btn btn-primary active">Active Button</button>

<h3>Disabled</h3>
<button class="btn btn-primary disabled">Disabled Button</button>
<a class="btn btn-primary disabled" href="#">Disabled Link Button</a>

<div class="btn-toolbar" aria-label="All pets">
    <div class="btn-group mb-2 mr-2" aria-label="Common pets">
        <button type="button" class="btn btn-primary active">Cat</button>
        <button type="button" class="btn btn-primary">Dog</button>
        <button type="button" class="btn btn-primary">Fish</button>
        <button type="button" class="btn btn-primary">Bird</button>
    </div>

    <div class="btn-group mb-2" aria-label="Exotic pets">
        <button type="button" class="btn btn-primary">Amphibian</button>
        <button type="button" class="btn btn-primary active">Reptile</button>
        <button type="button" class="btn btn-primary">Other</button>
    </div>
</div>

<div class="btn-group-vertical mb-2" aria-label="Exotic pets">
    <button type="button" class="btn btn-primary">Amphibian</button>
    <button type="button" class="btn btn-primary active">Reptile</button>
    <button type="button" class="btn btn-primary">Other</button>
</div>

    <div class="container">
        <div class="row">
            <section class="col-12">
                <h1>Our Commitment <span class="badge badge-info">to you</span></h1>
                <h3>Grooming <span class="badge badge-danger badge-pill">new</span></h3>
            </section>
        </div><!-- row -->
    </div><!-- content container -->

<ul class="list-group mb-3">
    <li class="list-group-item active">Grooming</li>
    <li class="list-group-item list-group-item-action">
        General Health
    </li>
    <li class="list-group-item list-group-item-action">Nutrition</li>
    <li class="list-group-item list-group-item-action">
        Pest Control
    </li>
    <li class="list-group-item list-group-item-action">Vaccinations</li>
</ul>

<div class="list-group mb-3">
    <a class="list-group-item active" href="#">Grooming</a>
    <a class="list-group-item list-group-item-action list-group-item-success"
        href="#">Nutrition</a>
    <a class="list-group-item list-group-item-action  list-group-item-info"
        href="#">
        Pest Control
    </a>
    <a class="list-group-item list-group-item-action  list-group-item-warning"
        href="#">Vaccinations</a>
</div>

<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Nutrition
    <span class="badge badge-info badge-pill">12</span>
</li>