CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
adviner
adviner

Reputation: 3567

bootstrap reduce spacing between rows

Bootstrap 3.3.5

I'm trying to reduce the amount of spacing between rows:

enter image description here

Ive tried adding removing margins & padding on the row but doesnt seem to change anything:

<div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; border: solid 1px red; padding-top: 0px !important; padding-bottom: 0px !important;">

These are the possible solutions to remove the spacing but doesnt seem to work for me.

Here is the code:

<div class="container-fluid">


    <div class="row" style=" border: solid 1px red; overflow: hidden; ">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">

            <form class="form-horizontal">
                <div class="form-group" style="">
                    <label
                    class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                    style="font-size: .8em;">Start Total:&nbsp;</label>

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
                        <input type="text" class="form-control input-sm text-left" id="startCount" readonly="readonly" style="">
                    </div>
                </div>
            </form>

        </div>

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left ">
            <form class="form-horizontal">
                <div class="form-group">
                    <label
                    class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                    style="font-size: .8em;">Inmate Total:&nbsp;</label>

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
                        <input type="text" class="form-control input-sm text-left" id="total" readonly="readonly" style="">
                    </div>
                </div>                  

            </form>
        </div>

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

    </div>

    <div class="row" style="">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">

            <form class="form-horizontal">
                <div class="form-group" style="">
                    <label
                    class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                    style="font-size: .8em;">Booked:&nbsp;</label>

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
                        <input type="text" class="form-control input-sm text-left" id="book" readonly="readonly">
                    </div>
                </div>
            </form>

        </div>


        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left">

            <form class="form-horizontal">
                <div class="form-group" style="">
                    <label
                    class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label" 
                    style="font-size: .8em;">Out House:&nbsp;</label>

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
                        <input type="text" class="form-control input-sm text-left" id="house" readonly="readonly">
                    </div>
                </div>
            </form>

        </div>




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

    </div>

</div>

Update: 1

If I modify the row style to have the following:

style="margin-bottom: -10px !important; padding-bottom: -10px !important; margin-top: -10px !important; padding-top: -10px !important; outline: solid 1px green;"

enter image description here

The row is outline does move up but the space is still there

Upvotes: 1

Views: 15296

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78590

The issue is that there is a margin applied to .form-group. To override, add this to your CSS or change it in the CSS code for bootstrap.

.form-group {
  margin-bottom: 0;
}

Demo: http://www.bootply.com/lKW7vRzS6d

Upvotes: 4

MCBama
MCBama

Reputation: 1490

Well, most likely when you're setting it to 0px, it's already at 0px. If you want to FORCE it to be smaller, supply negative values.

Upvotes: 0

Related Questions