Add small shadow to an element in Bootstrap 4

BootstrapWeb DevelopmentCSS Framework

<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>
raja
Updated on 12-Jun-2020 19:49:59

Advertisements