<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>
<section>
    <div class="container ">
      <div class="row">  
        <div id="left-side" class="col-sm-6 jumbotron text-center">
           <h1 class="mt-5 pt-4">Heading </h1>
             <p>Lorem ipsum dolor sit amet,    consectetur adipisicing elit...</p>
             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                <button >Learn More >></button>
        </div>
        <div id="right-side" class="col-sm-6 jumbotron text-center">    
        </div>
</section>
</body>
body{
  font-family: Roboto, sans-serif;
}

html{
  color:black;
}

#left-side{
  height:500px;
  background-color:#FFB74D;
  border-radius:0;
  margin-bottom:0;
}

#right-side{
  height:500px;
  background-image: url(https://images.unsplash.com/photo-1587058571836-8562bb05e548?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1035&q=80);
  background-repeat:no-repeat;
  border-radius:0;
}

button{
  padding:10px 20px;
  background-color:black;
  border:none;
  color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.