<div class="container my-5">

​

  <!-- Section: Introduction -->

  <section class="">

​

    <p>Examples of bootstrap Floating social buttons. Different design, templates & usage. </p>

​

    <p>

      Detailed documentation and more examples you can find in our

      <a href="https://mdbootstrap.com/docs/standard/components/buttons/" target="_blank"><strong>Buttons Docs</strong></a>.

    </p>

​

    <hr class="mt-5">

​

    <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>

​

    <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT<i class="fas fa-download ms-2"></i></a>

    <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>

    <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>

    <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub<i class="fab fa-github ms-2"></i></a>

​

  </section>

  <!-- Section: Introduction -->

​

  <hr class="mb-5"/>

​

  <!-- Section: Basic example -->

  <section class="">

​

    <p><strong>Basic example</strong></p>

​

    <!-- Facebook -->

    <a class="btn btn-primary btn-floating m-1" style="background-color: #3b5998" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>

​

    <!-- Twitter -->

    <a class="btn btn-primary btn-floating m-1" style="background-color: #55acee" href="#!" role="button"><i class="fab fa-twitter"></i></a>

​

    <!-- Google -->

    <a class="btn btn-primary btn-floating m-1" style="background-color: #dd4b39" href="#!" role="button"><i class="fab fa-google"></i></a>

​

    <!-- Instagram -->

    <a class="btn btn-primary btn-floating m-1" style="background-color: #ac2bac" href="#!" role="button"><i class="fab fa-instagram"></i></a>

​

    <!-- Linkedin -->

    <a class="btn btn-primary btn-floating m-1" style="background-color: #0082ca" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>

    <!-- Github -->

    <a class="btn btn-primary btn-floating m-1" style="background-color: #333333" href="#!" role="button"><i class="fab fa-github"></i></a>

​

​

  </section>

  <!-- Section: Basic example -->

​

  <hr />

​

  <!-- Section: Dark variant -->

​

  <p><strong>Dark variant</strong></p>

  <section class="mb-4 bg-dark p-4">

    <!-- Facebook -->

    <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>

​

    <!-- Twitter -->

    <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a>

​

    <!-- Google -->

    <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a>

​

    <!-- Instagram -->

    <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a>

​

    <!-- Linkedin -->

    <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>

​

    <!-- Github -->

    <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-github"></i></a>

  </section>

  <!-- Section: Dark variant -->

</div>