Bootstrap card border disappeared and grid not working

Question

I just got started with web dev in general, so I might be missing something super simple. I'm trying to use Bootstrap cards and have been testing with three of them. I want the card to fit 3 to a row when on a larger screen and then go to 2-col and then single column as page size is reduced. It sort of does that with the first two cards, but the last card doesn't stay in the same row as the first two even when page on desktop is full screen.

Also, the border of the card for the first card is normal, but isn't there for the second card. The third card not only doesn't have a border, but the size of the card is also different.

My code for all three cards is nearly identical with only minor differences in the card body text and source of images. I'm also not using any custom css, only the bootstrap one.

Here is my code for reference:

<div id="posts">
    <div id="content" class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/01_25_18.html">
                        <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                        <div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/10_28_16.html">
                        <img class="card-img-top" src="images/fulls/04.jpg" alt="...">
                        </div>
                        <div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/10_28_16.html">
                        <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                        </div>
                        <div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

this is what it's showing up as

Answer 1

You have extra </div> tags on the 2nd and 3rd cards. Try this:

<div id="posts">
<div id="content" class="container">
    <div class="row">


        <div class="col-md-6 col-lg-4 col-lx-4 card">
                <a href="pages/01_25_18.html">
                    <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Jan. 25, 2018</h5>
                    </div>
                </a>
        </div>

        <div class="col-md-6 col-lg-4 col-lx-4 card">
                <a href="pages/01_25_18.html">
                    <img class="card-img-top" src="images/fulls/04.jpg" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Oct. 28, 2016</h5>
                    </div>
                </a>
        </div>

        <div class="col-md-6 col-lg-4 col-lx-4 card">
                <a href="pages/01_25_18.html">
                    <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Oct. 28, 2016</h5>
                    </div>
                </a>
        </div>
      </div>
   </div>
</div>