The example below is from Calcite Bootstrap . I'd like to add a drop shadow-box to cards like this on my site. Can anyone please paste the line of code that would allow me to place a drop shadow around each or all of these cards? Thanks!
Apply your own class name to your card ( `<div class="myclass">...</div>`)
Then apply `box-shadow` CSS to that class like
box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 0 16px 0 rgba(0,0,0,.05);
You can use a browser inspect mode to adjust the amount of shadow visually. Chrome and "new edge" have a nice tool for this
Similarly, if you see things you like the best tool at your disposal is the browser's HTML / CSS inspector!
Thanks Graham, that got me started. I found that adding your code above worked in the preview, but did not "stick" when viewing the actual page. Must be something with the embedded CSS code over-riding the style settings?
Anyways, I did get it to work by simply adding <div style="box-shadow: 5px 5px 20px gray;">...</div> to the card html.
<div class="col-xs-12 col-sm-6 col-md-4">
<div style="box-shadow: 5px 5px 20px gray;">