<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-offset-2 col-md-4"> <div class="box1"> <h3>label 1</h3> </div> </div> </div> </div>

.box1 { /* See "NOTE 3" */ position:relative; z-index:1; width:100%; padding:20px; margin:20px auto; border: 1px solid rgb(200, 200, 200); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px; border-radius: 4px; } .box1 h3 { position:relative; padding:10px 30px; margin:0 -30px 20px; font-size:28px; line-height:32px; font-weight:bold; text-align:center; color:#fff; background:#cc0000; /* css3 extras */ text-shadow:0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.2); /* See "NOTE 1" */ zoom:1; } .box1 h3:before, .box1 h3:after { content:""; position:absolute; /* See "NOTE 2" */ z-index:-1; top:100%; left:0; border-width:0 10px 10px 0; border-style:solid; border-color:transparent maroon; } .box1 h3:after { left:auto; right:0; border-width:0 0 10px 10px; }