"Profile Box"
Bootstrap 3.2.0 Snippet by ishwarkatwe

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container" style="margin-top: 20px; margin-bottom: 20px;"> <div class="row panel"> <div class="col-md-4 bg_blur "> <a href="#" class="follow_btn hidden-xs">Follow</a> </div> <div class="col-md-8 col-xs-12"> <img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="img-thumbnail picture hidden-xs" /> <img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="img-thumbnail visible-xs picture_mob" /> <div class="header"> <h1>Lorem Ipsum</h1> <h4>Web Developer</h4> <span>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</span> </div> </div> </div> <div class="row nav"> <div class="col-md-4"></div> <div class="col-md-8 col-xs-12" style="margin: 0px;padding: 0px;"> <div class="col-md-4 col-xs-4 well"><i class="fa fa-weixin fa-lg"></i> 16</div> <div class="col-md-4 col-xs-4 well"><i class="fa fa-heart-o fa-lg"></i> 14</div> <div class="col-md-4 col-xs-4 well"><i class="fa fa-thumbs-o-up fa-lg"></i> 26</div> </div> </div> </div>
*{ font-family: 'Open Sans', sans-serif; } .well { margin-top:-20px; background-color:#007FBD; border:2px solid #0077B2; text-align:center; cursor:pointer; font-size: 25px; padding: 15px; border-radius: 0px !important; } .well:hover { margin-top:-20px; background-color:#0077B2; border:2px solid #0077B2; text-align:center; cursor:pointer; font-size: 25px; padding: 15px; border-radius: 0px !important; border-bottom : 2px solid rgba(97, 203, 255, 0.65); } body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #fff; background-color: #F1F1F1; } .bg_blur { background-image:url('http://data2.whicdn.com/images/139218968/large.jpg'); height: 300px; background-size: cover; } .follow_btn { text-decoration: none; position: absolute; left: 35%; top: 42.5%; width: 35%; height: 15%; background-color: #007FBE; padding: 10px; padding-top: 6px; color: #fff; text-align: center; font-size: 20px; border: 4px solid #007FBE; } .follow_btn:hover { text-decoration: none; position: absolute; left: 35%; top: 42.5%; width: 35%; height: 15%; background-color: #007FBE; padding: 10px; padding-top: 6px; color: #fff; text-align: center; font-size: 20px; border: 4px solid rgba(255, 255, 255, 0.8); } .header{ color : #808080; margin-left:10%; margin-top:70px; } .picture{ height:150px; width:150px; position:absolute; top: 75px; left:-75px; } .picture_mob{ position: absolute; width: 35%; left: 35%; bottom: 70%; } .btn-style{ color: #fff; background-color: #007FBE; border-color: #adadad; width: 33.3%; } .btn-style:hover { color: #333; background-color: #3D5DE0; border-color: #adadad; width: 33.3%; } @media (max-width: 767px) { .header{ text-align : center; } .nav{ margin-top : 30px; } }

Related: See More


Questions / Comments:

hello

alam () - 4 years ago - Reply 0


Hi my name is Bib I wanted to use your code for a project of mine and when i copied your code I found a bug, the buttons at bottom used the a same class the well component in bootstrap which then interferes with the css you add to the button so I recommend that you change the name of the well class to something else.

bibaswan bhawal () - 4 years ago - Reply 0


most snippets on here are generic. you may change the class names to whatever you please.

Adam Looze () - 4 years ago - Reply 0


Hi Ishwar my name is john i am new in programming i saw this bootsnip site .. and i want to know how to use this .. but i dont know how to start i copy the html fragment and run it .. but i did not get the result like yours can you teach how to use it step by step use use bootsnipp design please for my school project

john () - 4 years ago - Reply 0


Can someone put in one folder and arrange it so i can know it how it goes .... please

john () - 4 years ago - Reply 0


Beautiful

eric muigai () - 4 years ago - Reply 0


profile style twitter please

eljeshuuoficialok () - 4 years ago - Reply 0


Beautiful Snippet!

maxsurguy () - 5 years ago - Reply 0


thanks

Ishwar () - 4 years ago - Reply 0