Add small shadow to an element in Bootstrap 4

---

<p style="">Use the .shadow-sm class in Bootstrap 4 to add a small shadow to an element.</p><p>You can try to run the following code to implement the shadow-sm class in Bootstrap</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/Rn4phm" rel="nofollow" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;title&gt;Bootstrap Example&lt;/title&gt; &nbsp; &nbsp; &nbsp; &lt;link rel = &quot;stylesheet&quot; href = &quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css&quot;&gt; &nbsp; &nbsp; &nbsp; &lt;script src = &quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt; &nbsp; &nbsp; &nbsp; &lt;script src = &quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;div class = &quot;container&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h1&gt;Learning&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;shadow-lg p-4 mb-4 bg-light&quot;&gt;Try programming examples&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;shadow-sm p-4 mb-4 bg-white&quot;&gt;Learn from Tutorials&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;shadow-none p-4 mb-4 bg-light&quot;&gt;Play Quiz and check your knowledge&lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>

• Related Questions & Answers
• Add large shadow to an element in Bootstrap 4
• Add a shadow to an element with Bootstrap 4
• Remove shadow of an element in Bootstrap 4
• Add bottom rounded corners to an element in Bootstrap 4
• Add top rounded corners to an element in Bootstrap 4
• Bootstrap <small> element
• Float an element to the right with Bootstrap 4
• Float an element to the left with Bootstrap 4
• Set a grey border to an element in Bootstrap 4
• Add a title to any heading element in the Bootstrap 4 card
• Add right rounded corners to an element in Bootstrap
• Add left rounded corners to an element in Bootstrap
• Set a light grey border to an element in Bootstrap 4
• Set the width of an element to 50% in Bootstrap 4
• Add information with Bootstrap 4 card