Panels friends and about

This bootstrap snippet called "Panels friends and about" 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: 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


<div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading panel-heading-gray">
        <div class="pull-right">
          <a href="#" class="btn btn-primary btn-xs">Add <i class="fa fa-plus"></i></a>
        </div>
        <i class="icon-user-1"></i> Friends
      </div>
      <div class="panel-body">
        <ul class="img-grid">
          <li>
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-6.jpg" alt="image">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/woman-3.jpg" alt="image">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-2.jpg" alt="image">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-9.jpg" alt="image">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/woman-9.jpg" alt="image">
            </a>
          </li>
          <li class="clearfix">
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-4.jpg" alt="image">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-1.jpg" alt="image">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/woman-4.jpg" alt="image">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-6.jpg" alt="image">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="image">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  

<div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading panel-heading-gray">
        <a href="#" class="btn btn-white btn-xs pull-right"><i class="fa fa-pencil"></i></a>
        <i class="fa fa-fw fa-info-circle"></i> About
      </div>
      <div class="panel-body">
        <ul class="list-unstyled profile-about margin-none">
          <li class="padding-v-5">
            <div class="row">
              <div class="col-sm-4"><span class="text-muted">Date of Birth</span></div>
              <div class="col-sm-8">12 January 1990</div>
            </div>
          </li>
          <li class="padding-v-5">
            <div class="row">
              <div class="col-sm-4"><span class="text-muted">Job</span></div>
              <div class="col-sm-8">Specialist</div>
            </div>
          </li>
          <li class="padding-v-5">
            <div class="row">
              <div class="col-sm-4"><span class="text-muted">Gender</span></div>
              <div class="col-sm-8">Male</div>
            </div>
          </li>
          <li class="padding-v-5">
            <div class="row">
              <div class="col-sm-4"><span class="text-muted">Lives in</span></div>
              <div class="col-sm-8">Miami, FL, USA</div>
            </div>
          </li>
          <li class="padding-v-5">
            <div class="row">
              <div class="col-sm-4"><span class="text-muted">Credits</span></div>
              <div class="col-sm-8">249</div>
            </div>
          </li>
        </ul>
      </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;}

.panel-body > *:last-child {
    margin-bottom: 0;
}

ul.img-grid {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}


ul.img-grid li {
    float: left;
    margin: 0;
    width: 20%;
}


ul.img-grid li a {
    display: block;
}


ul.img-grid li img {
    width:100px;
    height:100px;
    display: inline-block;
    max-width: 100%;
    line-height: 1.42857143;
    background-color: #fff;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

/*================== info ============*/
.padding-v-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.margin-none {
    margin: 0 !important;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.padding-v-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.text-muted {
    color: #777777;
}



                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: May 5th 2016, 09:59

Views: 213