"card foundation"
Bootstrap 4.0.0 Snippet by evarevirus

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="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<!-- Social Wrapper Start -->
<div class="wrapper center padding-40">
<!-- Social Form Start -->
<div class="white shadow padding-10 margin-bottom">
<form class="form xl relative">
<div class="col-1 col-persist -margin">
<img class="pull-left width-100 round" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245018/profile/profile-80_3.jpg" />
</div>
<div class="col-9 col-persist gutter-h-10 padding-top-5 -margin">
<textarea placeholder="What's new?"></textarea>
</div>
<div class="col-2 col-persist -margin">
<a class="btn l icon round text-gray hover-text-red">
<i class="fa fa-camera"></i>
</a>
<a class="btn l icon round text-gray hover-text-red">
<i class="fa fa-video-camera"></i>
</a>
</div>
</form>
</div>
<!-- Social Form End -->
<!-- Feed Item Start -->
<div class="item white shadow cf">
<!-- Item Header Start -->
<div class="row padding">
<div class="col-1 col-persist -margin">
<img class="pull-left width-100 round" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245018/profile/profile-80_3.jpg" />
</div>
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
/*
Modulr.css
---------------------
@desc: Modular CSS Framework : Example One
@author: Decorator.io
@twitter: https://www.twitter.com/_uloga
@source: http://www.decorator.io/modulr
\--------------------------------------------*/
/*
Extra Theme Edits
*/
body{
background: #eee;
}
.wrapper{
width: 650px;
}
.shadow{
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
}
.form textarea {
border: none;
height: 40px;
min-height: 40px;
resize: none;
line-height: 28px;
transition: height 0.3s ease-in-out;
}
.form textarea:hover{
box-shadow: none;
}
.form textarea:focus{
border: 1px solid #ddd;
height: 150px;
line-height: 21px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: