<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12 "> <span class="text-effect">Bangladesh</span> </div> </div> </div>

.text-effect { display: block; text-align: center; font-size: 75px; font-weight: 700; line-height: 0.8; color: #fb2a2a; margin: 10px 0 30px; text-shadow: 0 -1px 15px rgba(0, 0, 0, 0.9), 0 1px 0 #7f6303, 0 3px 0 #846703, 0 5px 0 #896b03, 0 7px 0 #8e6f03, 0 9px 0 #937203, 0 6px 50px rgba(252, 223, 92, 0.8); -webkit-transform: perspective(2.5em) rotateX(15deg) scaleY(0.8); -moz-transform: perspective(2.5em) rotateX(15deg) scaleY(0.8); transform: perspective(2.5em) rotateX(5deg) scaleY(0.8); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } @media only screen and (max-width: 767px) { .text-effect{ font-size: 60px; } } @media only screen and (max-width: 479px) { .text-effect{ font-size: 48px; line-height: 1.2; } }