<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="bg-img"> <img class="img-responsive" src="http://multiversemedia.net/climovil/wp-content/uploads/2014/12/2000_1334.jpg"> <div class="caption-left padding margin rose" style="border-radius: 15px; opacity: 0.8"> <h1 class="text-white">text</h1> <h1 class="text-white hidden-xs"><b>WEB DESIGNER</b></h1> </div> <div class="caption-bottomleft leftbar border-red margin"> <h4 class="text-white">text</h4> </div> <div class="caption-topright margin text-right"> <h5 class="text-white">SYRIA <span class="glyphicon glyphicon-map-marker text-red"></span></h5> <p class="text-white">SYRIA - damascus 2017</p> </div> <div class="caption-topleft margin"> <h5 class="text-white"><span class="glyphicon glyphicon-cog"></span></h5> </div> <div class="caption-bottomright margin large text-white"> <span class="glyphicon glyphicon-heart text-red-hover"></span> <span class="glyphicon glyphicon-circle-arrow-down"></span> </div> <div class="caption-topmiddle margin large text-white"> <p>.caption-topmiddle</p> </div> <div class="caption-right margin large text-white"> <p>.caption-right</p> </div> <div class="caption-bottommiddle margin large text-white"> <p>.caption-bottommiddle</p> </div> </div> </div> </div>

/*bg image caption*/ .bg-img{position:relative} .caption-topleft{position:absolute;left:0;top:0} .caption-topright{position:absolute;right:0;top:0} .caption-bottomleft{position:absolute;left:0;bottom:0} .caption-bottomright{position:absolute;right:0;bottom:0} .caption-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} .caption-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} .caption-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} .caption-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .caption-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} /*style the demo*/ img{width:100%;height:auto;} /*bg color*/ .rose{color:#fff!important;background-color:#EC87C0!important} /*text*/ .text-white,.text-white-hover:hover{color:#fff!important;} .text-black,.text-black-hover:hover{color:#000!important} .text-grey,.text-grey-hover:hover{color:#757575!important} .text-red,.text-red-hover:hover{color:#f44336!important} .large{font-size:20px!important} .text-right{text-align:right!important} /*margin and padding*/ .margin{margin:16px!important;} .padding{padding:12px 16px!important} /*border*/ .leftbar{border-left:6px solid #ccc!important; padding-left: 5px} .border-red{border-color:#f44336!important}