Bootstrap column grid: Margin issues

Question

While splitting my page.aspx in 4 columns, I notice in the first and fourth columns several blank spaces (on the left and right side, respectively), thus narrowing the width of the second and third columns.

Knowing a way to get rid of such default margin issues within the first and fourth columns so as to get proper equally-balanced columns over the whole page.aspx would highly be appreciated.

To better illustrate such issue, I've written the following code:

<link rel=stylesheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div>
  <nav class="navbar">
    <div class="img">
      <img src="...">
    </div>
    <div class="img">
      <img src="...">
    </div>
  </nav>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-3" style="font-size:16px">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
  </div>
</div>

See [container-fluid](https://getbootstrap.com/docs/4.4/layout/overview/#fluid) — StaticBeagle, Jan 09 '20 at 15:58
@Quentin: probably it does not.., but empirically running it illustrates the unexpected and observed margin issues for which i am attempting to get the rationale. Thanks. — dark.vador, Jan 09 '20 at 16:00

score 1 · Accepted Answer · edited Jan 09 '20 at 16:06

1

That's because of the container you're using, the one you want is container-fluid which has no margin no padding, no nothing haha.

container gives each div a specified fixed width, that is the reason behind the blank spaces

You can check the documentation here: documentation

edited Jan 09 '20 at 16:06

Hugo Sohm

2,872
4
23
40

answered Jan 09 '20 at 15:58

h0merr

182
1
9

1

Thanks a lot h0merr, I do appreciate the explanations. Cheers. – dark.vador Jan 09 '20 at 16:06

Bootstrap column grid: Margin issues

1 Answers1