0

In Bootstrap, I am using col-md-6 to bring two columns but how to remove the gap in the middle and fill the spaces?

For example in photoshop:

enter image description here

HTML Code:

        <div class="row">
            <div  class="col-md-6">
               <div class="blue-section">
                   1
               </div>
            </div>
            <div  class="col-md-6">
               <div class="red-section">
                  2
               </div>
            </div>
        </div>

Note: I just want to apply for this section only, not everything by default.

user1246800
  • 287
  • 1
  • 3
  • 14

5 Answers5

2

Assuming that you want to have just the backgrounds touching, then you don't need to do anything. The column gutters (that are represented on your photoshop file by the blue lines) in Bootstrap are produced by padding. So, you can simply do the following to achieve what's in your photoshop file:

HTML:

<div class="container">
  <div class="row">
    <div  class="col-md-6 blue-section">              
      1      
    </div>
    <div  class="col-md-6 red-section">              
      2            
    </div>
  </div>
</div>

CSS:

.blue-section{background:blue;}
.red-section{background:red;}

This will result in still having padding for your content.

jme11
  • 17,134
  • 2
  • 38
  • 48
1

Use the .row with negative margins to remove the gutter (padding) between columns..

<div class="row">
  <div class="col-md-6">
    <div class="row blue-section">
      1
    </div>
  </div>
  <div class="col-md-6">
    <div class="row red-section">
      2
    </div>
  </div>
</div>

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

It's a pretty old question, but just to make it helpful for anyone coming now, Bootstrap now has a g (gutter) class which removes the spaces in between edges of columns.

<div class="row g-0"> // the g-0 will remove all spaces. Ranges from 0-5.
    <div class="col-6">
       // content
    </div>
    <div class="col-6">
       // content        
    </div>
</div>

For Bootstrap 5, you can refer to this link as well if needed: https://getbootstrap.com/docs/5.0/layout/gutters/

Siddharth Bhansali
  • 2,017
  • 2
  • 10
  • 19
0

i think you have to take your structure like this 

<div class="container">
  <div class="row">
    <div  class="col-md-6"> 
        <div class="row">1</div>
    </div>
    <div  class="col-md-6">              
      <div class="row">2</div>
    </div>
  </div>
</div>
Darshak Shekhda
  • 646
  • 5
  • 7
-1

Using this:

 <div class="row">
     <div class="col-md-6">
         <div class="blue-section">
             1
         </div>
     </div>
     <div class="col-md-6">
         <div class="red-section">
             2
         </div>
     </div>
 </div>

Will achieve that, have you added any padding or margins on the divs? By default there is none on the bootstrap rows/cols. So it must be with the css on .red-section & .blue-section?

I added a background colour to the cols so you can see, http://jsfiddle.net/bnyrL54u/

Hope this helps.

Joshua
  • 588
  • 1
  • 5
  • 19
  • 1
    Just a point of correction: By default, all col classes in Bootstrap have left and right padding of 15px. All rows, by default have -15px of left and right margin and all containers (container and container-fluid) have 15px of left and right margin. This is how the grid works. My answer here might help you understand this better: http://stackoverflow.com/questions/23899715/bootstrap-balancing-bullet-columns – jme11 Sep 23 '14 at 12:07