<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="pulse">dsfsf</div> </div>

.pulse { position: absolute; top: 50%; left:50%; transform:translate(-50%,-50%); width:100px; height:100px; background: #000; } .pulse:before, .pulse:after { content: ''; display: block; position: absolute; border-radius:50%; border: 3px solid #0085b6; left: -20px; right: -20px; top: -20px; bottom: -20px; border-radius: 50%; animation: animate 1.5s linear infinite; opacity: 0; backface-visibility: hidden; } .pulse:after { animation-delay: .5s; } @keyframes animate { 0% { transform: scale(0.5); opacity: 0 ; } 50% { opacity: 1 ; } 100% } { transform: scale(1.2); opacity: 0 ; } } }