Bootstrap column system: Create a Team Section
18-05-2017    794 times
Team SectionTeam SectionTeam SectionTeam SectionTeam SectionTeam SectionTeam SectionTeam SectionTeam SectionTeam SectionTeam SectionTeam SectionTeam S

In Bootstrap total window or any work space divide into 12 equal columns. Bootstrap provide different classes for create columns. Here, 12 always divisible by the No of column. That is we cannot create 5 equal columns in bootstrap because 12 cannot divisible by 5.

Now here we are creating a section which create 4 equal columns and each column contain the details of a member.

Team Section
Team Section

<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<style>
#team1
{
background-color:#eee;
margin:10px 0px 10px 0px;
min-height:600px;
}
.team-header
{
text-align:center;
font-weight:bold;
font-size:25px;
margin:5px 0px 15px 0px;
}
.member-container
{
padding:10px;
border: solid 1px #ccc;
box-shadow: 5px 5px 5px #888888;
background-color:#fff;
}

.about
{
text-align:justify;
padding:10px;
}
.img-member
{
margin:10px 0px 10px 0px;
}
.name-member
{
margin:5px 0px 2px 0px;
text-align:center;
font-weight:bold;
font-size:18px;
}
.designation-member
{
margin:2px 0px 2px 0px;
text-align:center;
font-weight:normal;
font-size:13px;
}

Tutorial at home

</style>
</head>
<body>
<section id="team1">
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-md-12"><h1 class="team-header"> Team Members</h1></div>
</div>
<div class="row">
<div class="col-md-3">
<div class="member-container">
<div class="img-member">
<center> <img class="img-circle" src="tm1.jpg" width="100px" height="100px"></center>
</div>
<div class="name-member">
Amit Sengupta
</div>
<div class="designation-member">
CEO
</div>
<p class="about">Mr. Amit Sengupta started his professional career with US in 2001.He was appointed as Chief Executive Officer in February 2013.He has played a key role in helping our company become a $16.5 billion global company with over 371,000 employees. </p>
</div>
</div>

<div class="col-md-3">
<div class="member-container">
<div class="img-member">
<center><img class="img-circle" src="tm2.jpg" width="100px" height="100px"> </center>
</div>
<div class="name-member">
Akansha Roy
</div>
<div class="designation-member">
Managing Director
</div>
<p class="about">Miss Akansha Roy as Managing Director has overall strategic and operational responsibility for the entire portfolio of the company’s offerings. She drives and oversees the continuous renewal of key processes, systems and policies across the compan in client relationship management, sales effectiveness, delivery excellence and leadership development. </p>
</div>
</div>

<div class="col-md-3">
<div class="member-container">
<div class="img-member">
<center><img class="img-circle" src="tm3.jpg" width="100px" height="100px"> </center>
</div>
<div class="name-member">
Prnab Aggarwal
</div>

Tutorial at home

<div class="designation-member">
Chief Financial Officer
</div>
<p class="about"> Prnab Aggarwal is a Chief Financial Officer of the company. His responsibilities include corporate finance, mergers and acquisitions, corporate planning, risk management and investor relations. He has over 10 years of experience in IT and finacial services industries. </p>
</div>
</div>

<div class="col-md-3">
<div class="member-container">
<div class="img-member">
<center> <img class="img-circle" src="tm4.jpg" width="100px" height="100px"></center>
</div>
<div class="name-member">
Neha Ganguly
</div>
<div class="designation-member">
Senior Project Consultant
</div>
<p class="about">Ms. Ganguly is a member of several policy-level committees relating to the Indian financial system, including committees of the Securities and Exchange Board of India and the Reserve Bank of India. She has also been a member of the Executive Council o NASSCOM. She is a regular speaker at global conferences and seminars by multilateral agencies, market participants, and leading academic institutions.

Tutorial at home
Tutorial at home

</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

Video Tutorials

freenotes
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post