Unable to achieve a custom grid layout with bootstrap - html

Question

So I have been doing bootstrap for around a month, and so my HTML might be a bit messy. The background of the issue is that my task requires me to create a custom slick carousel to achieve a UI look like the one below:
With my current code this is what i am able to achieve:
Here is my html for what I have achieved so far:
.slider-left {
display: flex;
align-items: center;
p {
font-size: 16px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
}
.slider-middle {
display: flex;
align-items: center;
word-break: break-word;
h1 {
font-weight: bold;
color: blue;
}
h2 {
text-transform: uppercase;
font-style: italic;
font-size: 16px;
font-weight: normal;
}
}
.v-center {
width: 500px;
height: 1000px;
display: flex;
align-items: center;
}
.slider-image {
width: 100%;
}
.slider-right {
padding: 0;
}
<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">
<!-- Left most text -->
<div class="col-lg-1 slider-left text-right">
<div class="container center-align">
<p>Publication</p>
</div>
</div>
<!-- Middle Text -->
<div class="col-md-4 slider-middle center-align">
<div class="container">
<h2>title2</h2>
<h1>title1</h1>
<p>hsdajflaflasdfldsfhlsadfhlsdjfsdljflsjdfsjlfalsjfhjlasfhlsflasfhalfhlasfdsjfdsjlfadsljfhslajfalsjfljsflajflaflajsfdjlafhghurthruhffnfjgjrgbhrturhtadsofadflnvfnilawieoil</p>
<a></a>
</div>
</div>
<!-- Carousel Image -->
<div class="col-md-7 slider-right">
<img class="slider-image" src="<?php bloginfo('template_directory'); ?>/assets/images/image1.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-5 slider-nav">
<p>navigation</p>
</div>
</div>
</div>
I am required to use bootstrap to achieve any kind of ui design because my supervisor says it helps for the responsiveness of the website. What happens here is that the whole container is moved for a similar container over and over. Please let me know what to do and any explanation would be a great help. Apart from that if anyone knows how to insert custom buttons and custom pagination in that navigation bar can let me know, I would really appreciate it, though I haven't looked much into it.
Cheers :)

Answer 1

Do you mean something like this?
<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-md-6 col-sm-12">
<div class="row">
<div class="col-sm-4" style="background:#f2f2f2;">
Publication
</div>
<div class="col-sm-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="row">
<div class="col-sm-12" style="background:red;">navigation</div>
</div>
</div>
<div class="col-md-6 col-sm-12" style="background:#999;">
Image
</div>
</div>
</div>