"I'm encountering an issue with my code. I need to add margins between columns in Bootstrap without them wrapping to a new row. Can someone help me prevent this from happening?"
<div class="container attributes-div">
<div class="row attributes">
<div class="col-xl-4 attribute-center info-1">
<img class="attribute-pic" src="house2.png">
<h3>Quality Cleaning</h3>
<h5>We aim to leave your home spotless! Our goal is to ensure cleanliness at its best!</h5>
</div>
<div class="col-xl-4 attribute-center info-2 middle-attribute-margin">
<img class="attribute-pic" src="dollarsign2.png">
<h3>Affordable Rates</h3>
<h5>We offer reasonable rates that won't break the bank!</h5>
</div>
<div class="col-xl-4 attribute-center info-1 info-3">
<img class="attribute-pic" src="maid.png">
<h3>Professional Staff</h3>
<h5>Our professional staff values customer feedback and ensures homes are left just the way you like it. Your satisfaction is our top priority!</h5>
</div>
</div>
</div>
"Here is my CSS:"
.attributes-div{
margin-top: 200px;
max-width: 90%;
}
.attribute-pic{
width: 50px;
}
.attribute-center{
text-align: center;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
.info-1{
background: linear-gradient(70deg,#F0E4F0,#eef2f3,#F0E4F0);
background-repeat: no-repeat;
}
.info-2{
background: linear-gradient(70deg,#dfeff5,#eef2f3,#dfeff5);
background-repeat: no-repeat;