I'm trying to create a layout like following using bootstrap 4.

[![enter image description here](https://i.stack.imgur.com/r1IuP.png)](https://i.stack.imgur.com/r1IuP.png)

[![enter image description here](https://i.stack.imgur.com/VHeMK.png)](https://i.stack.imgur.com/VHeMK.png)

Following is my JSFiddle and I think the approach I have taken is incorrect and there's a better way of doing this. And also there are responsive issues.

[JSFiddle](https://jsfiddle.net/ef7p3wLm/)

```css
html,
body {
  height: 100%;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}
```

```html
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid h-100 ">
  <div class="row justify-content-center h-100">
    <div class="col-4 hidden-md-down yellow" id="yellow">
      Form Goes Here
    </div>
    <div class="col-10 col-sm-10 col-md-8 col-lg-8 col-xl-8 red">
      Background image
    </div>
  </div>
</div>
```