Presentation cards

This bootstrap snippet called "Presentation cards" 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: cards,profile

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="well well-white mini-profile-widget bootdey.com">
                <div class="col-md-6">
                    <div class="image-container">
                        <img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="avatar img-responsive" alt="avatar">
                    </div>  
                </div>
                <div class="col-md-6"> 
                    <div class="details">
                        <h4>Kevin Mckoy</h4>
                        <hr> 
                        <div>Works at Bootdey</div>
                        <div>Attended University of Technology</div>
                        <div>Lives in Miami, Florida</div>
                        <p class="mg-top-20"> 
                            <a href="javascript:void(0);" class="btn btn-blue">
                                <i class="fa fa-facebook fa-fw"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-info">
                                <i class="fa fa-twitter fa-fw"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-red">
                                <i class="fa fa-google-plus fa-fw"></i>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    
    
        <div class="col-md-6">
            <div class="well well-purple mini-profile-widget bootdey.com">
                <div class="col-md-6">
                    <div class="image-container">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="avatar img-responsive" alt="avatar">
                    </div>  
                </div>
                <div class="col-md-6"> 
                    <div class="details">
                        <h4>Kevin Mckoy</h4>
                        <hr> 
                        <div>Works at Bootdey</div>
                        <div>Attended University of Technology</div>
                        <div>Lives in Miami, Florida</div>
                        <p class="mg-top-20"> 
                            <a href="javascript:void(0);" class="btn btn-blue">
                                <i class="fa fa-facebook fa-fw"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-info">
                                <i class="fa fa-twitter fa-fw"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-red">
                                <i class="fa fa-google-plus fa-fw"></i>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="well well-blue mini-profile-widget">
                <div class="col-md-6">
                    <div class="image-container">
                        <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="avatar img-responsive" alt="avatar">
                    </div>  
                </div>
                <div class="col-md-6"> 
                    <div class="details">
                        <h4>John Doe2</h4>
                        <hr> 
                        <div>Works at Bootdey in big</div>
                        <div>Attended University of Technology</div>
                        <div>Lives in Miami, Florida</div>
                        <div class="mg-top-10">32 Followers | 120 Following | 18 Posts</div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="col-md-6">
            <div class="well well-green mini-profile-widget">
                <div class="col-md-6">
                    <div class="image-container">
                        <img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="avatar img-responsive" alt="avatar">
                    </div>  
                </div>
                <div class="col-md-6"> 
                    <div class="details">
                        <h4>John Doe2</h4>
                        <hr> 
                        <div>Works at Bootdey in big</div>
                        <div>Attended University of Technology</div>
                        <div>Lives in Miami, Florida</div>
                        <div class="mg-top-10">32 Followers | 120 Following | 18 Posts</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="well well-pink mini-profile-widget bootdey.com">
                <div class="col-md-6">
                    <div class="image-container">
                        <img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="avatar img-responsive" alt="avatar">
                    </div>  
                </div>
                <div class="col-md-6"> 
                    <div class="details">
                        <h4>Kevin Mckoy</h4>
                        <hr> 
                        <div>Works at Bootdey</div>
                        <div>Attended University of Technology</div>
                        <div>Lives in Miami, Florida</div>
                        <p class="mg-top-20"> 
                            <a href="javascript:void(0);" class="btn btn-blue">
                                <i class="fa fa-facebook fa-fw"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-info">
                                <i class="fa fa-twitter fa-fw"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-red">
                                <i class="fa fa-google-plus fa-fw"></i>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="well well-red mini-profile-widget bootdey.com">
                <div class="col-md-6">
                    <div class="image-container">
                        <img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="avatar img-responsive" alt="avatar">
                    </div>  
                </div>
                <div class="col-md-6"> 
                    <div class="details">
                        <h4>Kevin Mckoy</h4>
                        <hr> 
                        <div>Works at Bootdey</div>
                        <div>Attended University of Technology</div>
                        <div>Lives in Miami, Florida</div>
                        <p class="mg-top-20"> 
                            <a href="javascript:void(0);" class="btn btn-blue">
                                <i class="fa fa-facebook fa-fw"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-info">
                                <i class="fa fa-twitter fa-fw"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-red">
                                <i class="fa fa-google-plus fa-fw"></i>
                            </a>
                        </p>
                    </div>
                </div>
            </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:20px;
    background:#eee;
}


/* Component: Well */
.well {
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 30px;
}
.well .well-heading .controls {
  position: absolute;
  top: 10px;
  right: 30px;
}
.well .well-body {
  margin-top: 20px;
  position: relative;
  z-index: 3;
}
.well .well-image {
  font-size: 90px;
  line-height: 90px;
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 1;
  color: rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.well.well-solid {
  color: white;
}
.well:hover .well-image {
  font-size: 60px;
}
.well-white {
  background-color: white;
  color: #454545;
}
.well-blue {
  background-color: #2980b9;
  color: white;
}
.well-light-blue {
  background-color: #3498db;
  color: white;
}
.well-green {
  background-color: #27ae60;
  color: white;
}
.well-light-green {
  background-color: #2ecc71;
  color: white;
}
.well-orange {
  background-color: #e82c0c;
  color: white;
}
.well-light-orange {
  background-color: #ff530d;
  color: white;
}
.well-red {
  background-color: #d40d12;
  color: white;
}
.well-light-red {
  background-color: #ff1d23;
  color: white;
}
.well-purple {
  background-color: #8e44ad;
  color: white;
}
.well-light-purple {
  background-color: #9b59b6;
  color: white;
}
.well-pink {
  background-color: #fe31ab;
  color: white;
}
.well-light-pink {
  background-color: #fd32c0;
  color: white;
}

.mini-profile-widget .image-container .avatar {
    width: 180px;
    height: 180px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    background: white;
    padding: 4px;
    border: 1px solid #dddddd;
}

.btn-blue {
  background-color: #3498db;
  border-color: #3498db;
  color: white;
}
.btn-blue:hover,
.btn-blue:visited {
  background-color: #2980b9;
  color: white;
}
.btn-green {
  background-color: #2ecc71;
  border-color: #27ae60;
  color: white;
}
.btn-green:hover,
.btn-green:visited {
  background-color: #27ae60;
  color: white;
}
.btn-orange {
  background-color: #ff530d;
  border-color: #e82c0c;
  color: white;
}
.btn-orange:hover,
.btn-orange:visited {
  background-color: #e82c0c;
  color: white;
}
.btn-red {
  background-color: #ff1d23;
  border-color: #d40d12;
  color: white;
}
.btn-red:hover,
.btn-red:visited {
  background-color: #d40d12;
  color: white;
}
.btn-purple {
  background-color: #9b59b6;
  border-color: #8e44ad;
  color: white;
}
.btn-purple:hover,
.btn-purple:visited {
  background-color: #8e44ad;
  color: white;
}
.btn-pink {
  background-color: #fd32c0;
  border-color: #fe31ab;
  color: white;
}
.btn-pink:hover,
.btn-pink:visited {
  background-color: #fe31ab;
  color: white;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 13th 2016, 19:48

Views: 1.9K

Rated 5/5 based on 21 reviews