Challenges with Implementing Bootstrap 3 Multi-column Design in Bootstrap 4 is a query that delves into the differences and issues faced when transitioning from Bootstrap 3 to Bootstrap 4. While most solutions work, there are still some discrepancies that need addressing.
To illustrate this problem, I have created a demonstration on jsfiddle here using the following HTML code:
<div class="col-12 container" style="height: 350px;">
<ul class="list-unstyled row">
<li class="list-group-item col-4">Test</li>
<li class="list-group-item col-4">Test</li>
<li class="list-group-item col-4">Test</li>
...
<li class="list-group-item col-4">Test</li>
</ul>
</div>
The issue can be observed with the round borders not aligning correctly at the beginning and end of the list:
https://i.sstatic.net/SW6nb.jpg
Attempts to address this include:
- Adding a border class to force rectangular borders (no impact observed)
- Using
list-group-flushto eliminate curved borders entirely (resulted in missing top bar for the first item and bottom bar for the last item) - Employing
list-group-flushalongsidefirstandlastclasses to manually add missing borders (inconclusive; fiddle link here)
As a Bootstrap beginner with limited CSS knowledge, I am seeking insights on potential oversights or solutions to this challenge. Any guidance would be greatly appreciated.
(Note: Observations were made on FF58 Windows 10, but unsure if browser compatibility plays a role)