Bootstrap snippet: profile tab widget

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,tab,widget,social



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="col-md-6"> <div class="wdgt-profile"> <div class="profile"> <img src="http://bootdey.com/img/Content/user_6.jpg" alt=""> <div class="profile-social"> <a href="#"><i class="fa fa-pinterest"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> </div> <ul class="profile-tab"> <li><a href="#"><i class="fa fa-camera"></i>Photo</a></li> <li class="active"><a href="#"><i class="fa fa-user"></i>Profile</a></li> <li><a href="#"><i class="fa fa-music"></i> Music</a></li> <li><a href="#"><i class="fa fa-comments"></i>Comments</a></li> </ul> </div> <div class="profile-info"> <h5>Name or description</h5> <span>Creative Designer</span> </div> </div> </div> <div class="col-md-6"> <div class="wdgt-profile"> <div class="profile"> <img src="http://bootdey.com/img/Content/user_5.jpg" alt=""> <div class="profile-social"> <a href="#"><i class="fa fa-pinterest"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> </div> <ul class="profile-tab"> <li><a href="#"><i class="fa fa-camera"></i>Photo</a></li> <li class="active"><a href="#"><i class="fa fa-user"></i>Profile</a></li> <li><a href="#"><i class="fa fa-music"></i> Music</a></li> <li><a href="#"><i class="fa fa-comments"></i>Comments</a></li> </ul> </div> <div class="profile-info"> <h5>Name or description</h5> <span>Creative Designer</span> </div> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .wdgt-profile { position: relative; } .wdgt-profile .profile img { width: 100%; height: 380px; border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; } .wdgt-profile .profile-social { position: absolute; left: 20px; top: 20px; } .wdgt-profile .profile-social a { border: 2px solid #FFFFFF; border-radius: 50%; color: #FFFFFF; display: inline-block; font-size: 12px; height: 28px; line-height: 24px; margin: 0 1px; text-align: center; width: 28px; } .wdgt-profile .profile-tab { position: absolute; right: 0; top: 0; width: 100px; list-style-type: none; padding: 0; height: 100%; background: rgba(0,0,0,.5); margin: 0; border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; } .wdgt-profile .profile-tab li { text-align: center; max-width: 100%; } .wdgt-profile .profile-tab li a { padding: 20px 0; display: block; text-decoration: none; color: #fff; } .wdgt-profile .profile-tab li a i { display: block; font-size: 30px; margin-bottom: 5px; } .wdgt-profile .profile-info { background: #424F63; position: relative; z-index: 10; padding: 20px; border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; } .wdgt-profile .profile-info h5 { margin: 0; color: #fff; font-size: 15px; } .wdgt-profile .profile-info span { font-size: 11px; color: #fff; }
Dey-Dey

profile tab widget

Dey-Dey
  Oct 12th 2015, 09:16
1.5K Views