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 4 Basics (Retired) Using Bootstrap Components Displaying Content with Cards

Posted by Oscar Camacho
.a{fill-rule:evenodd;}techdegree
Oscar Camacho
Full Stack JavaScript Techdegree Student 5,428 Points

I need help

I have problems when I displayed all the images they collapse with each other and they dispalay in columns. https://w.trhou.se/nc1xkrkvfr

Siddharth Nasare
Siddharth Nasare
15,636 Points
Siddharth Nasare
Siddharth Nasare
15,636 Points 
<!-- navbar -->

    <nav class="navbar navbar-toggleable-xl navbar-inverse bg-primary fixed-top">

      <div class="container">

          <ul class="nav navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#home">Home </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#schedule">Schedule</a>
            </li>
          </ul>
        <a class="navbar-brand ml-auto mr-0 hidden-xs-down" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
      </div>
    </nav>    

    <!-- /navbar -->

Try above code to fix navbar collapsing issue. I am still working on your image collapsing issue. Will update you in a while.

1 Answer

Siddharth Nasare
Siddharth Nasare
15,636 Points
Siddharth Nasare
Siddharth Nasare
15,636 Points 
<!-- speakears -->
      <h1 id="speakers" class="display-4 text-center my-5 text-muted">Speakears</h1>
      <div class="row">
        <div class="col-md-6 col-lg-4 mb-5">

          <div class="card" style="width: 20rem;">
            <img class="card-img-top img-fluid" src="img/angie.png" alt="Card image cap">
            <div class="card-block">
              <h4 class="card-title">Angie McAngular</h4>
              <p class="card-text">Angie 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">

          <div class="card">
          <img class="card-img-top img-fluid" src="img/nodestradamus.png" alt="Card image cap">
          <div class="card-block">
            <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">

          <div class="card">            
          <img class="card-img-top img-fluid" src="img/geo.png" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Geo "Lo" Cation</h4>
            <p class="card-text">Geo is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing all barriers to learning code.</p>    
          </div> 
          </div>  
        </div>

        <div class="col-md-6 col-lg-4">

          <div class="card">
          <img class="card-img-top img-fluid" src="img/ecma.png" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Ecma Scriptnstuff</h4>
            <p class="card-text">Ecma found her passion for computers and programming over 15 years ago. She is excited to introduce people to the wonderful world of JavaScript.</p>            
          </div>             
        </div>
        </div>

        <div class="col-md-6 col-lg-4">

          <div class="card">
          <img class="card-img-top img-fluid" src="img/jay.png" alt="Card image cap">
          <div class="card-block">
            <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">

          <div class="card">
          <img class="card-img-top img-fluid" src="img/json.png" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Json Babel</h4>
            <p class="card-text">All of his proffessional 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>
      <!-- /speakers -->

Your <div> tags were not closed properly and you were closing <div class="row"> element after first image and content. That's why they were stacking on each other instead of sitting beside each other. Now look for your call out button vertical spacing and centering option.

Cheers!!!!