Bootstrap snippet: profile text

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: profile



<div class="container bootstrap snippets"> <div class="row"> <div class="col-sm-12 col-md-6"> <div class="col-inside-lg decor-info b-profile text-c" data-height-col="" style="height: 440px;"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="image" class="b-profile-avatar"> <div class="b-profile-name"> Alexander Van Gok </div> <div class="b-profile-profession"> Web Designer </div> <div class="b-profile-about"> <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p> </div> <ul class="b-profile-share"> <li><a class="f" href="#">f</a></li> <li><a class="t" href="#">t</a></li> <li><a class="l" href="#">l</a></li> <li><a class="x" href="#">x</a></li> </ul> <span class="btn-follow-this m-b-md">FOLLOW THIS</span> </div> </div> <div class="col-sm-12 col-md-6"> <div class="col-inside-lg decor-success b-profile text-c" data-height-col="" style="height: 440px;"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="image" class="b-profile-avatar"> <div class="b-profile-name"> Alexander Van Gok </div> <div class="b-profile-profession"> Web Designer </div> <div class="b-profile-about"> <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p> </div> <ul class="b-profile-share"> <li><a class="f" href="#">f</a></li> <li><a class="t" href="#">t</a></li> <li><a class="l" href="#">l</a></li> <li><a class="x" href="#">x</a></li> </ul> <span class="btn-follow-this m-b-md">FOLLOW THIS</span> </div> </div> <div class="col-sm-12 col-md-6"> <div class="col-inside-lg decor-warning b-profile text-c" data-height-col="" style="height: 440px;"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="image" class="b-profile-avatar"> <div class="b-profile-name"> Alexander Van Gok </div> <div class="b-profile-profession"> Web Designer </div> <div class="b-profile-about"> <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p> </div> <ul class="b-profile-share"> <li><a class="f" href="#">f</a></li> <li><a class="t" href="#">t</a></li> <li><a class="l" href="#">l</a></li> <li><a class="x" href="#">x</a></li> </ul> <span class="btn-follow-this m-b-md">FOLLOW THIS</span> </div> </div> <div class="col-sm-12 col-md-6"> <div class="col-inside-lg decor-default b-profile text-c" data-height-col="" style="height: 440px;"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="image" class="b-profile-avatar"> <div class="b-profile-name"> Alexander Van Gok </div> <div class="b-profile-profession"> Web Designer </div> <div class="b-profile-about"> <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p> </div> <ul class="b-profile-share"> <li><a class="f" href="#">f</a></li> <li><a class="t" href="#">t</a></li> <li><a class="l" href="#">l</a></li> <li><a class="x" href="#">x</a></li> </ul> <span class="btn-follow-this m-b-md">FOLLOW THIS</span> </div> </div> </div> </div>
body{margin-top:20px;} .col-inside-lg { padding: 20px; } .b-profile { padding-bottom: 20px; color: #ffffff; margin-bottom:20px; } .b-profile-name { font-size: 20px; line-height: 24px; text-align: center; } .b-profile-avatar { display: block; width: 64px; height: 64px; margin: 20px auto; border-radius: 50%; } .b-profile-profession { font-size: 16px; line-height: 18px; text-align: center; margin: 6px 0 12px; } .b-profile-share { display: block; text-align: center; padding: 12px 0 24px; margin: 0; } ol, ul { list-style: none; } .b-profile-share li { display: inline-block; margin: 0 8px; overflow: hidden; } .b-profile-share li a, .b-profile-share li a:hover { font-size: 24px; color: #fff; } .b-profile .btn-follow-this { font-size: 16px; line-height: 34px; border: 1px solid #ffffff; color: #ffffff; padding: 0 40px; text-transform: uppercase; display: inline-block; cursor: pointer; } .m-b-md { margin-bottom: 20px; } .text-c { text-align: center; } .decor-success { background-color: #46be8a; } .decor-warning { background: #f2a654; } .decor-default { background: #7266ba; } .decor-info { background: #39bee8; }
Dey-Dey

profile text

Dey-Dey
  Feb 27th, 12:40
1.3K Views