Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Creating a Team Page with Bootstrap

Showcasing your team on your website adds a necessary human element to your brand. In this article we will show you the basics of creating a team section of your website using the popular Bootstrap framework.

Showcasing your team on your website adds a necessary human element to your brand. In this article we will show you the basics of creating a team section of your website using the Bootstrap framework, the most popular HTML/CSS/JS framework for developing responsive websites.

Below is the HTML, CSS, and JavaScript required.

Create your Team Overview Page

The team overview page will display all of your team members as shown above. When a team member is clicked it will direct the viewer to a detail page we will create in the next section.

Step 1 - team-overview.html

Add the HTML below to your web page

<header class="header--type2" data-background="http://www.webcorpco.com/core/fileparse.php/37/urlt/assets/images/sectional-images/team.jpg" data-height="35%" style="background-image: url(http://www.webcorpco.com/core/fileparse.php/37/urlt/assets/images/sectional-images/team.jpg); min-height: 301.35px; -webkit-user-select: auto;">
  <div class="inner" style="-webkit-user-select: auto;">
    <div class="container" style="-webkit-user-select: auto;">
      <div class="row" style="-webkit-user-select: auto;">
        <div class="col-md-10" style="-webkit-user-select: auto;">
          <section class="ct-page_title" style="-webkit-user-select: auto;">
            <div class="h1" style="-webkit-user-select: auto;">Team</div>
            <div class="ct-page_title-content" style="-webkit-user-select: auto;"></div>
          </section>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container">
  <div id="theBioGrid">
    <ul class="row biogrid" id="biogrid">
      <li class="col-xs-3">
        <div class="imgHolder">
          <a href="/"><img alt="jia" class="img-responsive" src="http://www.webcorpco.com/core/fileparse.php/71/urlt/team-15.jpg"></a>
          <div class="description-box animateBottomName">
            Jia Li Chung <br>
            Product Manager
          </div>
        </div>
      </li>
      <li class="col-xs-3">
        <div class="imgHolder">
          <a href="/">
          <img alt="darla" class="img-responsive" src="http://www.webcorpco.com/core/fileparse.php/119/urlt/team-12.jpg"></a>
          <div class="description-box animateBottomName">
            Darla Spriggs <br>
            CFO
          </div>
        </div>
      </li>
      <li class="col-xs-3">
        <div class="imgHolder">
          <a href="/"><img alt="emily" class="img-responsive" src="http://www.webcorpco.com/core/fileparse.php/119/urlt/team-13.jpg"></a>
          <div class="description-box animateBottomName">
            Emily Melton <br>
            Director
          </div>
        </div>
      </li>
      <li class="col-xs-3">
        <div class="imgHolder">
          <a href="/"><img alt="matthew" class="img-responsive" src="http://www.webcorpco.com/core/fileparse.php/119/urlt/team-14.jpg"></a>
          <div class="description-box animateBottomName">
            Matthew Keil <br>
            CMO
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Step 2 - team.css

Download the CSS below and include it in your overview and detail web pages

team.css

Step 3 - Add the includes below to your Team Pages

<link rel="stylesheet" href="team.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Create the Team Detail Page

After a viewer clicks on a team member from the Team Overview page, they will be directed to a detail page with the full team member's details.

Step 1 - team-detail.html

Add the HTML below to your web page

<header class="header--type2" data-background="http://www.webcorpco.com/core/fileparse.php/37/urlt/assets/images/sectional-images/team.jpg" data-height="35%" style="background-image: url(http://www.webcorpco.com/core/fileparse.php/37/urlt/assets/images/sectional-images/team.jpg); min-height: 301.35px; -webkit-user-select: auto;">
  <div class="inner" style="-webkit-user-select: auto;">
    <div class="container" style="-webkit-user-select: auto;">
      <div class="row" style="-webkit-user-select: auto;">
        <div class="col-md-10" style="-webkit-user-select: auto;">
          <section class="ct-page_title" style="-webkit-user-select: auto;">
            <div class="h1" style="-webkit-user-select: auto;">Team</div>
            <div class="ct-page_title-content" style="-webkit-user-select: auto;"></div>
          </section>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-md-12 blue-box bio-detail">
      <div class="biogrid container">
        <div class="row">
          <div class="col-lg-4 col-md-5 col-sm-6 col-xs-5 bioimage">
            <img alt="darla" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/71/urlt/team-12.jpg">
          </div>
          <div class="col-lg-8 col-md-7 col-sm-6 col-xs-7 biodescription">
            <div class="bio-info">
              <a href="/about-us/team/"><img alt="Close" class="close-backex" src="http://www.webcorpco.com/core/fileparse.php/21/urlt/images/backex.png"></a>
              <h2>Darla Spriggs</h2>
              <p class="bio-subtitle"><strong>Dallas <br> CFO</strong></p>
              <p class="bio-quote">Darla is a hardworking executive, is first to work and last to leave and has been with webcorpco since the beginnning and is considered a founding employee known for inventing the Newton at Apple Computer before joining webcorpco.</p>
            </div>
          </div>
        </div>
      </div>
   </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="col-max-960">
      <h3>Experience</h3>
      <p>Darla was born in Omaha, Nebraska and grew up in the real estate industry before graduating from the University of Omaha and joining Apple Computer in 1996 where she designed the Newton. After the Newton, she joined WebCorpCo and changed her name.</p>
    </div>
  </div>
</div>

Step 2 - Add the includes below to your Team Detail page

<link href="team.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

Note: If you followed the steps above correctly your overview and detail pages should appear as they do below.

In this article Solodev showed you how to add a team section to your website and provided the HTML, CSS, and JavaScript to get up and running. Now it's time to add the actual members of your team and make the team section of your website your own!

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev