"Information Card"
Bootstrap 3.1.0 Snippet by mouse0270

Post to Facebook Tweet this

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container">
<div class="row">
<div class="[ col-sm-6 col-md-offset-2 col-md-4 ]">
<div class="[ info-card ]">
<img style="width: 100%" src="https://avatars.githubusercontent.com/u/564874?v=3" />
<div class="[ info-card-details ] animate">
<div class="[ info-card-header ]">
<h1> Robert McIntosh </h1>
<h3> aka Mouse0270 </h3>
</div>
<div class="[ info-card-detail ]">
<!-- Description -->
<p>The idea of creating something out of nothing has always generated a passion in my heart. This is what lead me to website development. I can literally create little worlds that hopefully thousands of people can see and even experience.</p>
<div class="social">
<a href="https://www.facebook.com/rem.mcintosh" class="[ social-icon facebook ] animate"><span class="fa fa-facebook"></span></a>
<a href="https://twitter.com/Mouse0270" class="[ social-icon twitter ] animate"><span class="fa fa-twitter"></span></a>
<a href="https://github.com/mouse0270" class="[ social-icon github ] animate"><span class="fa fa-github-alt"></span></a>
<a href="https://plus.google.com/u/0/115077481218689845626/posts" class="[ social-icon google-plus ] animate"><span class="fa fa-google-plus"></span></a>
<a href="www.linkedin.com/in/remcintosh/" class="[ social-icon linkedin ] animate"><span class="fa fa-linkedin"></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="[ col-sm-6 col-md-4 ]">
<div class="[ info-card ]">
<img style="width: 100%" src="http://api.randomuser.me/portraits/women/45.jpg" />
<div class="[ info-card-details ] animate">
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(//fonts.googleapis.com/css?family=Lato:400,900);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
body {
padding: 60px 0px;
}
.animate {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.info-card {
width: 100%;
border: 1px solid rgb(215, 215, 215);
position: relative;
font-family: 'Lato', sans-serif;
margin-bottom: 20px;
overflow: hidden;
}
.info-card > img {
width: 100px;
margin-bottom: 60px;
}
.info-card .info-card-details,
.info-card .info-card-details .info-card-header {
width: 100%;
height: 100%;
position: absolute;
bottom: -100%;
left: 0;
padding: 0 15px;
background: rgb(255, 255, 255);
text-align: center;
}
.info-card .info-card-details::-webkit-scrollbar {
width: 8px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit
Information Cards
bootstrap 4 card
Card Styles

Questions / Comments:

if you need any category website just click blew link
http://designbootstrap.net/

Hmnazim Nazim () - 7 years ago - Reply 0

yo great, i like the looks of it, but when disappearing the user's infos go briefly to the top then drop down...

jackalicehlv () - 10 years ago - Reply 0

nice work man,thx

Lucy () - 10 years ago - Reply 0

This snippet is great! Thanks a lot!

Jeroen Coupé () - 10 years ago - Reply 0

How can I put 4 profiles in the same line? Cheers!

ollseph () - 10 years ago - Reply 0

You would just have to change the col-sm-6 to col-sm-3 and col-md-3

mouse0270 () - 10 years ago - Reply 0

Hi Great Snippet! Checkout my version :) http://bootsnipp.com/iframe...

Mike25 () - 10 years ago - Reply 0

The link seems to be broken.

mouse0270 () - 10 years ago - Reply 0

Very nice snippet! I have a question though, why is every class prefixed and suffixed with braces ("[ ]")?

maxsurguy () - 10 years ago - Reply 0

oh it is something I started to do to keep track of different class groups. So if I had a some bootstrap classes and my own missed together it would would look like "[ col-sm-offset-4 col-sm-4 ][ parallax-background white-text ][ wow fadeInLeftBig ]". This way I can tell which classes are bootstrap, which control the styling and which controls the elements animation. It has been habit for me for the past month or so. I usually remember to remove them before posting the snippet.

mouse0270 () - 10 years ago - Reply 0

Great habit. I will use it also, if there isn't any privacy concern, lol?

Mustafa Ehsan Alokozay () - 10 years ago - Reply 0

The only thing you have to make sure when doing this is that the ("[ ]") do not touch any of the class names because ("[col-xs-12 ]") is not the same as ("[ col-xs-12 ]")

mouse0270 () - 10 years ago - Reply 0

Well and it's probably not so great if you use [ or ] as an selector.. :P

Alex () - 10 years ago - Reply 0

this would still work, because if you were using ("[ or ]") as a selector in either CSS or javascript it would be (".[.or.]") not ("[ or ]")

mouse0270 () - 10 years ago - Reply 0

Oh Yeah All right :P

Alex () - 10 years ago - Reply 0