Bootstrap 4 - Shadows and Spacing

Description

Shadow utility adds shadow to the elements and spacing utility provides margin or padding values to an element.

Example

You can add shadow to the element by adding .shadow class within the <div> element. We have used .mx-auto class for placing the content in the center.

The following example demonstrates shadow and spacing utilities −

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Shadow</h2>
         <div class = "shadow-none p-3 mb-5 bg-light rounded">
            No shadow : using class 'shadow-none'
         </div>
         <div class = "shadow-sm p-3 mb-5 bg-white rounded">
            Small shadow : using class 'shadow-sm'
         </div>
         <div class = "shadow p-3 mb-5 bg-white rounded">
            Regular shadow : using class 'shadow'
         </div>
         <div class = "shadow-lg p-3 mb-5 bg-white rounded">
            Larger shadow : using class 'shadow-lg'
         </div>
         
         <h2>Spacing</h2>
         <div class = "bg-dark">
            <div class = "mx-auto text-white" style = "width: 200px;">
               Content is in center
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

bootstrap4_utilities.htm