FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
Bootstrap Footer with copyright text and footer menu Bootstrap Image - custom style
Bootstrap column system: Create a Team Section - Bootstrap 3
3177    Arnab De    18/05/2017

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.

<!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;
}

</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>

<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.

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

#### Video Tutorials

Bootstrap Footer with copyright text and footer menu Bootstrap Image - custom style
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.
Enter New Comment
Comment History
No Comment Found Yet.
Pure mathematics is, in its way, the poetry of logical ideas.
Albert Einstein
592
51.37
Today So Far
Total View (Lakh)
26/05/2018     41662
01/01/2018     35880
28/06/2017     33905
25/06/2018     33093
02/08/2017     32257
06/07/2017     26687
01/08/2017     26673
15/05/2017     26298
14/07/2017     21663
21/04/2018     20589