Bootstrap Grid system multiple div inside a row

Question

I have a container in which the rows are divided into 8 and 4 cols but when I try to put a div inside a col there is a spacing on the left and right of the dov inside that col. Why is that?

.contactUsText {
    background-color: gray; 
    height: 50px;
}

.mailUs {
    height: 40px;
    background-color: gray;
    padding-top: 7px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col col-12 col-sm-12 col-md-8 col-lg-8 mapDiv" id="maps">

    </div>
    <div class="col col-12 col-sm-12 col-md-4 col-lg-4 formDiv">
        <div class="contactUsText"> Connect </div>
        <div class  ="mailUs"> Leave Us a Message!</div> 
    </div>
</div>
<div class="row">
    <div class="col col-12 col-sm-12 col-md-12 footer"> </div>
</div>

Contact us and the mailUs is having spaces both the side.

EDIT

This is not the duplicate.

That question is having for the solution who have nested container but in my question there is only one container which have multiple div applying htat solution gives me no paddint to the whole container which is not what I wanted.

score 1 · Accepted Answer · edited May 23 '17 at 11:53

Edited:

Since you are talking about the outer left/right margins of the whole row, you can remove them by adding style="padding-left: 0; padding-right: 0;" to the div which has formDiv class or define a new noLeftRightPadding class and apply it to that div as in following snippet.

Also, to remove extra (horizontal) space which is add between two inner divs (Contact us and the mailUs) you have to join their html code beside each other without any newline (ENTER) between them or use some trick specified in this post.

Note: it seems that you need also something like as dislpay: inline-block for inner divs as div is a block element and will put at a new line (or you may miss some css in your code)

.row {background: orange;}

.row div.noLeftRightPadding {padding-left:0; padding-right:0;}

.contactUsText {
  background-color: gray; 
  height: 50px;
  /*display:inline-block;*/
}
    
.mailUs {
  height: 40px;
  background-color: gray;
  padding-top: 7px;
  /*display:inline-block;*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
    <div class="row">
        <div class="col col-12 col-sm-12 col-md-8 col-lg-8 mapDiv" id="maps">
        </div>
      
        <div class="col col-12 col-sm-12 col-md-4 col-lg-4 formDiv noLeftRightPadding">
            <div class="contactUsText"> Connect </div>
            <div class  ="mailUs"> Leave Us a Message!</div> 
     </div>     
      
    </div>
    <div class="row">
        <div class="col col-12 col-sm-12 col-md-12 footer"> </div>
    </div>
</div>

I was talking about the right and left margin. Thanks Bud :) — Rehan, Jan 26 '17 at 10:23
You might consider using a bootstrap row element. When you place a div with a class row, it has - margins to negate the padding. Not sure if I hit the subject completely, but hopefully it helps. Cheers — Lesotto, Jan 26 '17 at 10:45

Bootstrap Grid system multiple div inside a row

1 Answers1