Just dipping my toes into web development, so I may be overlooking something simple. I've been experimenting with Bootstrap cards and testing three of them on a page. My goal is to have the cards display in 3 columns when viewed on a larger screen, then switch to 2 columns and finally single column as the screen size decreases. However, while the first two cards adjust properly, the last card doesn't stay aligned in the same row with the others even on a full desktop screen.
In addition, the border around the first card looks normal, but it's missing for the second card. The third card not only lacks a border, but also appears to be a different size.
The code for all three cards is nearly identical, with just minor variations in the text within the card bodies and image sources. I'm solely relying on Bootstrap CSS without any custom styling. Here is the code snippet for your 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>