How would I make this code responsive/better using bootstrap? - html

Question

Here is the HTML code. I am good with coding in react.js and vue.js, but I am having a hard time getting the sense of making things responsive. I dont have experience with it. But got to start somewhere. Any suggestions would be helpful.
Right now, if you make the screen size smaller. It looks horrible.
Html/bootstrap
<section id="info" class="py-3 ">
<div class="container text-white">
<div class="row justify-content-center">
<h2 class="text-white title">Lorem ipsum dolor sit</h1>
<p class="text-white cyp-para">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="row">
<div class="col-6 align-self-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp"> Lorem ipsum dolor</h1>
</div>
<div class="col-6 justify-content-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp">Lorem ipsum dolor</h1>
</div>
</div>
</div>
</section>
CSS:
#info{
height: 515px;
width: 732px;
background: #151515 0% 0% no-repeat padding-box;
}
.cyp-para{
padding: 0px 200px;
font-size: 14px;
}
.placeholder{
width: 236px;
height: 283px;
background: grey;
}
.title{
font-size: 38px;
}
.exp{
font-size: 33px;
}

Answer 1

Since you are using bootstrap, you can use break-point classes to make your code responsive.
Make small changes like below and your code will look better:
<section id="info" class="py-3 ">
<div class="container text-white">
<div class="row justify-content-center">
<h2 class="text-white title">Lorem ipsum dolor sit</h1>
<p class="text-white cyp-para">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="row">
<div class="col-12 col-md-6 align-self-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp"> Lorem ipsum dolor</h1>
</div>
<div class="col-12 col-md-6 justify-content-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp">Lorem ipsum dolor</h1>
</div>
</div>
</div>
</section>
I have included col-12 and col-md-6 classed in your code. Which means till medium size devices, you have 12 column divs i-e 1 full column width div, and when your screen size becomes medium and above medium you'll have two column's per row