Search code examples
htmlcssbootstrap-4footer

how to put text right and left in a footer like the one in the image


Firstly this is my second question in stackoverflow so dont be strict :( . I am trying to create a template using html,css and sometimes bootstrap In the footer i want to put text to the right like" terms and conditions,privacy" and in the left the social media icons.

I tried using columns but something was wrong or it does not work that way.

i am not in level 10 reputation so i hope the screenshot will help you understand...More info are that i want the whole template to be centered so i used a class with wrap.

https://i.sstatic.net/4fEIY.png


Solution

  • On Bootstrap 4, you can use float-right and float-left classes.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>
    
    <section>
      <a href="#" class="text-dark">Terms and conditions</a>
      <a href="#" class="text-dark">Privacy</a>
      <div class="iconHere float-right">
        Follow
        <i class="fab fa-facebook-f"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-instagram"></i>
      </div>
    </section>

    You can see the full documentation here.