Struggling with handling empty space in a Bootstrap grid? Check out the issue I'm facing when the div doesn't fill the entire height.
https://i.sstatic.net/zvS7t.png
This is the current configuration:
<div class="row">
<div class="col-lg-8"> <div>diklat bkcu</div></div>
<div class="col-lg-4"> <div>peserta diklat bkcu</div></div>
<div class="col-lg-8"> <div>grafik perkembangan gerakan</div></div>
<div class="col-lg-4"> <div>tabel perkembangan</div></div>
</div>
To achieve this layout:
https://i.sstatic.net/S1Bd9.pngYou can use the following code structure:
<div class="row">
<div class="col-lg-8">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4">
<div>peserta diklat bkcu</div>
<div>tabel perkembangan</div>
</div>
</div>
The challenge now is to create a desktop layout like the second image provided while maintaining a mobile layout that looks like this:
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+