<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.desert{
width: 200px;
}
</style>
</head>
<body>
<div class="card desert" >
<img src="cake.jpg" class="card-img-top">
<div class="card-body">
<div class="card-title">
Bootstrap4
</div>
<div class="card-text">
This is some text within a card body.
</div>
<div class="card-text text-right">
<a href="#" class="card-link ">Detail</a>
</div>
</div>
</div>
</body>
</html>https://getbootstrap.com/docs/4.4/components/card/
margin-bottom : mb-3
mt-2 / ml-1 / mr-3 / pb-1 / pt-2 / pl-3 / pr-3
'디지털 컨버전스 > Java Script' 카테고리의 다른 글
| [Bootstrap4] Layout : Containers (0) | 2020.04.09 |
|---|---|
| [Bootstrap4] Navbar (0) | 2020.04.09 |
| [Bootstrap4] 예제 - Card 속에 Carousel (0) | 2020.04.09 |
| [Bootstrap4] Carousel (0) | 2020.04.09 |
| [Bootstrap4] Alert , Badge (0) | 2020.04.09 |