📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › Bootstrap 5 › Bootstrap Grid Advanced

Bootstrap Grid Advanced

4 min read
Use row-cols-*, align-items-center, col align-self-*, and nested rows in Bootstrap grid.

Advanced Grid

<!-- Row columns -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
    <div class="col"><div class="card">...</div></div>
</div>

<!-- Vertical alignment -->
<div class="row align-items-center">
<div class="col align-self-end">

<!-- Nested grid -->
<div class="col-md-8">
    <div class="row">
        <div class="col-6">Left</div>
        <div class="col-6">Right</div>
    </div>
</div>