Bootstrap Column System - html

Question

Thanks in advance for your help!
I work in bootstrap 4 building websites, I'm trying to build the following design:
I can't get my head round how it will work! At the moment I have the whole box set to container-fluid so there isn't any padding/margins applied but I don't understand how I can structure the columns to get it to work.
Here's my HTML for what I have tried so far:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h3 class="mega-menu-heading">About</h3>
</div>
<div class="col-sm-3 g-pa-0">
<ul class="list-unstyled style-list">
<li class="serviceAbout">[insert] </li>
<li class="serviceAbout">[insert]</li>
</ul>
</div>
<div class="col-sm-3 g-pa-0">
<ul class="list-unstyled style-list">
<li class="serviceAbout">[insert] </li>
<li class="serviceAbout">[insert] </li>
</ul>
</div>
<div class="col-sm-3 g-pa-0">
<ul class="list-unstyled style-list">
<li class="serviceAbout">[insert] </li>
<li class="serviceAbout">[insert] </li>
</ul>
</div>
<div class="col-sm-3 g-pa-0">
<img class="img-responsive g-pa-0 g-ma-0" src="/assets/images/misc/nav-image.jpg">
</div>
<!--/end row-->
</div>
</div>
I understand that the col-12 is taking up all the available space in the container so I cannot have an image full height of the container but I'm not sure what other way I can do it.
Any help would be appreciated, this must be possible I'm probably just missing something!
Thanks,

Answer 1

You could create a first row having 2 columns : col-sm-9 and col-sm-3.
Then create another row in the col-sm-9 to list your services and use the col-sm-3 to display your image.
div {
text-align: center;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
.bgimg {
background-image: url('https://mdn.mozillademos.org/files/7693/catfront.png');
background-size: contain;
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12">Our services</div>
<div class="col-sm-4">Service 1</div>
<div class="col-sm-4">Service 2</div>
<div class="col-sm-4">Service 3</div>
<div class="col-sm-4">Service 4</div>
<div class="col-sm-4">Service 5</div>
<div class="col-sm-4">Service 6</div>
</div>
</div>
<div class="col-sm-3 bgimg">
Image full-height
</div>
</div>
</div>

Answer 2

You can use bootstrap grid systems. Use container, row and col pattern.
To understand it better go to this link.
Try this code structure:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<div class="container text-center">
<div class="row">
<div class="col-9">
<div class="row">Our Services</div>
<div class="row">
<div class="col-4">Service 1</div>
<div class="col-4">Service 2</div>
<div class="col-4">Service 3</div>
</div>
<div class="row">
<div class="col-4">Service 4</div>
<div class="col-4">Service 5</div>
<div class="col-4">Service 6</div>
</div>
</div>
<div class="col-3">
<img src="https://source.unsplash.com/100x100/?documents" class="img" alt="img">
</div>
</div>
</div>