While I am experienced in HTML and CSS, I am new to working with Bootstrap. Here is a code snippet that works well but has a lot of custom CSS. Below you can see my HTML and CSS code.
.container {
padding: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.rectangle {
width: 632px;
height: 269px;
padding: 30px 20px;
border-radius: 4px;
border: solid 1px #e0e0e0;
background-color: #ffffff;
text-align: center;
display: flex;
display: ms-flexbox;
align-items: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.title {
width: 291px;
height: 54px;
font-size: 49px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.1;
letter-spacing: -0.8px;
text-align: center;
color: #333333;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.description {
width: 468px;
height: 23px;
font-size: 18px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.28;
letter-spacing: -0.03px;
color: #333333;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.button {
width: 303px;
height: 48px;
border-radius: 4px;
background-color: #f9c940 !important;
color: #000000;
font-size: 20px;
}<div class="container">
<div class="rectangle">
<div class="title">
<p>Title</p>
</div>
<div class="description">
<p>Description</p>
</div>
<div>
<button class="button">Start</button>
</div>
</div>
</div>I am looking for ways to make the above code more responsive by using Bootstrap. How can I transform the custom CSS into Bootstrap code efficiently? Your assistance would be greatly appreciated.