CODEWITHSUNDEEP
csstwitter-bootstrap-3
MTplus
MTplus

Reputation: 2391

change bootstrap row padding

I try to use a custom css property for a bootstrap row that I want to remove the padding in the bottom. But this has no effect at all. What do I need to change in order to make it work?

<!-- Begin .row -->
<div class="row row-no-padding" style="background-color: #CCC; padding-bottom: 0!important">
    <div class="col-lg-12">
        <button type="button" class="btn_submit_quick_search btn_submit_search pull-right" style="margin-bottom: 20px;" data-toggle="collapse" data-target="#collapseOne">read more</button>
    </div>
</div>
<!-- End .row -->

Upvotes: 0

Views: 9593

Answers (2)

Nitin Vaghani
Nitin Vaghani

Reputation: 307

Here is your solution.....

        <style type="text/css">
            .row-no-padding,.row-no-padding div,.row-no-padding div button{
                padding: 0 !important;
            }
        </style>

        <div class="row row-no-padding" style="background-color: #CCC; padding-bottom: 0 !important">
            <div class="col-lg-12">
                <button type="button" class="btn_submit_quick_search btn_submit_search pull-right" style="margin-bottom: 0px;" data-toggle="collapse" data-target="#collapseOne">read more</button>
            </div>
        </div>

Replace this code

Upvotes: 1

jsadev.net
jsadev.net

Reputation: 2590

Thats the .row style of bootstrap.css:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

There is no margin-bottom or padding-bottom as you can see. But you've set a margin-bottom to your button... ;)

<button class="btn_submit_quick_search btn_submit_search pull-right" style="margin-bottom: 20px;" type="button" data-target="#collapseOne" data-toggle="collapse">read more</button>

Remove style="margin-bottom: 20px;" and there will be no more margin "inside your row"

Working solution: http://www.bootply.com/20TUhhuUcG

Upvotes: 1

Related Questions