Is there a way to create a row with two columns, where the first column has a "col-6" with a "container" and the second column has a "col-6" with a "container-fluid"? I attempted to write the code below.
HTML
<div class="main">
<div class="container">
<div class="row">
<div class="col-sm-6 c-1">
<div class="container">
<div class="row">
<div class="teste col-sm-12">aaaaa</div>
</div>
</div>
</div>
<div class="col-sm-6 c-2">
<div class="fluid-container">
<div class="row">
<div class="teste2 col-sm-12">aaa</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.col-sm-6 {
height: 700px;
}
.c-1 {
background: #ccc;
}
.c-2 {
background: #ddd;
}
.teste {
background: cyan;
}
.teste2 {
background: blue;
}
The desired layout is shown in the images linked below:
https://i.sstatic.net/Sd45J.png https://i.sstatic.net/9pUqE.png