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

fredyrosales
fredyrosales
10,572 Points
Posted by fredyrosales
fredyrosales
10,572 Points

One of my Cards when lg does not wrap correctly. Also in md size.

Here is My code snippet. <!-- speakers --> <h1 id="speakers"class="display-4 text-xs-center m-y-3 text-muted">Speakers</h1>

    <div class="row">
      <div class="col-md-6 col-lg-4">
        <div class="card">
          <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 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 -->
Graham Tonelli
Graham Tonelli
11,968 Points
Graham Tonelli
Graham Tonelli
11,968 Points

Which card is not wrapping properly? The code here looks okay. Check your container <div>.

fredyrosales
fredyrosales
10,572 Points
fredyrosales
fredyrosales
10,572 Points

Jay Query and JSON. They both drop ;/ When i look at the console it tells me this : Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)

Graham Tonelli
Graham Tonelli
11,968 Points
Graham Tonelli
Graham Tonelli
11,968 Points

In that case include tether: <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

Include it below jquery.min.js and above bootstrap.min.js.

I hope this helps! Cheers

fredyrosales
fredyrosales
10,572 Points
fredyrosales
fredyrosales
10,572 Points

Graham. Your snippet actually fixed the console error but unfortunately my Ecma card keeps collapsing. I started using a different wrapper its the card-deck-wrapper to try to fix it. I ended up aligning them all full screen and mid screen but by adding text to the Ecma card. If i get rid of some of the info/text it will collapse again.

Graham Tonelli
Graham Tonelli
11,968 Points
Graham Tonelli
Graham Tonelli
11,968 Points

Fredy, I find it interesting that your images are not wrapping properly, the bootstrap framework is fairly rigid. I would try using the developer tools again and ensure you don't have any unnecessary margins/paddings and that your images are behaving the way you want.

Margaux Flores
Margaux Flores
11,453 Points

Coming across this problem too. It only appears when I stretch the window too wide (I have a 27" monitor). Hope we get an answer for this.

Sherrie Gossett
Sherrie Gossett
14,924 Points

Apparently the "final" code only works in alpha.2 not alpha.4 (the alpha.number is part of the bootstrap script at the beginning of our code page)

2 Answers

Alex Henricks
Alex Henricks
7,911 Points
Alex Henricks
Alex Henricks
7,911 Points

Mine was acting up too. You need to wrap everything after the <h1> Speakers</h1> in a <div class ="container"></div>. It doesnt seem like Guil went through that step in the video.

Wrapping everything in a container div solved all my issues with cards wrapping unexpectedly.

Ariel Buchwald
Ariel Buchwald
3,048 Points
Ariel Buchwald
Ariel Buchwald
3,048 Points

Had the same problem and adding a container div around this section (as Alex said) fixed it for me although I don't think this is what Guil did. Adding a div container results in a little more padding around this whole section but the final example of the website is completely flush.

I guess it is again because of some revisions to Bootcamp since this video.

sanjay sharma
sanjay sharma
4,286 Points
sanjay sharma
sanjay sharma
4,286 Points

I think <div class="row m-b-3"> is causing all the problem I removed it and everything became perfect.