Takács Zoltán Takács Zoltán - 1 month ago 6
CSS Question

Divs floating left in bootstrap

How can i float left the social icons with bootstrap, with text centered?

Im showing an image here, what i want. Now i use col-md-3 divs for floating, but there are to many free spaces between the divs.

enter image description here

<div class="col-md-12 footer_social_divs_box">

<div class="col-md-3 footer_social_divs text-center">
<a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
</div><div class="col-md-3 footer_social_divs text-center">
<a href="https://twitter.com/maldives" title="Facebook" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div><div class="col-md-3 footer_social_divs text-center">
<a href="https://www.youtube.com/channel/UCuKPYzX_LZicuVA0BsYDxeg" title="Facebook" target="_blank"><i class="fa fa-youtube-square" aria-hidden="true"></i></a>
</div><div class="col-md-3 footer_social_divs text-center">
<a href="https://www.instagram.com/explore/tags/maldives/" title="Facebook" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>


</div>

Answer

I guess you don't need to use the responsive classes on this:

.footer-responsive {
  margin: 0 5px;
  display: inline-block;
}

.text-center {
  text-align: center;
}

.fa {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #000;
}
<div class="col-md-12 footer_social_divs_box text-center">
  <div class="footer-responsive footer_social_divs text-center">
    <a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
  </div>
  <div class="footer-responsive footer_social_divs text-center">
    <a href="https://twitter.com/maldives" title="Facebook" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
  </div>
  <div class="footer-responsive footer_social_divs text-center">
    <a href="https://www.youtube.com/channel/UCuKPYzX_LZicuVA0BsYDxeg" title="Facebook" target="_blank"><i class="fa fa-youtube-square" aria-hidden="true"></i></a>
  </div>
  <div class="footer-responsive footer_social_divs text-center">
    <a href="https://www.instagram.com/explore/tags/maldives/" title="Facebook" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
  </div>
</div>