I'm having troubles trying to create a grid layout like this
what i assumed was to create a row and have 2 columns divided, and create a row+col inside each of the 2 columns and in each col have a card.
this is my code
<div class="container">
<div class="row">
<div class="col-8">
Modules
<div class="module-container">
<div class="row">
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
Schedule
<div class="row">
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
and this is what came out my layout
I dont understand why the cards in my second row aren't the same length too?
first you need to add outer row and add 2 columns and then inside first column add row then give your columns col-3, col-4 how much you want in a row same goes to second column. I hope down script help you
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- outer grid first column -->
<div class="col-8">
Modules
<div class="module-container">
<!-- first column inner grid -->
<div class="row">
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-4 mt-2">
<div class="card">
<img src="/images/pat.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
</div>
</div>
<!-- outer grid second column -->
<div class="col-4">
Schedule
<!-- second column inner grid -->
<div class="row">
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="/images/star.jpg" class="card-img-top" alt="module 1">
<div class="card-body">
title
</div>
</div>
</div>
</div>
</div>
</div>
</div>