<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 id="sliderbox" class="box1" style="right: 0px; bottom: 0px;"> <div id="box_outer1"> <div id="box1"> <a href="#" id="box_close_button">x</a> <div class="tta_text_06"> <p class="tta_first_04">Thank You .</p> </div> <div id=" "> Lorem epsum lorem epsum....? <a class="btnslideryes" href="">Yes</a> | <a class="btnsliderno">No</a> </div> <div id=" " style="display:none"> <p class=" ">Give VisiHow a +1.</p> <div class="tta_plus1_03"><div class="g-plusone" data-width="100" data-href="></div></div> </div> </div> </div> </div>

.box1 { width: 275px; bottom: -300px; z-index: 9999 !important; } #box_outer1 { border: 5px solid #FFF; border-radius: 150px 150px 0 150px; box-shadow: -3px 3px 4px #BFBFBF; margin-bottom: 0; } #box1 { background-color: #FFF; border: 4px solid #E2DDD1; border-right: none; border-bottom: none; border-radius: 150px 150px 0 150px; font-size: 0.9em; height: 185px; margin-bottom: 0; padding: 40px; text-align: center; } a#box_close_button { float: right; } .tta_text_06 { font-size: 1.4em; margin: 0 0 14px 0; } .tta_first_04 { margin: 0; } .tta_first_04 { font-size: 1.3em; font-weight: bold; }