Photoshop Question posted in
The official user guide can be found here.

Two Columns (col-md-6) without gap in the middle? – Photoshop

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.

Tags:

5

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 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>
    Login or Signup to reply.
  4. 0

    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

    Login or Signup to reply.
  5. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search