2 Column responsive layout with Bootstrap 4 - css

Question

How do i create a 2 column grid in Bootstrap 4 that is responsive but the column widths are not fixed.
For example: I will have an image in the LEFT column of some width and I want the RIGHT column to flex to the remaining width of the parent DIV.
<div class="tut_wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12">
<div class="tut_leftbox"><img class="img-fluid" src="tutorials/anamorphic_drawing1.jpg"></div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
<div class="tut_rightbox">
<h3>Introduction</h3>
some text
</div>
</div>
</div>
</div>
</div>

Answer 1

To make a div use up the space left, you just need to add the class col to that div. It will automatically assign all the space left to it. Under mobile view (when the left div occupies the whole row), the div will automatically become 100% wide.
div {
border: 1px solid #000000;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-4">
ex: col-4
</div>
<div class="col">
this will take up all the space left
</div>
</div>
</div>
Or if you want to have your left div 100% fit with the image, you could do col-xs-auto to the left div and col to the right div.
div {
border: 1px solid #000000;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-xs-auto">
Fixed width image here
</div>
<div class="col">
Other content
</div>
</div>
</div>
Details of Bootstrap 4 grid system could be found HERE.