How to Showcase Your Team and Organizational Leadership

Adding a team section on your website is a great way to make the visitors get to know the team behind your company and build trust. Especially if you're providing services to clients or customers, your "About" page and "Team" section will be one of the most frequently visited part of your website. There are a few key reasons why your company needs a team page:

1) It humanizes your brand. 

This is especially important for B2B groups and agencies. Customers want to know there are real people behind the investment they're putting in your company. Giving website visitors a look into the people behind your company that your employees behind your products and services matter just as much as the services themselves. 

For larger companies, a team page with everyone listed simply isn't feasible. However, even major enterprise corporations have leadership pages. Featuring your C-suite gives potential customers access to information they wouldn't normally have.

2) It builds trust between you and your audience of potential customers. 

Giving your audience an "inside look" into your company establishes a connection with potential customers. Getting personal with your clients and customers is one of the best ways to keep people coming back. It shows that your team believes in your company enough to put your names behind it for everyone to see. Allowing someone to connect a name with a role or a product only makes your business that much more memorable (i.e. Tim Cook or Steve Jobs with Apple). 

3) People expect to see Team pages. 

In a world where social media connections merge with business connections, the public expects brands to get a bit personal. 

In this tutorial, we'll show you how to build a team section using Bootstrap. Let's start by adding the external Bootstrap links:

In this tutorial, we're using Google fonts which are listed above. You don't have to include the links if you don't want to use them or if you want to use other fonts.

HTML

We have two main sections: the leader section and the team section. The leadership section includes a photo, brief information about the person (or in our case, a cat) and a "learn more about" button that leads to a page if the visitor wishes to know more about the team leader. The team section includes a photo of each team member, their names, their title and a "more information" button. Depending on the number of team members you have, you can change the size of the columns to fit the page layout better. 

CSS

Since we're using Bootstrap grid classes, we don't need to add any additional CSS to re-size the team list for different screen sizes. We're using such as col-sm-6, col-md-4, col-lg-3 so the number of team members showing up on one row will be 4 on large screen size, 3 on tablet screen size, 2 on small screen sizes and 1 on the smallest screen size. In the CSS code below, we adjusted the font sizes, paddings and margin and image sizes for responsive layouts:

Take a look at the JSFiddle below to see the finished version. You can click on the "Edit in JSFiddle" link, go to the JSFiddle site and change the width of the result to see how the layout changes in different screen sizes.