I am facing an issue with my Bootstrap carousel that contains multiple items.
Here is my HTML code:
<div class="carousel w-100 " data-ride="carousel" id="recipeCarousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<img class="d-block col-sm-12 col-md-4 rounded-circle mystyle" src="{% static 'core/src/img/staff_member_01.jpg'%}">
<img class="d-block col-sm-12 col-md-4 rounded-circle mystyle" src="{% static 'core/src/img/staff_member_02.jpg'%}">
<img class="d-block col-sm-12 col-md-4 rounded-circle mystyle" src="{% static 'core/src/img/staff_member_03.jpg'%}">
</div>
[...]
</div>
</div>
This is my CSS style:
.mystyle{
border:1px solid #d3232e;
}
However, my issue arises when I try to add padding between the images, as the border layout breaks. See the screenshot below:
https://i.sstatic.net/zDWD5.jpg
If I attempt to use margins instead of padding, like this:
.mystyle{
margin: 0 0.4em;
padding: 0!important;
border:1px solid #d3232e;
}
It looks like this:
https://i.sstatic.net/3jNai.jpg
I would greatly appreciate any help or suggestions to address this issue. Thank you!
EDIT 1 I have also posted a new question to resolve the broken carousel jQuery issue after fixing the problem mentioned here.