I've been working with bootstrap and have the following HTML code:
<div class="row">
<div class="col-md-3">
<div class="a">
<p>a</p>
</div>
</div>
<div class="col-md-3">
<div class="b">
<p>b</p>
</div>
</div>
<div class="col-md-3">
<div class="c">
<p>c</p>
</div>
</div>
<div class="col-md-3">
<div class="d">
<p>d</p>
</div>
</div>
</div>
In terms of CSS, I've defined different styles for each class (a, b, c, d) as shown below:
.a{
background-image: url('a.jpg');
width: 300px;
height: 300px;
margin-top: 5%;
border-radius: 10px;
}
My challenge now is to center these div elements (class a, b, c, d) within each col-md-3 column. Any suggestions or solutions would be greatly appreciated.