<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="auto-container"> <div class="row"> <div class="column col-lg-6 col-md-12 col-sm-12"> <div class="sec-title"> <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2> </div> </div> </div> </div>

.auto-container{ position:static; max-width:1200px; padding:0px 15px; margin:0 auto; } .sec-title{ position:relative; margin-bottom:45px; } .sec-title .title{ position: relative; color: #84858a; font-size: 16px; letter-spacing: 1px; font-weight: 600; padding-top: 30px; margin-bottom: 10px; text-transform: capitalize; } .sec-title .title:before{ position: absolute; content: ''; left: 0px; top: 0px; width: 6px; height: 6px; background-color: #f43737; } .sec-title h2{ position: relative; color: #242f6c; font-weight: 700; line-height: 1.2em; text-transform: capitalize; -webkit-mask-image: linear-gradient(-75deg, rgba(244,55,55,0.6) 50%, #f43737 50%, rgba(0,0,0,1) 70%); -webkit-mask-size: 200%; animation: shine 2s infinite; } @-webkit-keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } } .sec-title.centered{ text-align: center; } .sec-title.centered .text{ max-width:580px; margin:0 auto; } .sec-title .title.light::before{ background-color:#ffffff; } .sec-title.light .title, .sec-title.light h2, .sec-title.light .text{ color:#ffffff; } .sec-title.centered .title:before{ left:50%; margin-left:-3px; }