Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Using Bootstrap Components Displaying Content with Cards

Posted by zkb
.a{fill-rule:evenodd;}techdegree seal-36
zkb
Front End Web Development Techdegree Graduate 13,636 Points

Final card element is out of place in the grid

The below code is for the speakers section that this video goes over. The final card is identical to the rest, but doesn't align correctly in the grid. What's going on here?

   <h1 class="display-4 text-center my-5 text-muted">Schedule</h1>
      <div class="row">
        <div class="col-md-6">
          <div class="card mb-3">
            <img src="img/vivianne.png" class="card-img-top" alt="Vivianne">
            <div class="card-body">
              <h5 class="card-title">Vivianne McVue</h5>
              <p class="card-text">Vivianne is a web developer and teacher who is passionate about building scalable, data-driven web apps, especially ones that address old problems with new tech!</p>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="card mb-3">
            <img src="img/nodestradamus.png" class="card-img-top" alt="NodeStradamus">
            <div class="card-body">
              <h5 class="card-title">NodeStradamus</h5>
              <p class="card-text">"NodeStra" is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.</p>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="card mb-3">
            <img src="img/robbie.png" class="card-img-top" alt="Robbie">
            <div class="card-body">
              <h5 class="card-title">Robbie Redux</h5>
              <p class="card-text">Robbie is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing barriers to learning code.</p>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="card mb-3">
            <img src="img/ecma.png" class="card-img-top" alt="Ecma">
            <div class="card-body">
              <h5 class="card-title">Ecma Scriptnstuff</h5>
              <p class="card-text">Ecma found her passion for programming and teaching over 15 years ago. She is excited to introduce you to all of the wonders of JavaScript.</p>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="card mb-3">
            <img src="img/jay.png" class="card-img-top" alt="Jay">
            <div class="card-body">
              <h5 class="card-title">Jay Query</h5>
              <p class="card-text">Jay is a developer, author of CSS: The Missing Manual, JavaScript &amp; jQuery: The Missing Manual, and web development teacher.</p>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="card mb-3">
            <img src="img/json.png" class="card-img-top" alt="Json">
            <div class="card-body">
              <h5 class="card-title">Json Babel</h5>
              <p class="card-text">All of his professional life, Json has worked with computers online; he is a polyglot programmer and likes using the right tools for the job.</p>
            </div>
          </div>
        </div>
      </div>

2 Answers

Ashar Malik
Ashar Malik
7,176 Points

Hey. In this post, someone said use the h-100 class, which sets the maximum height to 100%. I was having the same issue, and this worked out for me. Here's my code:

      <!-- speakers -->
      <h1 class="display-4 text-center my-5" id="speakers">Speakers</h1>
      <div class="row card-group">
        <div class="col-md-6 col-lg-4 mb-4">
          <div class="card h-100">
            <img src="img/vivianne.png" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">Vivianne McVue</h4>
              <p class="card-text">
                Vivianne is a web developer and teacher who is passionate
                about building scalable, data-driven web apps, especially
                ones that address old problems with new tech!
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-lg-4 mb-4">
          <div class="card h-100">
            <img src="img/nodestradamus.png" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">NodeStradamus</h4>
              <p class="card-text">
                "NodeStra" is a software engineer and philosopher trying
                to leave the world better than he found it. He codes for
                non-profits, eCommerce, and large-scale web apps.
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-lg-4 mb-4">
          <div class="card h-100">
            <img src="img/robbie.png" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">Robbie Redux</h4>
              <p class="card-text">
                Robbie is a JavaScript developer working on large-scale
                applications. He's also a teacher who strives to support
                students in removing barriers to learning code.
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-lg-4 mb-4">
          <div class="card h-100">
            <img src="img/ecma.png" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">Ecma Scriptnstuff</h4>
              <p class="card-text">
                Ecma found her passion for programming and teaching over
                15 years ago. She is excited to introduce you to all of
                the wonders of JavaScript.
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-lg-4 mb-4">
          <div class="card h-100">
            <img src="img/jay.png" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">Jay Query</h4>
              <p class="card-text">
                Jay is a developer, author of CSS: The Missing Manual, 
                JavaScript &amp; jQuery: The Missing Manual, and web 
                development teacher.
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-lg-4 mb-4">
          <div class="card h-100">
            <img src="img/json.png" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">Json Babel</h4>
              <p class="card-text">
                All of his professional life, Json has worked with
                computers online; he is a polyglot programmer and
                likes using the right tools for the job.
              </p>
            </div>
          </div>
        </div>
      </div><!-- /speakers -->
Mark Sebeck
MOD
Mark Sebeck
Treehouse Moderator 37,799 Points
Mark Sebeck
Mark Sebeck
Treehouse Moderator 37,799 Points

Hi. I pasted your code in the workspace project for the video and everything looked fine. It even worked when I went to 3 columns adding the col-lg-4 class like he did in the video. I wonder if it's something you did before if you have been coding along from the start. Could you attach the rest of your code or create a snapshot of your workspace to let others troubleshoot it?