I have a bootstrap carousel with multiple items.
My html:
<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>
my css:
.mystyle{ border:1px solid #d3232e; }
As you see in the screenshot below, my issue is that I need to give some padding between the images (handled by bootstrap grid system), and that breaks the border layout.
If I use margin and delete padding
.mystyle{ margin: 0 0.4em; padding: 0!important; border:1px solid #d3232e; }
HELP! :-)
Thank you
EDIT 1 I wrote a new question to solve the issue of the broken carousel jQ after fixing the problem posed here.
You should put the images inside col divs, and make them responsive using img-fluid...
<div class="carousel w-100" data-ride="carousel" id="recipeCarousel"> <div class="carousel-inner text-center w-100" role="listbox"> <div class="carousel-item d-flex row active"> <div class="col-sm-12 col-md-4"><img class="rounded-circle img-fluid mystyle" src="//placehold.it/300"></div> <div class="col-sm-12 col-md-4"><img class="rounded-circle img-fluid mystyle" src="//placehold.it/300"></div> <div class="col-sm-12 col-md-4"><img class="rounded-circle img-fluid mystyle" src="//placehold.it/300"></div> </div> </div> </div>
Then there will be no overlap.
https://www.codeply.com/go/b7DE9Q6AOm
Put every image inside a container.
.round-container{ display:inline-block; margin:10px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <div class="round-container"> <img class="rounded-circle" src="https://via.placeholder.com/100x100" width="100"> </div> <div class="round-container"> <img class="rounded-circle" src="https://via.placeholder.com/100x100" width="100"> </div> <div class="round-container"> <img class="rounded-circle" src="https://via.placeholder.com/100x100" width="100"> </div>
