Bootstrap Snippet Responsive Team Profiles with Social Links Free For Bootstrap using HTML CSS Bootstrap

"Responsive Team Profiles with Social Links Free For Bootstrap"
Bootstrap 3.3.0 Snippet by nabeelkondotty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<section class="team">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <div class="col-lg-12">
          <h6 class="description">OUR TEAM</h6>
          <div class="row pt-md">
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">
              <div class="img-box">
                <img src="http://nabeel.co.in/files/bootsnipp/team/1.jpg" class="img-responsive">
                <ul class="text-center">
                  <a href="#"><li><i class="fa fa-facebook"></i></li></a>
                  <a href="#"><li><i class="fa fa-twitter"></i></li></a>
                  <a href="#"><li><i class="fa fa-linkedin"></i></li></a>
                </ul>
              </div>
              <h1>Marrie Doi</h1>
              <h2>Co-founder/ Operations</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">
              <div class="img-box">
                <img src="http://nabeel.co.in/files/bootsnipp/team/2.jpg" class="img-responsive">
                <ul class="text-center">
                  <a href="#"><li><i class="fa fa-facebook"></i></li></a>
                  <a href="#"><li><i class="fa fa-twitter"></i></li></a>
                  <a href="#"><li><i class="fa fa-linkedin"></i></li></a>
                </ul>
              </div>
              <h1>Christopher Di</h1>
              <h2>Co-founder/ Projects</h2>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300);
body{
    font-family: 'Quicksand', sans-serif;
}
.team{
    padding:75px 0;
}
h6.description{
    font-weight: bold;
    letter-spacing: 2px;
    color: #999;
    border-bottom: 1px solid rgba(0, 0, 0,0.1);
    padding-bottom: 5px;
}
.profile{
    margin-top: 25px;
}
.profile h1{
    font-weight: normal;
    font-size: 20px;
    margin:10px 0 0 0;
}
.profile h2{
    font-size: 14px;
    font-weight: lighter;
    margin-top: 5px;
}
.profile .img-box{
    opacity: 1;
    display: block;
    position: relative;
}
.profile .img-box:after{
    content:"";
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Questions / Comments:

Posting GuidelinesFormatting

Image link breaking fixed.

nabeelkondotty () - 4 years ago - Reply 0

One problem is if the profile info or name is longer the second row shuffles over and leaves blank space. the DIV height is not uniform.

Coolshrimp () - 8 years ago - Reply 0

hello, nice job. one questiopn (newbie level i guess)
if i choose to resize the image to be displayed, the hover effect will cover the whole column and thus overlaps the image itself. how do i manage to adapt the css properly? thx a lot

askingleo () - 8 years ago - Reply 0

Good Job!

Opeyemi Daudu () - 8 years ago - Reply 0

Hello - For me Facebook, Instagram pics are not loading. Where can I find the css code for following
fa fa-facebook.

DINESH KUMAR ATAPAKKA BABU () - 8 years ago - Reply 0

That's font-awesome

Nabeel Kondotty () - 8 years ago - Reply 0

op, you're going to have to change placeholders, place.mi have had there data usage limited by siteground.

George Langham () - 8 years ago - Reply 0

I see. Sometimes it looks broken.

Thanks

Nabeel Kondotty () - 8 years ago - Reply 0

Hello
Nice job
but I Have a question

Why if I resize the monitor window in the PC I see a big image (only one)
I test also on IPAD
only one big pic when I suppose that is possible to add 2 team profile for each line

how can I manage it with bootstrap?

subweb () - 9 years ago - Reply 0

Just by adding additional classes or changing the classes can do the same for specific windows.

Like the total columns are 12 for a window.

If you need 2 profiles per small screen, Please add a class .col-sm-6 to all profile items and that will do the resizing.

"Responsive Team Profiles with Social Links Free For Bootstrap" Bootstrap 3.3.0 Snippet by nabeelkondotty

Related: See More

Questions / Comments:

"Responsive Team Profiles with Social Links Free For Bootstrap"
Bootstrap 3.3.0 Snippet by nabeelkondotty