How to center Bootstrap social icons?-Twitter bootstrap

DonnovanJiles
March 27, 2018
164 views
2 votes
3 Answers

How do I position these social media icons to the center of the footer?
I’ve tried text-align and margin-left and margin-right auto. When I open the file the four icons are in the bottom left corner of the page.

This is my full HTML file with the Bootstrap content in the bottom.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social-btns">
  <a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
  <a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
  <a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
  <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
</div>

Answers

You can only set the social-btns class by css attribute text-align: center.

Please take a look on follow code snippet for more detail. Happy coding!

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
  <style>
    .social-btns{
      text-align: center;
     }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
  <div class="social-btns">
   <a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
   <a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
   <a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
   <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
  </div>
 </body>
</html>

add class text-center to social-btns section.text-center already predefined in bootstrap.

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
  <div class="social-btns text-center">
   <a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
   <a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
   <a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
   <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
  </div>
 </body>
</html>

Just add text-center class for the div tag. It’s a bootstrap class to center text.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="social-btns text-center">
  <a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
  <a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
  <a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
  <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.