Rectangle 27 217

I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

This was really helpful, spent hours trying multiple CSS tweaks but all made it worse, i have to say your solution is simple yet effective. Thanks

this works, but can anyone explain why it works?

"gutter widths" refers to the spacing in padding and margins defined in the core of bootstrap's grid system. In short, adding in a second div with col-xs-12 is the same as adding a div with width:100%; padding:0px 15x;

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 95

You can achieve spacing between columns using the col-md-offset-* classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

that would work when I want to stick with the default column sizes, what if I want a specific size of spacing, rather than offsetting the columns?

In this case I would recommend using the provided mixins to adjust column gutters: getbootstrap.com/css/#grid-less - Bootstrap doesn't do what you ask in the question, it can't "adjust" grid widths to account for extra spacing in between because it is based on a pixel grid.

Ben, is it wise to suggest adding non semantic empty divs to the HTML in order to add grid gutters?

George - you have the offset classes for this. But if you find the built in gutters insufficient then you might want to try compiling your own version of bootstrap, either from less or sass depending on your preferences. You can then modify the column widths and gutters to match your website. Adding empty divs isn't really bad though, what is important is coming up with something that you (and/or your team) can use consistently; if empty divs is the way that you achieve that then it's fine; remember that your markup is meant to be read by your developers, not your end users.

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 51

I know I'm late to the party, but you could try spacing the boxes with padding.

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

Have a go at it

This works, just wish there was a way without having to add extra divs.

This seems most feasible and straightforward solution among the all. It works for me.

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 5

I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.

I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.

This was the end result we were going for

Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.

this is the markup for the two columns

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>
.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column

This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.

The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 11

This will allow a space between the two columns and obviously if you want to change the default width you can go for mixins to modify the default bootstrap width. Or, you can give the width using the inline css style. The choice is entirely yours!!!

<div class="col-md-5 pull-left"></div>
    <div class="col-md-5 pull-right"></div>

The semantic of this is not exactly what @Muhammed is asking. You are adding a change in the order of the columns with pull-left, pull-right.

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 7

.form-group

class. Like this in your case:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 7

You can achieve spacing between columns using the col-xs-* classes,within in a col-xs-* div coded below. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 4

you can use background-clip and box-model with border proprety

.box{
  box-model: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}
<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 2

Bootstrap 4, file custom.scss you can add following code:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 2

I had to figure out how to do this for 3 columns. I wanted to round the corners of the divs and couldn't get the spacing to work. I used margins. In my case I figured for 90% of the screen to be filled in by the divs and 10% for margins:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

and CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

To make it resize correctly for mobile devices, I had the CSS change the width from 30% to width:92.5%; under @media (max-width:1023px)

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 1

How about just adding a border the same color as the background using css? I'm new to this, so maybe there's a good reason not to, but it looked good when I tried it.

Welcome to stack overflow. If you need more information or clarification on a question, please use comments instead of answers.

If the background used an image/texture instead of solid color this would be obvious.

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 1

<div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}

A bit prose about what and why might be helpful.

html - twitter bootstrap grid system. Spacing between columns - Stack ...

html css grid twitter-bootstrap-3
Rectangle 27 2

I think you want to make sure the .inner DIV has overflow:auto like this..

.inner {
    border-top: 0;
    border-left: solid 1px #c4c4c4;
    border-bottom: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    box-shadow: 0 1px #c1c1c1;
    padding-bottom: 1em;
    padding: 1em;
    height: auto;
    overflow: auto;
}

EDIT - A better solution as suggested by @Pevara would be to make inner a row..

This, or apply Bootstrap's clearfix class appropriately.

@Skelly Thanks, both methods did the trick, I'll stick with using the .row class then :)

html - Bootstrap grid system within ng-repeat - Stack Overflow

html css angularjs twitter-bootstrap
Rectangle 27 39

Results in this: (Demo in Fiddle)

No, there's nothing to mandate that the bootstrap grid must add up to 12 columns. It's just a preference / stylistic thing.

If you have less than twelve of the columns filled, by default they will left align, leaving empty space to the right.

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

If the total adds to more than 12 columns, as long as the columns are within a row class, they will just wrap to additional rows. A good use case would be a photo grid system where you would like to add tons of photos but don't know how many rows you'll have and would still like to define the number of columns.

The following code

<div class='row'>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
</div>

Other than that, sometimes it's the case that 12 column layouts look better, but you don't have to use them; it's not a sudoku :)

Thanks for this great explanation. There are many that mistakenly think there is a problem with have more than 12 column units per row.

html - Bootstrap 3 grid, does it *really* matter how many columns are ...

html css twitter-bootstrap twitter-bootstrap-3 grid-layout
Rectangle 27 37

Results in this: (Demo in Fiddle)

No, there's nothing to mandate that the bootstrap grid must add up to 12 columns. It's just a preference / stylistic thing.

If you have less than twelve of the columns filled, by default they will left align, leaving empty space to the right.

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

If the total adds to more than 12 columns, as long as the columns are within a row class, they will just wrap to additional rows. A good use case would be a photo grid system where you would like to add tons of photos but don't know how many rows you'll have and would still like to define the number of columns.

The following code

<div class='row'>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
</div>

Other than that, sometimes it's the case that 12 column layouts look better, but you don't have to use them; it's not a sudoku :)

Thanks for this great explanation. There are many that mistakenly think there is a problem with have more than 12 column units per row.

html - Bootstrap 3 grid, does it *really* matter how many columns are ...

html css twitter-bootstrap twitter-bootstrap-3 grid-layout
Rectangle 27 23

Unless you have a specific need for the show-grid and bs-docs-grid classes, there's no need to include them. They aren't part of the base bootstrap CSS.

If you can achieve the layout you need using nested grids, I would certainly use them. They will save you time and reduce potential browser compatibility issues.

html - Bootstrap Nested Grid Systems Best Practices - Stack Overflow

html css twitter-bootstrap twitter-bootstrap-3 grid-system
Rectangle 27 1

Put your textbox with id="insurance" inside div with class 'col-sm-3' and put your radio buttons inside div with class col-sm-6. This will properly structure your controls and is in adherence to the 'BootStrap Grid system'. You can read more about the Bootstrap Grid Template here

<div class="col-sm-3">
                    <input type="text" class="form-control" id="insurance"  placeholder="Select Type">  </div>
                    <div class="col-sm-6">  
                       <label class="radio-inline">

                       <input type="radio" name="radio2" id="radio0" value="0"  onchange="" checked>Single
                       </label>
                       <label class="radio-inline">
                       <input type="radio" name="radio2" id="radio1" value="200"  onchange="">Wife
                       </label>
                       <label class="radio-inline">
                       <input type="radio" name="radio2" id="radio2" value="300"  onchange="">Children
                       </label>                                     
                    </div>
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container" >
         <div class="panel-group">
            <div class="panel panel-primary"  >
               <div class="panel-heading">
                  <h3 class="panel-title" style="text-align: center;">
                     Information		  
                  </h3>
               </div>
               <div class="panel-body">
                  <form class="form-horizontal" >
                     <div class="form-group">
                        <label class="control-label col-sm-3"  for="employeeid">ID:</label>
                        <div class="col-sm-8">
                           <div class="input-group">				
                              <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>
                              <input type="text" class="form-control" id="employeeid"  placeholder="Enter ID"> 		   
                           </div>
                        </div>
                     </div>
                     <div class="form-group form-inline">
                        <label class="control-label col-sm-3" style="text-align:right;" >Type:</label>
                       <div class="col-sm-3">
                        <input type="text" class="form-control" id="insurance"  placeholder="Select Type"> 	</div>
                        <div class="col-sm-6">	
                           <label class="radio-inline">
                             
                           <input type="radio" name="radio2" id="radio0" value="0"  onchange="" checked>Single
                           </label>
                           <label class="radio-inline">
                           <input type="radio" name="radio2" id="radio1" value="200"  onchange="">Wife
                           </label>
                           <label class="radio-inline">
                           <input type="radio" name="radio2" id="radio2" value="300"  onchange="">Children
                           </label>										
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

it works. also if understand your suggestion then, you are saying that: there could problem, if less or more than 12 columns in one line.Thanks @Alorika.

Yes, we should maintain the grid system, so that the structure will remain intact and will not get disturbed while resizing.

html - Why the group of input text and radio buttons aren't displaying...

html twitter-bootstrap
Rectangle 27 1

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 :)

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

html - Bootstrap Grid system multiple div inside a row - Stack Overflo...

html css twitter-bootstrap
Rectangle 27 1

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 :)

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

html - Bootstrap Grid system multiple div inside a row - Stack Overflo...

html css twitter-bootstrap
Rectangle 27 1

Did you try the new grid options? Especially .col-xs-* should help you.

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

html - bootstrap 3.0.0 switch off responsive whilst being able to use ...

html css twitter-bootstrap responsive-design twitter-bootstrap-3