How to remove space between columns

Question

I have a bootstrap, 3 column web page. Currently there is a small amount of space between each column that I would like to remove. How can I do this without editing the bootstrap.css file? Thank you.

<div class="container">
        <div class="row">
            <div class="col-md-2">
                <div class="customDiv">
                    <div id="collapsible-panels">
                        <p><a href="#">Question One goes here?</a></p>
                        <div><p><a href="page2.html">Page 2</a></p></div>
                        <p><a href="#">Question Two goes here?</a></p>
                        <div><p>Answer to Question Two goes here.</p></div>
                        <p><a href="#">Question Three goes here?</a></p>
                        <div><p>Answer to Question Three goes here.</p></div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="customDiv">Main Content Area</div>
            </div>
            <div class="col-md-2">
                <div class="customDiv">Right Side Bar</div>
            </div>
        </div>
    </div>

You'd need to override Bootstrap's column padding on all the columns you want to do this on. A rule like `div.container > div.row > div { padding-left:0; padding-right:0; }` might work if it's loaded after Bootstrap's CSS. — j08691, Dec 13 '16 at 15:38

Saurav Rastogi · Accepted Answer · 2016-12-13T15:47:33.930

Remove padding-left & padding-right from col-*-* classes in a new css file by giving them an additional class (in my case div-holder), like:

CSS:

.div-holder {
  padding-left: 0;
  padding-right: 0;
}

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-2 div-holder">
      <div class="customDiv">
        <div id="collapsible-panels">
          <p><a href="#">Question One goes here?</a></p>
          <div><p><a href="page2.html">Page 2</a></p></div>
          <p><a href="#">Question Two goes here?</a></p>
          <div><p>Answer to Question Two goes here.</p></div>
          <p><a href="#">Question Three goes here?</a></p>
          <div><p>Answer to Question Three goes here.</p></div>
        </div>
      </div>
    </div>
    <div class="col-md-8 div-holder">
      <div class="customDiv">Main Content Area</div>
    </div>
    <div class="col-md-2 div-holder">
      <div class="customDiv">Right Side Bar</div>
    </div>
  </div>
</div>

How to remove space between columns

1 Answers1