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.cssStep 3 - Add the includes below to your Team Pages
xxxxxxxxxx<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
xxxxxxxxxx<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
xxxxxxxxxx<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">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!
Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter
