Bootstrap snippet. bs4 simple team list

This snippet was created to help web designers, front-end and back-end developer save time. Use it for free in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: team

HTML code

This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.7.95/css/materialdesignicons.min.css">
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <p class="text-muted text-center mb-4 f-17">Praesent venenatis metus at tortor pulvinar varius ipsum dolor amet consectetuer adipiscing Aenean commodo ligula.</p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="team-box text-center bg-white mt-4">
                <div class="team-img">
                    <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-fluid d-block rounded">
                    <div class="team-name">
                        <h5 class="text-white f-18 font-weight-light mb-0">Darryl Abell</h5>
                    </div>
                </div>
                <div class="team-content text-center p-3">
                    <div class="">
                        <p class="f-17 mb-0"><a href="#" class="text-dark">Graphic Designer</a></p>
                        <p class="text-muted f-14 mb-0">Phasellus ullamcorper ipsum nunc nunc nonummy metus.</p>
                        <div class="team-social-icon p-2">
                            <ul class="blog-details-icons list-inline mb-0">
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-facebook"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-twitter"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-whatsapp"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-instagram"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="team-box text-center bg-white mt-4">
                <div class="team-img">
                    <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-fluid d-block rounded">
                    <div class="team-name">
                        <h5 class="text-white f-18 font-weight-light mb-0">Roger Utz</h5>
                    </div>
                </div>
                <div class="team-content text-center p-3">
                    <div class="">
                        <p class="f-17 mb-0"><a href="#" class="text-dark">Web Designer</a></p>
                        <p class="text-muted f-14 mb-0">Etiam ultricies nisi augue Curabitur ullamcorper ultricies.</p>
                        <div class="team-social-icon p-2">
                            <ul class="blog-details-icons list-inline mb-0">
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-facebook"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-twitter"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-whatsapp"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-instagram"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="team-box text-center bg-white mt-4">
                <div class="team-img">
                    <img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-fluid d-block rounded">
                    <div class="team-name">
                        <h5 class="text-white f-18 font-weight-light mb-0">Sylvia Mace</h5>
                    </div>
                </div>
                <div class="team-content text-center p-3">
                    <div class="">
                        <p class="f-17 mb-0"><a href="#" class="text-dark">UI/UX Designer</a></p>
                        <p class="text-muted f-14 mb-0">Nunc nec neque a leo dolor tempus non hendrerit nisi.</p>
                        <div class="team-social-icon p-2">
                            <ul class="blog-details-icons list-inline mb-0">
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-facebook"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-twitter"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-whatsapp"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-instagram"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="team-box text-center bg-white mt-4">
                <div class="team-img">
                    <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-fluid d-block rounded">
                    <div class="team-name">
                        <h5 class="text-white f-18 font-weight-light mb-0">Juan Bluford</h5>
                    </div>
                </div>
                <div class="team-content text-center p-3">
                    <div class="">
                        <p class="f-17 mb-0"><a href="#" class="text-dark">Web Designer</a></p>
                        <p class="text-muted f-14 mb-0">Nunc nec neque a leo dolor tempus non hendrerit nisi.</p>
                        <div class="team-social-icon p-2">
                            <ul class="blog-details-icons list-inline mb-0">
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-facebook"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-twitter"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-whatsapp"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-instagram"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="team-box text-center bg-white mt-4">
                <div class="team-img">
                    <img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-fluid d-block rounded">
                    <div class="team-name">
                        <h5 class="text-white f-18 font-weight-light mb-0">Robin Douglas</h5>
                    </div>
                </div>
                <div class="team-content text-center p-3">
                    <div class="">
                        <p class="f-17 mb-0"><a href="#" class="text-dark">Web Developer</a></p>
                        <p class="text-muted f-14 mb-0">Maecenas tellus eget condimentum sem quam semper.</p>
                        <div class="team-social-icon p-2">
                            <ul class="blog-details-icons list-inline mb-0">
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-facebook"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-twitter"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-whatsapp"></i></a></li>
                                <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-instagram"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS code

This is the css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
    background:#eee;
    margin-top:20px;
}
/********************
        TEAM
*********************/
.team-bg {
  padding: 180px 0px 80px 0px;
  background-image: url("../images/team-bg.jpg");
  background-size: cover;
  position: relative;
  background-position: center center;
}

.team-box {
  position: relative;
  overflow: hidden;
}

.team-name {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 10px;
}

.team-img {
  position: relative;
  overflow: hidden;
  display: block;
}



.blog-details-icons li {
  margin: 2px !important;
}

.blog-details-icons li a {
  height: 32px;
  width: 32px;
  color: #777777;
  text-align: center;
  font-size: 15px;
  display: inline-block;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid #777777;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.blog-details-icons li a:hover {
  background-color: #ff4f6c;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-color: #ff4f6c;
}

.blog-datails-item li a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.blog-datails-item li a:hover {
  color: #ff4f6c !important;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin-left: 6px;
}

Similar snippets

Bootstrap team members with left social icons example

team members with left social icons

Bootstrap business team example

business team

Bootstrap team members with skill progress example

team members with skill progress

Bootstrap Project Team example

Project Team

Bootstrap bs4 simple timeline example

bs4 simple timeline

Bootstrap bs4 header like startbootstrap example

bs4 header like startbootstrap

Bootstrap bs4 how it works page example

bs4 how it works page

Bootstrap Boostrap gmail style Sign in to continue example

Boostrap gmail style Sign in to continue

Free bootstrap example. bs4 simple team list

About this bootstrap snippet

This bootstrap snippet, bs4 simple team list, was published on Nov 1st 2019, 09:10 by Dey Dey and it is free.

We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.

We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.

This snippet currectly have 2.5K views, Using this bootstrap snippet you have the following benefits:

Bootstrap 4.3.1

This snippet is based on bootstrap 4.3.1 and the grid system of this framework

Responsive

Based on bootstrap framework makes all the layouts perfectly responsive for all devices

Crossbrowser compatibility

Tested on all major browsers, it works smoothly on all of them

Jquery plugins

Great built-in plugins with jquery framework, you can easy to change all declarations

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This snippet can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working