Bootstrap Snippet Groups Card Design using HTML CSS Bootstrap

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 ---------->
        <!-- Font Awesome 4.7 -->
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css ">
<div class="container-fluid">
    <div class="row">
        <!-- Design Group 'No Member'  -->
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="card-style">
                        <div class="media">
                            <div class="media-left">
                                <img class="media-object img-thumbnail card-img" src="https://goo.gl/cJajax">
                            </div>
                            <div class="media-body">
                                <a href="#"><h5 class="media-heading">Disc. Programação Internet Rica - 2016.2</h5></a>
                                <div class="members pull-left"><small>1.235 Members</small></div><div class="btn btn-sm btn-danger pull-right btn-part">Join Group</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Design Group 'pending request' -->
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="card-style">
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=Roboto');
body {
    font-family: 'Roboto', sans-serif;
    background-color: #dedede;
    margin: 20px;
}
.card-style {
    display: block;
    background-color: #fff;
    height: 100px;
    width: 350px;
    margin: 20px 0px;
    box-shadow: 1px 1px 8px #999;
    cursor: pointer;
}
.card-img {
    height: 100px;
    width: 100px;
}
.media-heading {
    margin-top: 10px;
    color: #444;
}
.media-heading:hover, a:link {
    color: #00C853;
    text-decoration: none;
}
.members {
    margin-top: 20px;
    color: #999;
    float: left;
 }
 .btn-part {
     display: inline-block;
     margin: 10px;
     float: right;
 }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Groups Card Design"
Bootstrap 3.3.0 Snippet by andimaciel

Related: See More

Questions / Comments:

"Groups Card Design" Bootstrap 3.3.0 Snippet by andimaciel

Related: See More

Questions / Comments:

"Groups Card Design"
Bootstrap 3.3.0 Snippet by andimaciel