<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700">
  <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet">
  
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script>
</head>

<body>
  <section class="mdc-elevation--z15">
  <div class="container">
     <div class="row">
        <div class="col-sm-12 col-md-6 ">
          <div class="mdc-touch-target-wrapper">
           <button class="mdc-button mdc-button--raised">
             <span class="mdc-button__ripple mdc-elevation--z24"></span>
             <i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i>
             <span class="mdc-button__label "> SAVE </span>
           </button>         
          </div>
         </div>
         <div class="col-sm-12 col-md-6 ">
          <div class="mdc-touch-target-wrapper">
           <button class="mdc-fab mdc-fab--extended">
            <div class="mdc-fab__ripple"></div>
            <span class="material-icons mdc-fab__icon">add</span>
            <span class="mdc-fab__label">Create</span>
           </button>        
          </div>
         </div>
         <div class="col-sm-12 col-md-6 ">
          <div class="mdc-touch-target-wrapper">
           <button class="mdc-fab" aria-label="Favorite">
            <div class="mdc-fab__ripple"></div>
            <span class="mdc-fab__icon material-icons">favorite</span>
           </button>
         </div>
        </div>
        <div class="col-sm-12 col-md-6 ">
         <div class="mdc-touch-target-wrapper">
           <button class="mdc-fab mdc-fab mdc-fab--touch">
            <div class="mdc-fab__ripple"></div>
            <span class="material-icons mdc-fab__icon">add</span>
            <div class="mdc-fab__touch"></div>
           </button>        
          </div>
        </div>
      </div>
    </div> 
  </section>   
  <section>
    <div class="mdc-card mdc-elevation--z10 ">  
      <h2>Title</h2>
      <p>Lorem Ipsum dolor ........</p>
      <div class="mdc-card__actions">
  <button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
     aria-pressed="false"
     aria-label="Add to favorites"
     title="Add to favorites">
   <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
   <i class="material-icons mdc-icon-button__icon">favorite_border</i>
  </button>
  <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
  <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="More options">more_vert</button>
</div>    
</div>
  </section>
</body>
  
section {
  background-color: white;
  padding:20px;
  margin:20px;
}

.mdc-button, .mdc-fab {
  margin:40px auto;
}


.mdc-card {
  height: 100%;
  width: 100%;
  margin: 10px auto;
  padding:20px;
  color:#38006b;
}




import {MDCRipple} from '@material/ripple';

const selector = '.mdc-button, .mdc-icon-button, .mdc-card__primary-action';
const ripples = [].map.call(document.querySelectorAll(selector), function(el) {
  return new MDCRipple(el);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.