csstwitter-bootstrapbootstrap-4mdbootstrap

Bootstrap 4 col-md-4 with shadow border


I use this carousel:

https://mdbootstrap.com/snippets/jquery/temp/3549496

enter image description here

As you can see, there is a border around each block.

On the first, the left shadow cannot be seen, on the third slide the right shadow cannot be seen.

When I add a margin-left:-5px to the right <div class="col-md-4 clearfix d-none d-md-block">, I can see the shadow, but that is not a nice and clean code.

Anyone knows how I can modify the col-md-4 to show the shadow also on the left and right blocks?


Solution

  • The issue is that the carousel-inner takes up the width of exactly 3 cards (and the space between), hence the shadow is there but is cut off. Your margin-left: -5px basically adjusts this, hence it works then.

    However, yes, not that good a code. Simpler option, add a very little x-axis padding to carousel-inner, like add the class px-1 to it. The space between your cards will decrease by a pixel or 2, but your shadows will now be visible better.