Bootstrap 4: weird gap between columns

Question

In the style I'm trying to make, I have a container under the Jumbotron here. The container is filled with a row, which contains everything here. The row is split into two columns - the box with 'hay', and the navbar underneath. Another column holds the main part with the getting started stuff. As you can see the column doesn't stretch properly to the end of the container.

            <div class="col content-body">
              <div class="row">
                <h1>Getting Started</h1>
                <div class="bd-callout bd-callout-info">
                        <h4>Primary Callout</h4>
                        This is a primary callout. And some interesting stuff might be occuring here.
                        <p> Due to recent events we have taken</p>
                </div>
            </div>
         </div>
    </div>

I started out with a different html code though, and the difference was that the main content with 'getting started' was contained only in a column, and not surrounded by a row div.

            <div class="col content-body">
                <h1>Getting Started</h1>
                <div class="bd-callout bd-callout-info">
                        <h4>Primary Callout</h4>
                        This is a primary callout. And some interesting stuff might be occuring here.
                        <p> Due to recent events we have taken</p>
                </div>
            </div>
    </div>

and the result was

Here the whole content part is shifted by a gap..

I'm new to bootstrap and for the life of me can't figure out what's going on. I have very little custom css, and almost none of it modifies margins or padding (I've tested it all). I've also tried inserting an inbetween column (such that they all add up to 12) - the middle and content column line up well, but the little gap remains and both are stiff shifted by the amount of the gap.

How do I get it to align properly? Thank you.

Here is the fiddle for the entire thing as suggested: https://jsfiddle.net/0v8fL5fz/1/

I'm not sure if I don't know what space you're talking about or if the picture isn't very good. For the purposes of getting help, change the colors to make it a little more explicit what space you're talking about so we can help. — c1moore, May 16 '18 at 21:15
@c1moore Whoops! Thanks, I just edited the images highlighting the areas in question. — Coma, May 16 '18 at 21:18
Much better. My only other suggestion would be to add a link to something like jsfiddle or plunkr: make it easy for people to help you. But for the most part, your question is well formatted. — c1moore, May 16 '18 at 21:36
@c1moore Thank you! Here is the jsfiddle. https://jsfiddle.net/0v8fL5fz/1/ — Coma, May 16 '18 at 22:01
@Coma for your hard work I provided a fairly thorough answer and explanation of a couple of things I (and others) noticed as well as a working example. — c1moore, May 16 '18 at 22:38

navidanindya · Answer 1 · 2018-05-16T23:49:41.813

I changed your code a bit around that container. Put the content-body class in another dive inside the second col. I put col-md-* but you can use a simple col-* too.

<div class="col-md-9">
    <div class="content-body">
        <h1>Getting Started</h1>
        <div class="bd-callout bd-callout-info">
            <h4>Primary Callout</h4>
                This is a primary callout. And some interesting stuff might be occuring here.
            <p> Due to recent events we have taken</p>
        </div>
    </div>
</div>

According to this here, the container element will cancel row elements' paddings and usually a row is placed under a container.

So this will happen and is a normal behavior for row elements. But as you put in the class along with the column, the color you put inside content-body class was overflowing with the column container. As I have put in the class inside the div, it will now appear inside. But the spacing will remain between the two columns.

If you want to eliminate the entire spacing, you can cancel out paddings for the col classes using !important tag by putting this in your CSS and calling the classes along with the col-* classes.

.padding-9 {
     padding-left: 0px !important;
     padding-right: -15px !important;
}

.padding-0 {
     padding-left: -15px !important;
     padding-right: 0px !important;
}

The paddings have to changed by 15px because of the row class already having a padding of 15px. Check this here again if you didn't understand.

Now put these accordingly with the col-* classes.

<div class="col-md-3 padding-0">
    <div class="nav-box text-center">
        hay
    </div>
   <!-- Rest of the content -->
</div>

<div class="col-md-9 padding-9">
      <div class="content-body">
          <h1>Getting Started</h1>
          <div class="bd-callout bd-callout-info">
              <h4>Primary Callout</h4>
              This is a primary callout. And some interesting stuff might be occuring here.
              <p> Due to recent events we have taken</p>
          </div>
      </div>
</div>

Here's a complete fiddle -> link

score 0 · Answer 2 · answered May 16 '18 at 21:26

0

use this instead

 <div class="row">
  <div class="col-sm-4">for your hay</div>
  <div class="col-sm-8">for your getting started</div>
</div>

answered May 16 '18 at 21:26

Nikhil S

3,786
4
18
32

Hey, thanks for the reply. This doesn't solve the issue, just resizes the divs accordingly. – Coma May 16 '18 at 21:35
have you taken the .container class outside? instead of using sm use md or lg that might help – Nikhil S May 16 '18 at 21:39
does not the code divided the columns in **1:2** ratio for your hay and your getting started just go on writing your stuffs inside them and you will see them working – Nikhil S May 16 '18 at 21:53

Emeline Bratches · Answer 3 · 2018-05-17T01:25:11.943

You shouldn't need nested row divs unless you are subdividing the child divs, and since the row class comes with built in negative margins (-15px on both the left and right), it is likely to only make your css alignment more complicated if you don't need it.

Best practice in Bootstrap development is to use a row div, with your column divs under it so that they add up to 12. You already have a col-3 defined (the 'hey' div), so you just need to add a column size to your bigger div ('getting started') in order for it to spread out and take up the entire row.

<div class="container">
    <div class="row mx-0">
        <div class="col-3 px-0">
            <div class=" nav-box text-center">
                hay
            </div>
            <div>
                    <ul class="nav nav-vert flex-column">
                                <li class="nav-item nav-title">
                                    <div class="nav-link">CATEGORY</div>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Menu Item</a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">Get Started</a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">Pricing</a>
                                </li>
                        </ul>
            </div> <!-- ul wrapper div -->
        </div> <!-- col-3 -->
        <div class="col-9 content-body">
                <h1>Getting Started</h1>
                <div class="bd-callout bd-callout-info">
                        <h4>Primary Callout</h4>
                        This is a primary callout. And some interesting stuff might be occuring here.
                        <p> Due to recent events we have taken</p>
                </div>
          </div> <!-- col-9 -->
    </div> <!-- row -->
</div> <!-- container -->

Hey, thanks for the reply. I forgot that I removed the -9 from that div while experimenting. However, the issue still isn't solved. I left it it just col because it expands to the remaining size normally and I didn't see the difference. — Coma, May 16 '18 at 21:36
The row extending wider than the jumbotron in a container above it is as intended by Bootstrap (due to the negative left and right margins in the row class). To counter this you can add the `mx-0` class to the row div and `px-0` class to the `col-3` div (edited in my answer above). You can also try the `no-gutters` class on the row, but you will need to add padding back in as desired using the Boostrap 4 utility classes: https://getbootstrap.com/docs/4.1/utilities/spacing/ — Emeline Bratches, May 17 '18 at 01:24

score 0 · Accepted Answer · answered May 16 '18 at 22:28

Here is a link to something that's working (the working code follows below). There were several problems with the structure and design. First, you should only ever have one .container per page (generally). From the docs:

While containers can be nested, most layouts do not require a nested container.

Second, you should be more conscious with your use of .rows and .cols. The weird spacing was (mostly) caused by the misalignment of rows and cols.

Finally, the styling you were applying for backgrounds should apply to the .cols themselves and not the components that appear in them. That is because .cols have a buffer (padding) around them. Elements within them cannot touch the edges of the .col (without writing extra rules and going against your style library).

Now, for the working code:

@font-face {
  font-family: 'mainFont';
  src: url('roundedMain.woff2') format('woff2');
}

.nav-box {
  padding: 50px;
}

.sidebar {
  background-image: repeating-linear-gradient(135deg, #F6F7F8, #F6F7F8 5px, #F4F6F6 5px, #F4F6F6 10px);
  border: 1px solid #F6F7F8;
}

.content-body {
  padding-top: 20px;
  background: #F8F9FA;
}

.nav-vert li {
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  background: #F8F9FA;
  padding-left: 50px;
  color: black;
}

.nav-title {
  background: white !important;
  font-weight: bold !important;
  color: #228AE6 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nav-vert a {
  color: #4B5259;
}

.nav-vert a:hover {
  color: #72C3FC;
}

.nav-title {
  font-weight: bold;
  color: #228AE6;
  padding: 8px;
  background: white;
}

.jumbotron {
  margin-bottom: 0px !important;
  background: #228AE6 !important;
  border-radius: 0 !important;
  color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 250px;
}

body {
  font-family: 'mainFont', Arial, sans-serif;
  background: #F1F3F5;
}

.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgb(255, 255, 255);
  border-left-width: 5rem;
  background: #E8F7FF;
  border-radius: .25rem
}

.bd-callout h4 {
  margin-top: 0;
  margin-bottom: .25rem;
  font-weight: 600px;
  line-height: 30px;
  color: #495057;
  font-size: 20px;
}

.bd-callout p:last-child {
  margin-bottom: 0
}

.bd-callout code {
  border-radius: .25rem
}

.bd-callout+.bd-callout {
  margin-top: -.25rem
}

.bd-callout-info {
  border-left-color: #72C3FC;
}

.bd-callout-info h4 {
  color: #5bc0de
}

.bd-callout-warning {
  border-left-color: #f0ad4e
}

.bd-callout-warning h4 {
  color: #f0ad4e
}

.bd-callout-danger {
  border-left-color: #d9534f
}

.bd-callout-danger h4 {
  color: #d9534f
}

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>

  <body>
    <div class="container">
      <nav class="navbar sticky-top navbar-light bg-light row">
        <ul class="nav d-flex flex-column flex-sm-row col">

          <li class="nav-item">
            <a class="navbar-brand" href="#">Logo</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </nav>

      <div class="jumbotron row">
        <div class="col">
          <h1 class="display-4">Mantle</h1>
          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        </div>
      </div>

      <div class="row">
        <div class="col-3 sidebar">
          <div class=" nav-box text-center">
            hay
          </div>
          <ul class="nav nav-vert flex-column">
            <li class="nav-item nav-title">
              <div class="nav-link">CATEGORY</div>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="#">Menu Item</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Get Started</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
          </ul>
        </div>
        <div class="col-9 content-body">
          <h1>Getting Started</h1>
          <div class="bd-callout bd-callout-info">
            <h4>Primary Callout</h4>
            This is a primary callout. And some interesting stuff might be occuring here.
            <p> Due to recent events we have taken</p>
          </div>
        </div>

      </div>
    </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>

</html>

Also, as @ZimSystem said, only .cols should be the direct ancestor of .rows. From the docs:

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

Bootstrap 4: weird gap between columns

4 Answers4