Awesome Our Team Section design with Bootstrap CSS

byCodingFlicks -September 08, 2020

0

Our team section is a special section of a website that showcases team members of the company, highlighting their roles and profiles. Our Team section adds credibility and personality to any website. In this blog, we will be creating our team section with HTML, CSS, and a responsive CSS Framework called Bootstrap. Responsive Web Design is necessary for any website. This snippet will be responsive to mobile or other small devices as we have used the Bootstrap framework in the design process. We have included a related video tutorial for your convenience.

Video Tutorial:

Any type of website can benefit from this section. Responsive Our team section is especially popular on Corporate and Business Websites, Startup and Portfolio Sites, Agency and Consultancy Websites, Nonprofit and Charity Websites, Educational Platforms, etc. There are lots of benefits to using a responsive team section on any website. Some of them are Builds Trust, Humanizing the Brand, Enhances User Experience, Increases Engagement, Improving SEO and Accessibility, etc.

In this Snippet (Our Team Section design with Bootstrap CSS), three images will represent a company's employee. We have included random names, designations, and social icons for the pictures. You can also use some text as a short bio of the person, but we just used the name, designation, and icons only for this program's sake.

We used the bootstrap column grid in the HTML part to create three boxes and placed an image, social media icon, names, and designation. I have bootstrap and font-awesome CDN for this program and included those below for your convenience. You can jump-start the project by adding them without searching for them on the internet.

You may also like:

We have used Bootstrap for the project. For that, we don't need much styling. We still have to do some styling to make the snippet like the image above. We have to give the container wrapper a custom padding, style the h2 tag, and bring the "socials" class div element above the image by giving it a style margin-top value. We have also provided a smooth hover effect on the icons. To make the project look okay in a small design, We used responsive design CSS of media queries and changed some values for the project.

Our Team Section design with Bootstrap CSS [ Source Code ]:

To create this project (Our Team Section design with Bootstrap CSS), you need to create one HTML and one CSS file. You have to include Bootstrap and Font Awesome CDN as we have shown in the video tutorial above. Just copy the code below and paste it into the individual files. Run the snippet to your browser see how it works and modify it according to your needs. If the code you collected is not working properly, you can download the source code form the download button below this blog post.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create a Responsive Our Team Section</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="custom-padding">
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="team-area">
						<img alt="" src="img/1.jpg">
						<div class="socials">
							<a href="#"><i class="fa fa-youtube"></i></a> 
                            <a href="#"><i class="fa fa-twitter"></i></a> 
                            <a href="#"><i class="fa fa-pinterest"></i></a> 
                            <a href="#"><i class="fa fa-facebook"></i></a>
						</div>
						<h2>Tom Smith <span>Principal officer</span></h2>
					</div>
				</div>
				<div class="col-md-4">
					<div class="team-area">
						<img alt="" src="img/2.jpg">
						<div class="socials">
							<a href="#"><i class="fa fa-youtube"></i></a> 
                            <a href="#"><i class="fa fa-twitter"></i></a> 
                            <a href="#"><i class="fa fa-pinterest"></i></a> 
                            <a href="#"><i class="fa fa-facebook"></i></a>
						</div>
						<h2>Bob Jones <span>ui / ux designer</span></h2>
					</div>
				</div>
				<div class="col-md-4">
					<div class="team-area">
						<img alt="" src="img/3.jpg">
						<div class="socials">
							<a href="#"><i class="fa fa-youtube"></i></a> 
                            <a href="#"><i class="fa fa-twitter"></i></a> 
                            <a href="#"><i class="fa fa-pinterest"></i></a> 
                            <a href="#"><i class="fa fa-facebook"></i></a>
						</div>
						<h2>Jack Miller <span>Graphics designer</span></h2>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

CSS

  body{
	background: #020145; 
}
img {
	max-width: 100%;
	height: auto;
}
.custom-padding {
	padding: 80px 0;
}
.socials a {
	line-height: 30px;
	text-align: center;
	border-radius: 50%;
	margin: 5px;
	color: #262626;
	display: inline-block;
	border: 1px solid #262626;
	height: 30px;
	width: 30px;
}
.team-area {
	height: 490px;
    background: #fff;
	transition: .5s;
}
.team-area h2 {
	text-align: center;
	font-weight: 700;
	margin-top: 15px;
	color: #262626;
}
.team-area h2 span {
	display: block;
	font-weight: 300;
	margin-top: 10px;
	font-size: 16px;
    color: #262626;
	text-transform: uppercase;
}
.socials {
	margin-top: -27px;
	position: relative;
	z-index: 2;
	border-radius: 40px;
	background: #fff;
	text-align: center;
	padding: 5px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.socials a:hover {
	background: #262626;
	color: #fff;
	transition: .7s;
}
.team-area:hover{
	transform: translateY(-10px);
}
@media only screen and (max-width: 767px) {
	.team-area {
		margin-bottom: 30px;
        height: 430px;
	}
	.team-area img {
		width: 100%;
	}
	.team-area:hover{
		transform: translateY(0px);
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.team-area {
		margin-bottom: 30px;
	}
	.team-area img {
		width: 100%;
	}
	.team-area:hover{
		transform: translateY(0px);
	}
}

To add authenticity and approachability to a website responsive our team section is a must. It also invites visitors to connect with the people behind a brand. So consider adding this section when you design a new website for your brand. We hope you have collected the source code. Thank you for visiting, and please follow this blog on Facebook, Twitter, and Instagram to get the latest updates.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.