Yoshita Arora Yoshita Arora - 5 months ago 38
CSS Question

Including social icons at the bottom-right corner using bootstrap grid system

I want to add three social icons (with inline display) at the bottom right corner of my landing page using the bootstrap grid system. I am not using bootstrap font-awesome. I have tried doing the following but the icons are not displaying inline, but displaying downwards.

HTML:

<div class="row">

// this was for the stuff placed on the bottom left.

<div class="col-xs-12 col-md-6 col-lg-6 col-xlg-6">
<div class="col-xs-12 col-md-4 col-lg-4 col-xlg-4">
<ul class="contact list-style">
<li class="uppercase blue-text-color">Company</li>
<li class="active uppercase"> <a href="">About</a> </li>
<li class="uppercase"> <a href="">Careers</a> </li>
<li class="uppercase"> <a href="">Blogs</a> </li>
</ul>
</div>

<div class="col-xs-12 col-md-4 col-lg-4 col-xlg-4">
<ul class="contact list-style">
<li class="uppercase blue-text-color">Get in touch</li>
<li class="active uppercase"> <a href="">contact us</a> </li>
<li>1-800-706-0806</li>
</ul>
</div>

<div class="col-xs-12 col-md-4 col-lg-4 col-xlg-4">
<ul class="contact list-style">
<li class="uppercase blue-text-color">help</li>
<li class="active uppercase"> <a href="">Privacy policy</a> </li>
<li class="uppercase"> <a href="">terms of service</a> </li>
</ul>
</div>
</div>

// now the following is for the icons i wish to include
// in the bottom right.

<div class="col-xs-12 col-md-6 col-lg-6 col-xlg-6">
<div class="col-md-2 col-lg-2 col-xlg-2">
<ul class="list-style" style="display: inline;">
<li><a href="#"><img src="./img/new/facebook.png" alt="facebook" width="50px" height="50px"></a></li>
<li><a href="#"><img src="./img/new/twitter.png" alt="twitter" width="50px" height="50px"></a></li>
<li><a href="#"><img src="./img/new/linkedin.png" alt="linkedin" width="50px" height="50px"></a></li>
</ul>
</div>
</div>

</div>


CSS (all that has been used in this code other than the linked bootstrap.min.css):

.content {
padding: 30px 10px;
}

.contact a{
text-decoration: none;
color: #888888;
}

.list-style {
list-style: none;
}

.uppercase {
text-transform: uppercase;
}

.blue-text-color {
color: #33BBDB;
}


right now I have this:

enter image description here

but I want something like this:

enter image description here

I am very new to bootstrap and I am sure I am missing somewhere. I have been trying to solve this since long but haven't been able to find a solution. Any help would be greatly appreciated. Thanks.

Answer

Use .list-style li{ display:inline;}

and remove the ul above div col-md-2 col-lg-2 col-xlg-2