<!--End of Title section-->
<div class="section section-md components-section">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="mb-3">
                    <h4 class="h5">Main Buttons</h4>
                </div>
                <button class="btn btn-primary" type="button">Button</button>
                <button class="btn btn-primary" type="button">
                    <span class="me-1"><span class="fas fa-book-open"></span></span>
                    Icon Left
                </button>
                <button class="btn btn-primary" type="button">
                    Icon Right
                    <span class="ms-1"><span class="fas fa-book-open"></span></span>
                </button>
                <button class="btn btn-icon-only btn-primary" type="button" aria-label="love button"
                    title="love button">
                    <span aria-hidden="true" class="far fa-heart"></span>
                </button>
                <!--End of Buttons-->
                <div class="mb-3 mt-5">
                    <h4 class="h5">Outline Buttons</h4>
                </div>
                <!--Buttons-->
                <button class="btn btn-outline-primary" type="button">Outline-primary</button>
                <button class="btn btn-outline-primary" type="button">
                    <span class="me-1"><span class="far fa-save"></span></span>
                    Icon Left
                </button>
                <button class="btn btn-outline-primary" type="button">
                    Icon Right
                    <span class="ms-1"><span class="far fa-save"></span></span>
                </button>
                <button class="btn btn-outline-primary btn-icon-only" type="button" aria-label="up button"
                    title="up button">
                    <span aria-hidden="true" class="far fa-thumbs-up"></span>
                </button>
                <!--End of Buttons-->
                <div class="mb-3 mt-5">
                    <h4 class="h5">Sizes</h4>
                </div>
                <!--Buttons-->
                <button class="btn btn-sm btn-primary" type="button">Small</button>
                <button class="btn btn-primary" type="button">Regular</button>
                <button class="btn btn-lg btn-primary" type="button">Large Button</button>
                <!--End of Buttons-->
                <!-- Button colors -->
                <div class="mb-3 mt-5">
                    <h4 class="h5">Choose your color</h4>
                </div>
                <div class="mb-3 mt-5">
                    <h4 class="h5 font-weight-bold h6">Main</h4>
                </div>
                <!--Buttons-->
                <button class="btn btn-primary" type="button">Primary</button>
                <button class="btn btn-secondary" type="button">Secondary</button>
                <button class="btn btn-tertiary" type="button">Tertiary</button>
                <button class="btn btn-info" type="button">Info</button>
                <button class="btn btn-success text-white" type="button">Success</button>
                <button class="btn btn-warning" type="button">Warning</button>
                <button class="btn btn-danger" type="button">Danger</button>
                <button class="btn btn-dark" type="button">Dark</button>
                <button class="btn btn-gray" type="button">Gray</button>
                <button class="btn btn-light" type="button">Light</button>
                <button class="btn btn-white" type="button">White</button>
                <!--End Of Buttons-->
                <div class="mb-3 mt-5">
                    <h4 class="h5 font-weight-bold h6">Outline</h4>
                </div>
                <!--Buttons-->
                <button class="btn btn-outline-primary" type="button">Primary</button>
                <button class="btn btn-outline-secondary" type="button">Secondary</button>
                <button class="btn btn-outline-tertiary" type="button">Tertiary</button>
                <button class="btn btn-outline-info" type="button">Info</button>
                <button class="btn btn-outline-success" type="button">Success</button>
                <button class="btn btn-outline-danger" type="button">Danger</button>
                <button class="btn btn-outline-dark" type="button">Dark</button>
                <button class="btn btn-outline-gray" type="button">Gray</button>
            </div>
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-lg-4">
                        <!-- Button Social -->
                        <div class="mb-4 mt-5">
                            <h4 class="h5">Social Buttons</h4>
                        </div>
                        <button class="btn btn-facebook mb-3" type="button">
                            <span class="me-1"><span class="fab fa-facebook-f"></span></span>
                            Login with Facebook
                        </button>
                        <br>
                        <button class="btn btn-twitter text-white mb-3" type="button">
                            <span class="me-1"><span class="fab fa-twitter"></span></span>
                            Share on Twitter
                        </button>
                        <br>
                        <button class="btn btn-instagram mb-3" type="button">
                            <span class="me-1"><span class="fab fa-instagram"></span></span>
                            Share on Instagram
                        </button>
                        <br>
                        <button class="btn btn-dribbble mb-3" type="button">
                            <span class="me-1"><span class="fab fa-dribbble"></span></span>
                            Login with dribbble
                        </button>
                        <br>
                        <button class="btn btn-slack text-white mb-3" type="button">
                            <span class="me-1"><span class="fab fa-slack"></span></span>
                            Chat on Slack
                        </button>
                        <br>
                        <button class="btn btn-dropbox mb-3" type="button">
                            <span class="me-1"><span class="fab fa-dropbox"></span></span>
                            Smart Sync
                        </button>
                        <br>
                        <button class="btn btn-github" type="button">
                            <span class="me-1"><span class="fab fa-github-alt"></span></span>
                            Login with GitHub
                        </button>
                    </div>
                    <div class="col-12 col-lg-4">
                        <!-- Button Social -->
                        <div class="mb-4 mt-5">
                            <h4 class="h5">Round Social Buttons</h4>
                        </div>
                        <button class="btn btn-icon-only btn-facebook" type="button" aria-label="facebook button"
                            title="facebook button">
                            <span aria-hidden="true" class="fab fa-facebook"></span>
                        </button>
                        <button class="btn btn-icon-only btn-twitter text-white" type="button"
                            aria-label="pinterest button" title="pinterest button">
                            <span aria-hidden="true" class="fab fa-twitter"></span>
                        </button>
                        <button class="btn btn-icon-only btn-instagram" type="button" aria-label="youtube button"
                            title="youtube button">
                            <span aria-hidden="true" class="fab fa-instagram"></span>
                        </button>
                        <button class="btn btn-icon-only btn-dribbble" type="button" aria-label="github button"
                            title="github button">
                            <span aria-hidden="true" class="fab fa-dribbble"></span>
                        </button>
                        <button class="btn btn-icon-only btn-slack text-white" type="button" aria-label="twitch button"
                            title="twitch button">
                            <span aria-hidden="true" class="fab fa-slack"></span>
                        </button>
                        <button class="btn btn-icon-only btn-dropbox" type="button" aria-label="paypal button"
                            title="paypal button">
                            <span aria-hidden="true" class="fab fa-dropbox"></span>
                        </button>
                        <button class="btn btn-icon-only btn-github" type="button" aria-label="behance button"
                            title="behance button">
                            <span aria-hidden="true" class="fab fa-github"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>