Why is a column going into the next row when there are only 12 columns?

May 20, 2022

I have a row with 4 columns that are each 3 wide, which adds up to the 12 that are supposed the be in a row, but for some reason the last one is still going onto a new row. Any idea how to fix this?

Here’s my code:

<div class="container text-center">    
  <h3>Welcome to "Ender's Super Cool Recomendations" where I, Ender, give you, the reader, super cool recomendations for MOVIES you should watch!</h3><br>
  <div class="row">
    <div class="col-sm-3">
        <h4>Shows</h4>
          <div class="well">
            <p><a href="heartstopper2.html">Heartstopper</a></p>
            <img src="..." class="img-responsive" alt="Heartstopper poster">
          </div>
    </div>
    <div class="row">
    <div class="col-sm-3">
        <h4>Upbeat (Comedy, Romnace, Action, ect.) Movies</h4>
          <div class="well">
            <p><a href=""></a></p>
            <img src="" alt="">
          </div>
    </div>
    <div class="row">
    <div class="col-sm-3">
        <h4>Horror Movies</h4>
          <div class="well">
            <p><a href="beforeiwake.html">Before I Wake</a></p>
            <img src="https://m.media-amazon.com/images/M/MV5BODk3MWFiMWQtODAwNi00MjBkLTg4YTctMGFhZTg4MDI5NmU4XkEyXkFqcGdeQXVyMTA4NjE0NjEy._V1_.jpg" class="img-responsive" alt="Before I Wake movie Poster">
          </div>
    </div>
  </div>
  <div class="col-sm-3">
        <h4>Sad Movies</h4>
          <div class="well">
            <p><a href="dps.html">Dead Poets Society</a></p>
            <img src="....." class="img-responsive" alt="Dead Poets Society movie poster">
          </div>
    </div>
</div><br>

>Solution :

In your code, you aren’t nesting your rows and columns correctly.

Simplified, you want a pattern like this:

<div class="row">
  <div class="col-sm-3">Column 1 of 4</div>
  <div class="col-sm-3">Column 2 of 4</div>
  <div class="col-sm-3">Column 3 of 4</div>
  <div class="col-sm-3">Column 4 of 4</div>
</div>

Your code simplified looks like this:

<div class="row">
  <div class="col-sm-3">Column 1 of 4</div>
  <div class="row">
    <div class="col-sm-3">Column 2 of 4</div>
    <div class="row">
      <div class="col-sm-3">Column 3 of 4</div>
      <div class="row">
        <div class="col-sm-3">Column 4 of 4</div>
      </div>
    </div>
  </div>
</div>

See how you’re putting a new row inside of a row? You want to only have the one row tag that CONTAINS your columns for that row. Not setting another row within a row.

Sure, you can put a row within a column, but based on your question I don’t think that is the behavior you are desiring.