How to add spacing between columns

Question

I have two columns   lt div class  quot col-md-6 quot  gt  lt  div gt   lt div class  quot col-md-6 quot  gt  lt  div gt   How can I add a space between them  The output would simply be two columns right next to each other taking up the whole width of the page  Say the width was set to 1000px then each div would be 500px wide  If I wanted a 100px space between the two how could I achieve this automatically with Bootstrap  the divs sizes would become 450px each to compensate for the spacing

User · Answer

Bootstrap col slightly use some spaces both left and right. I have just added a block element like div and set border for the differences. also adding some extra padding or margin in that extra div will work perfectly..

_x000D_

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

<br><br>

<div class="container">
    <div class="row">
        <div class="col-6 ">
            <div class="border border-danger ">
                <h2 class="text-center">1</h2>
            </div>
        </div>
        <div class="col-6">
            <div class="border border-warning">
                <h2 class="text-center">2</h2>
            </div>
        </div>
    </div>
</div>

_x000D_

User · Answer

Bootstrap 4  Documentation says  here       Rows are wrappers for columns  Each column has horizontal padding  called a gutter  for controlling the space between them  This padding is then counteracted on the rows with negative margins  This way  all the content in your columns is visually aligned down the left side    So the right answer is  set cols  padding-left right equal to minus your row s margin-left right  That simple    my-row     margin-left  -80px    margin-right  -80px      my-col     padding-left  80px    padding-right  80px      Demo  https   codepen io frouo pen OqGaWN

User · Answer

lt div class  col-md-12 no padding header row  gt  lt  div gt          lt div class  second row  gt           lt div class  col-md-4 box shadow  gt  lt  div gt           lt div class  col-md-8 no padding right  gt               lt div class  col-md-12 box shadow  gt  lt  div gt           lt  div gt       lt  div gt        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

User · Answer

I was facing the same issue  and the following worked well for me  Hope this helps someone landing here    lt div class  row  gt     lt div class  col-md-6  gt        lt div class  col-md-12  gt          Some Content          lt  div gt     lt  div gt     lt div class  col-md-6  gt        lt div class  col-md-12  gt          Some Second Content          lt  div gt     lt  div gt   lt  div gt    This will automatically render some space between the 2 divs

User · Answer

With latest bootstrap version  you can use  cards

User · Answer

To obtain a particular width of spacing between columns  we have to set up padding in the standard Bootstrap s layout    x000D   x000D   import url  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css    x000D   x000D     Check breakpoint at http   getbootstrap com css  grid-media-queries    x000D   media  min-width  992px     x000D     space-100-px  gt   row  gt   col-md-6 first-child   x000D      padding  0 50px 0 0     The first half of 100px    x000D      x000D     space-100-px  gt   row  gt   col-md-6 last-child   x000D      padding  0 0 0 50px     The second half of 100px    x000D      x000D    x000D   x000D     The result will be easier to see      x000D   space-100-px img   x000D    width  100   x000D    height  auto  x000D    x000D   lt div class  container-fluid space-100-px  gt  x000D     lt div class  row  gt  x000D       lt div class  col-md-6  gt  x000D         lt img src  http   placehold it 450x100 text Left  alt  Left  gt  x000D       lt  div gt  x000D       lt div class  col-md-6  gt  x000D         lt img src  http   placehold it 450x100 text Right  alt  Right  gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   lt div class  row  gt       lt div class  col-sm-7  gt           lt div class  raised-block  gt               lt h3 gt Facebook lt  h3 gt           lt  div gt       lt  div gt       lt div class  col-sm-5  gt           lt div class  raised-block  gt               lt h3 gt Tweets lt  h3 gt           lt  div gt       lt  div gt   lt  div gt    CSS   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 gt  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

User · Answer

Simple Way   row div    padding-left  8px    padding-right  8px

User · Answer

you can use background-clip and box-model with border proprety   box    box-model  border-box    border  3px solid transparent    background-clip padding-box       lt div class  row  gt     lt div class  col-xs-4 box  gt  lt  div gt     lt div class  col-xs-4 box  gt  lt  div gt     lt div class  col-xs-4 box  gt  lt  div gt   lt  div gt

User · Answer

Just white border around wrap element   padding-pls    border-left  13px solid white    border-right  13px solid white     row  col-md-6 first-child gt  padding-pls     border-left  0px solid white     row  col-md-6 last-child gt  padding-pls     border-right  0px solid white      and first last child no border       lt div class  row  gt         lt div class  col-md-6  gt           lt div class  col-md-12 padding-pls  gt            Keci          lt  div gt         lt  div gt         lt div class  col-md-6  gt           lt div class  col-md-12 padding-pls  gt            Keci          lt  div gt         lt  div gt     lt  div gt

User · Answer

I needed one column on mobile and two columns from tablet portrait up  with equal spacing between them in the middle  also without any grid-added padding inside columns   Could be achieved using spacing utilities and omitting the number in col-md        lt div class  container-fluid px-0  gt           lt div class  row no-gutters  gt               lt div class  col-sm-12 col-md mr-md-3  style  background-color  orange  gt                   lt p gt  lt strong gt Column 1 lt  strong gt  lt  p gt               lt  div gt               lt div class  col-sm-12 col-md ml-md-3  style  background-color  orange  gt                   lt p gt  lt strong gt Column 1 lt  strong gt  lt  p gt               lt  div gt           lt  div gt       lt  div gt

User · Answer

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    lt div class  container  gt       lt div class  col-md-3   gt           lt div class  col-md-12 well  gt              Some Content            lt  div gt       lt  div gt       lt div class  col-md-3   gt           lt div class  col-md-12 well  gt              Some Second Content            lt  div gt       lt  div gt       lt div class  col-md-3   gt           lt div class  col-md-12 well  gt              Some Second Content            lt  div gt       lt  div gt       lt div class  col-md-3   gt           lt div class  col-md-12 well  gt              Some Second Content            lt  div gt       lt  div gt       lt div class  col-md-3   gt           lt div class  col-md-12 well  gt              Some Second Content            lt  div gt       lt  div gt       lt div class  col-md-3   gt           lt div class  col-md-12 well  gt              Some Second Content            lt  div gt       lt  div gt       lt div class  col-md-3   gt           lt div class  col-md-12 well  gt              Some Second Content            lt  div gt       lt  div gt       lt div class  col-md-3   gt           lt div class  col-md-12 well  gt              Some Second Content            lt  div gt       lt  div gt   lt  div gt

User · Answer

lt div class  col-md-6  gt       lt div class  inner  gt           lt  -- Put the col-6 elements in the inner div -- gt       lt  div gt   lt  div gt    This by default provides some padding inside the outer div the way you seem to need  Moreover you can also modify the padding using custom CSS

User · Answer

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

User · Answer

This will be useful     x000D   x000D   list-item  x000D    margin-right -10px  x000D     margin-top 10px  x000D      margin-bottom  10px  x000D      border  1px solid  eee  x000D      padding  0px  x000D      x000D   lt div class  col-md-4  gt  x000D     lt div class  list-item  gt  x000D         lt h2 gt Your name lt  h2 gt   x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  col-md-4  gt  x000D      lt div class  list-item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    If use want to increase or decrease further margin in right side of the box then simply edit margin-right property of list-item   sample output

User · Answer

I know this post is a little dated but I ran in to this same problem  Example of my html    lt div class  row  gt       lt div class  col-xs-3  gt           lt div class  form-group  gt               lt label asp-for  FirstName  class  control-label  gt  lt  label gt               lt input asp-for  FirstName  class  form-control    gt               lt span asp-validation-for  FirstName  class  text-danger  gt  lt  span gt           lt  div gt       lt  div gt       lt div class  col-xs-3  gt           lt div class  form-group  gt               lt label asp-for  LastName  class  control-label  gt  lt  label gt               lt input asp-for  LastName  class  form-control    gt               lt span asp-validation-for  LastName  class  text-danger  gt  lt  span gt           lt  div gt       lt  div gt               lt  div gt    In order to create space between the groups I overrode bootstrap s margin of -15px in my site css file by reducing the negative margin by 5    Here s what I did      form-group       margin-right  -10px      I hope this helps somebody else

User · Answer

Bootstrap 4 - Separate columns using nested rows    lt div class  container  gt       lt div class  row bg-info p-3  gt            lt  -- left column -- gt           lt div class  col-8   gt               lt div class  col-12 bg-light p-3  gt                  Lorem ipsum dolor sit amet consectetur adipisicing elit  Porro error enim  perferendis rerum  sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio               lt  div gt           lt  div gt            lt  -- right column -- gt           lt div class  col-4   gt               lt div class  col-12 bg-light p-3  gt                  Lorem ipsum dolor sit amet consectetur adipisicing elit  Porro error enim  perferendis rerum  sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

Using margin-left is the way to go    lt div style  margin-left -2px  class  col-md-6  gt  lt  div gt   lt div style  margin-left 2px  class  col-md-6  gt  lt  div gt    works perfectly

User · Answer

Since you re using bootstrap  I guess you want to make the thing responsive  In that case you should n use fixed sizes  in  px  for example   As a workaround to other solutions  I propose make both columns  col-md-5  instead of  col-md-6   and then in the parent element  row  that contains the columns  add the class  justify-content-between   which puts the free space in the middle  as you can check in the bootstrap doc here   This solution is also valid for more than two columns adjusting the  col-md-x  of course  hope it helps

User · Answer

lt div class  quot row quot  gt      lt div class  quot col-sm-6 quot  gt       lt div class  quot card quot  gt          Content one      lt  div gt     lt  div gt      lt div class  quot col-sm-6 quot  gt       lt div class  quot card quot  gt          Content two      lt  div gt     lt  div gt    lt  div gt

User · Answer

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    lt div class  col-md-5 pull-left  gt  lt  div gt   lt div class  col-md-5 pull-right  gt  lt  div gt

User · Answer

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   html    lt div class  row  gt     lt div id  orange  class  col-md-4  gt       lt h1 gt Orange Div lt  h1 gt     lt  div gt     lt div id  green  class  col-md-4  gt       lt h1 gt Green Div lt  h1 gt     lt  div gt     lt div id  aqua  class  col-md-4  gt       lt h1 gt Aqua Div lt  h1 gt     lt  div gt   lt  div gt    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

User · Answer

This also one way of doing it and its works  Please check the following url https   jsfiddle net sarfarazk ofgqm0sh    lt div class  container  gt    lt div class  row  gt     lt div class  col-md-6  gt       lt div class  bg-success  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua       lt  div gt     lt  div gt     lt div class  col-md-6  gt       lt div class  bg-warning  gt Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium       lt  div gt     lt  div gt   lt  div gt   lt  div gt

User · Answer

Create a class and use   margin  1 5em  5em  max-width  calc 50  -  1em  important   Where 1em on the max-width is equal to the left right margin added together

User · Answer

Inside the col-md-   create another div and put picture in that div  than you can easily add padding like so    lt div class  row  gt     lt div class  col-md-8  gt        lt div class  thumbnail  gt          lt img src      gt        lt  div gt     lt  div gt     lt div class  col-md-4  gt        lt div class  thumbnail  gt          lt img src      gt        lt  div gt     lt  div gt      lt  div gt    lt style gt    thumbnail       padding 4px                lt  style gt

User · Answer

I know I m late to the party  but you could try spacing the boxes with padding    lt div class  col-md-6 box  gt           lt div class  inner  gt Hello lt  div gt   lt  div gt   lt div class  col-md-6 box  gt           lt div class  inner  gt Hello lt  div gt   lt  div gt    CSS    box       padding  0 5px 0 5px     box  inner       background-color   fff      Have a go at it

User · Answer

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   lt div class  quot row quot  gt     lt div class  quot col-md-5 quot  gt  lt  div gt     lt div class  quot col-md-5 col-md-offset-2 quot  gt  lt  div gt   lt  div gt   In Bootstrap 4 use  offset-2 or offset-md-2

User · Answer

According to Bootstrap 4 documentation you should give the parent a negative margin mx-n   and the children a positive padding px-    x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet    gt  x000D   lt div class  row mx-n5  gt  x000D     lt div class  col px-5  gt  x000D       lt div class  p-3 border bg-light  gt Custom column padding lt  div gt  x000D     lt  div gt  x000D     lt div class  col px-5  gt  x000D       lt div class  p-3 border bg-light  gt Custom column padding lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use bootstrap s  form-group class  Like this in your case    lt div class  col-md-6 form-group  gt  lt  div gt   lt div class  col-md-6 form-group  gt  lt  div gt

User · Answer

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      by default  grid-gutter-width-base  30px

User · Answer

it s simple    you have to add solid border right  left to col-   and it should be work       it looks like this   http   i stack imgur com CF5ZV png  HTML     lt div class  row  gt        lt div class  col-sm-3  id  services block  gt         lt  div gt        lt div class  col-sm-3  id  services block  gt         lt  div gt        lt div class  col-sm-3  id  services block  gt         lt  div gt        lt div class  col-sm-3  id  services block  gt         lt  div gt   lt  div gt    CSS    div services block      height  355px     background-color   33363a     border-left 3px solid white     border-right 3px solid white

[css] How to add spacing between columns?

Examples related to css

Examples related to twitter-bootstrap-3