Bootstrap Column System-CodePudding

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"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert]</a></li>
                          </ul>
                        </div>
                        <div class="col-sm-3 g-pa-0">
                          <ul class="list-unstyled style-list">
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                          </ul>
                        </div>
                        <div class="col-sm-3 g-pa-0">
                          <ul class="list-unstyled style-list">
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></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,

CodePudding user response：

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>