CODEWITHSUNDEEP
node.jstwitter-bootstrapexpress
Thomas Hutton
Thomas Hutton

Reputation: 803

Missing Left Div Every Couple of Rows Bootstrap Grid

I'm working on a Magic: The Gathering card database in express with mongoDB. Right now I'm trying to make it look better but I'm having an issue with the grid. Right now I have my grid set two three cards per row (col-lg-4) but every couple of rows there's no div on the left. It's not an issue with a possibly bad image src, it just decides to skip the div. The picture is at the bottom.

My card.ejs (including my header.ejs and footer.ejs code [the exclamation marks denote the separation of the 3 different files]).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>magicDB</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">magicDB</a>

    </div>
          <ul class="nav navbar-nav navbar-left">
          <li><a href="/cards/new">Add a New Card</a></li>
          <li><a href="/cards/search">Search for a Card</a></li>
          <li><a href="/cards/search/advanced">Advanced Search</a></li>
      </ul>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
          <li><a href="/">Login</a></li>
          <li><a href="/">Sign Up</a></li>
          <li><a href="/">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
   <div class="row">
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<% cards.forEach(function(card) {%>
    <div class="col-lg-4 text-center thumbnail">
        <p><strong><%= card.cardName %></strong></p>
        <p><%= card.cardSet %></p>
        <img src="<%= card.image %>" />
    </div>
<% });%>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>
</div>
<footer>
    <div class="row">
        <div class="col-lg-4">
            <h1 class="text-center">Test</h1>
            <h1 class="text-center">Test</h1>
        </div>
        <div class="col-lg-4">
            <h1 class="text-center">Test</h1>
            <h1 class="text-center">Test</h1>
        </div>
        <div class="col-lg-4">
            <h1 class="text-center">Test</h1>
            <h1 class="text-center">Test</h1>
        </div>
    </div>    
</footer>    
</body>
</html>

My node.js code:

app.get("/cards", function(req, res) {
    Card.find({}, function(err, Cards) {
        if(err) {
            console.log(err);
        } else {
            res.render("card", {cards: Cards});
        }
    });
});

Again, there isn't any div. It's not an issue with a bad img src attribute. It just ignores it.

My picture

Upvotes: 1

Views: 134

Answers (1)

Jason Aller
Jason Aller

Reputation: 3654

As my comment solved the problem I'll write it up as an answer.

In Bootstrap when wrapping cards and media objects and a few other of their features it is possible to encounter issues of uneven content height leading to apparently skipped items. To correct this one can either normalize the height of the items, or introduce a CSS rule to ensure that the card will always be taller than the tallest content.

for example if the images were generally 400px tall, but some were off by one or two you might take into account padding and the text height (which could vary if it goes to two lines) and add the following CSS rule:

.thumbnail {
    height: 500px
}

Upvotes: 1

Related Questions