Bootstrap Snippet Card 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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--Icons-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="caixa_principal"> 
                <div class="caixa_img">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT7Pw74nuh6p_5URQSygg0BJb7bpy12jnrJb6ceJFI4pn0XTXmW"/>
                </div>
                <div class="caixa_info">
                    <h4>Title</h4>
                </div>
                <div class="caixa_itens">
                    <div class="item c1">
                        <i class="fas fa-info"></i>
                    </div>
                    <div class="item c2">
                        <i class="far fa-edit"></i>
                    </div>
                    <div class="item c3">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="item c4">
                        <i class="far fa-trash-alt"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body{
    padding: 20px;
}
.caixa_principal{width: 100%;display: flex;flex-direction: column;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);transition: all 0.3s cubic-bezier(.25,.8,.25,1);margin-bottom: 20px;}
.caixa_principal:hover{box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.caixa_img{width: 100%;height: 160px;}
.caixa_img img{width: 100%;height: 100%;}
.caixa_itens{ width: 100%;height: 40px;display: flex;flex-direction: row;}
.item{width: 25%;display: flex;align-items: center;justify-content: center;border-top: 1px solid #eee;cursor: pointer;transition: .3s;}
.item:nth-child(-n+3) {border-right: 1px solid #eee;}
.c1{color: #007bff;}
.c1:hover{ background: #007bff;color: #fff;}
.c2{ color: #28a745;}
.c2:hover{background: #28a745;color: #fff; }
.c3{color: #138496;}
.c3:hover{background: #138496; color: #fff;}
.c4{color: #dc3545;}
.c4:hover{background: #dc3545;color: #fff;}
.caixa_info{ width: 100%;border-top: 1px solid #eee;}
.caixa_info h4{text-align: center;margin-top: 5px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Card"
Bootstrap 4.1.1 Snippet by paulohnmatos

Related: See More

Questions / Comments:

"Card" Bootstrap 4.1.1 Snippet by paulohnmatos

Related: See More

Questions / Comments:

"Card"
Bootstrap 4.1.1 Snippet by paulohnmatos