CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Su Han
Su Han

Reputation: 95

Remove Padding from column in Bootstrap

Icons with columns added

Icons when no columns added

The first image is when I add css to the icons. It looks perfect but not responsive. I have not used any .col values for that. here is the css code

.fb {
background: none;
float: left;
height: 37px;
overflow:hidden;
    }
.fb img {
transition: 0.4s;
overflow: hidden;
}
.fb img:hover {
margin-top: -37px;
}

And here is the HTML Code 

    <!--Social Icons UL Starts-->
    <ul>
        <li class="fb"><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
        <li class="fb"><a href="#"><img src="images/twitter.png" alt="Facebook"></a></li>
        <li class="fb"><a href="#"><img src="images/linkedin.png" alt="Facebook"></a></li>
        <li class="fb"><a href="#"><img src="images/gplus.png" alt="Facebook"></a></li>
    </ul>
    <!--Social Icons Ul Ends-->

</div>
<div class="clearfix"></div>
<!--Social Ends-->

Now I added some column codes and padding attribute is added and the result is as it looks in second image. here is what i wrote in HTML

    <!--Social Starts-->
<div class="col-md-3 col-md-offset-3 social text-center">

    <!--Social Icons UL Starts-->
    <ul>
        <li class="fb col-sm-2 col-xs-offset-1"><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-xs-offset-1"><a href="#"><img src="images/twitter.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-xs-offset-1"><a href="#"><img src="images/linkedin.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-xs-offset-1"><a href="#"><img src="images/gplus.png" alt="Facebook"></a></li>
    </ul>
    <!--Social Icons Ul Ends-->

</div>
<div class="clearfix"></div>
<!--Social Ends-->

What should I do here. I am doing something wrong but I cant figure it out.

Upvotes: 1

Views: 1447

Answers (2)

ReadyToWork
ReadyToWork

Reputation: 81

<div class="col-md-3 col-md-offset-3 ">

    <!--Social Icons UL Starts-->
    <ul>
        <li class="fb col-sm-3"><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
        <li class="fb col-sm-3"><a href="#"><img src="images/twitter.png" alt="Facebook"></a></li>
        <li class="fb col-sm-3"><a href="#"><img src="images/linkedin.png" alt="Facebook"></a></li>
        <li class="fb col-sm-3"><a href="#"><img src="images/gplus.png" alt="Facebook"></a></li>
    </ul>
    <!--Social Icons Ul Ends-->

</div>
<div class="clearfix"></div>

Try this, for me is working.

Upvotes: 2

Vivek Pratap Singh
Vivek Pratap Singh

Reputation: 9974

Try this out :- 

    <!--Social Icons UL Starts-->
    <ul>
        <li class="fb col-sm-2 col-sm-offset-1"><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-sm-offset-1"><a href="#"><img src="images/twitter.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-sm-offset-1"><a href="#"><img src="images/linkedin.png" alt="Facebook"></a></li>
        <li class="fb col-sm-2 col-sm-offset-1"><a href="#"><img src="images/gplus.png" alt="Facebook"></a></li>
    </ul>
    <!--Social Icons Ul Ends-->

</div>
<div class="clearfix"></div>
<!--Social Ends-->

Edit : Replacing class col-xs-offset-1 to col-sm-offset-1 in order to complete grid of 12.

Upvotes: 2

Related Questions