contoh card bootstrap 4

Solutions on MaxInterview for contoh card bootstrap 4 by the best coders in the world

showing results for - "contoh card bootstrap 4"

19 Oct 2020

1<div class="card" style="width: 18rem;">
2  <img src="..." class="card-img-top" alt="...">
3  <div class="card-body">
4    <h5 class="card-title">Card title</h5>
5    <p class="card-text">Some quick example text to build on the card
6      title and make up the bulk of the card's content.</p>
7    <a href="#" class="btn btn-primary">Go somewhere</a>
8  </div>
9</div>

source

Davide

31 Jul 2016

1<div class="card card-inverse">
2  <img class="card-img" src="..." alt="Card image">
3  <div class="card-img-overlay">
4    <h4 class="card-title">Card title</h4>
5    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
6    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
7  </div>
8</div>

source

Francisco

02 Aug 2016

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <title>Contoh Card Bootstrap 4 - Kodingplus</title>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
10  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
11  <style>
12   /*  Helper Styles */
13    body {
14        font-family: Varela Round;
15        background: #f1f1f1;
16    }
17
18    a {
19        text-decoration: none;
20    }
21
22    /* Card Styles */
23
24    .card-sl {
25        border-radius: 8px;
26        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
27    }
28
29    .card-image img {
30        max-height: 100%;
31        max-width: 100%;
32        border-radius: 8px 8px 0px 0;
33    }
34
35    .card-action {
36        position: relative;
37        float: right;
38        margin-top: -25px;
39        margin-right: 20px;
40        z-index: 2;
41        color: #E26D5C;
42        background: #fff;
43        border-radius: 100%;
44        padding: 15px;
45        font-size: 15px;
46        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
47    }
48
49    .card-action:hover {
50        color: #fff;
51        background: #E26D5C;
52        -webkit-animation: pulse 1.5s infinite;
53    }
54
55    .card-heading {
56        font-size: 18px;
57        font-weight: bold;
58        background: #fff;
59        padding: 10px 15px;
60    }
61
62    .card-text {
63        padding: 10px 15px;
64        background: #fff;
65        font-size: 14px;
66        color: #636262;
67    }
68
69    .card-button {
70        display: flex;
71        justify-content: center;
72        padding: 10px 0;
73        width: 100%;
74        background-color: #1F487E;
75        color: #fff;
76        border-radius: 0 0 8px 8px;
77    }
78
79    .card-button:hover {
80        text-decoration: none;
81        background-color: #1D3461;
82        color: #fff;
83
84    }
85
86
87    @-webkit-keyframes pulse {
88        0% {
89            -moz-transform: scale(0.9);
90            -ms-transform: scale(0.9);
91            -webkit-transform: scale(0.9);
92            transform: scale(0.9);
93        }
94
95        70% {
96            -moz-transform: scale(1);
97            -ms-transform: scale(1);
98            -webkit-transform: scale(1);
99            transform: scale(1);
100            box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
101        }
102
103        100% {
104            -moz-transform: scale(0.9);
105            -ms-transform: scale(0.9);
106            -webkit-transform: scale(0.9);
107            transform: scale(0.9);
108            box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
109        }
110    }
111  </style>
112</head>
113<body>
114
115  <div class="container" style="margin-top:50px;">
116        <div class="row">
117            <div class="col-md-3">
118                <div class="card-sl">
119                    <div class="card-image">
120                        <img
121                            src="https://images.pexels.com/photos/1149831/pexels-photo-1149831.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
122                    </div>
123
124                    <a class="card-action" href="#"><i class="fa fa-heart"></i></a>
125                    <div class="card-heading">
126                        Audi Q8
127                    </div>
128                    <div class="card-text">
129                        Audi Q8 is a full-size luxury crossover SUV coupé made by Audi that was launched in 2018.
130                    </div>
131                    <div class="card-text">
132                        $67,400
133                    </div>
134                    <a href="#" class="card-button"> Purchase</a>
135                </div>
136            </div>
137        </div>  
138
139</body>
140</html>
141

source

Valery

15 Jul 2018

1Bootstrap’s cards provide a flexible and extensible content container with multiple variants and sjjdfdsfsdfsdfsdfsdf options.

source

similar questions

card bootstrap cards in bootstrap bootsrap cards cards bootstrap examples bootstrap cards bootstrap card card in bootstrap bootsrap card bootstrap 5 card bootstrap cards with image bootstrap cards bootstap5 card how to make a card using bootstrap bootstrap error card bootstrap 2b cards

queries leading to this page