Cover Profile image with button

This bootstrap snippet Cover Profile image with button was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: social,profile,user,cover,social network

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container bootstrap snippets">
<div class="row">
    <div class="col-md-12">
        <div class="bg-picture" style="background-image:url('https://lorempixel.com/700/300/nature/5/')">
          <span class="bg-picture-overlay"></span><!-- overlay -->
          <!-- meta -->
          <div class="box-layout meta bottom">
            <div class="col-md-6 clearfix">
              <span class="img-wrapper pull-left m-r-15"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" style="width:64px" class="br-radius"></span>
              <div class="media-body">
                <h3 class="text-white mb-2 m-t-10 ellipsis">Deyson Bejarano</h3>
                <h5 class="text-white"> @elgrones</h5>
              </div>
            </div>
            <div class="col-md-6">

              <div class="pull-right">
                <div class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle btn btn-primary" href="#" aria-expanded="false"> Following <span class="caret"></span></a>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li><a href="#">Poke</a></li>
                        <li><a href="#">Private message</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Unfollow</a></li>
                    </ul>
                </div>
              </div>
            </div>
          </div>
          <!--/ meta -->
        </div>
    </div>
</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{
margin-top:60px;
background:#e9eaed;
}
.bg-picture {
  position: relative;
  min-height: 300px;
  margin: -20px -25px 0px -25px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
}
.bg-picture>.bg-picture-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0d…0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.4) 100%);
  background-image: -o-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.4) 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(rgba(0,0,0,.4)));
  background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(0,0,0,.4) 100%);
}
.bg-picture>.meta.bottom {
  bottom: 10px;
}
.bg-picture>.meta {
  position: absolute;
  left: 0;
  right: 0;
}
.box-layout {
  display: table!important;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
}

.m-r-15 {
    margin-right: 15px;
}

.media-body, .media-left, .media-right {
    display: table-cell;
    vertical-align: top;
}
.media-body {
    width: 10000px;
}
.media, .media-body {
    overflow: hidden;
    zoom: 1;
}

.m-t-10 {
    margin-top: 10px !important;
}
.text-white {
    color: #ffffff;
}
.h3, h3 {
    font-size: 24px;
}
.br-radius, .tiles, .tile-stats, .portlet {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 18th 2016, 11:10

Views: 2.7K