English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Card (Card)

Bootstrap4A new flexible and scalable content container component card has been introduced to replace the old panel, well, and thumbnail components. It includes header and footer options, various content, context background colors, and powerful display options. In the following sections, you will see how to use the card component.

Simple card

We can use Bootstrap4 The .card and .card-body class to create a simple card, for example:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Simple card</h2>
　　<div class="card">
　　　　<div class="card-body">Simple card</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›

Bootstrap4 cards are similar to Bootstrap 3 such as panels, image thumbnails, well.

Header and footer

.card-header class is used to create the header style of the card, .card-footer class is used to create the bottom style of the card:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Card header and footer</h2>
　　<div class="card">
　　　　<div class="card-header">Header</div>
　　　　<div class="card-body">Content</div>　
　　　　<div class="card-footer">Footer</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›

Multiple color cards

Bootstrap 4 Provided multiple card background color classes: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Multiple color cards</h2>
　　<div class="card">
　　　　<div class="card-body">Basic card</div>
　　</div>
　　<br>
　　<div class="card bg-primary text-white">
　　　　<div class="card-body">Primary card</div>
　　</div>
　　<br>
　　<div class="card bg-success text-white">
　　　　<div class="card-body">Success card</div>
　　</div>
　　<br>
　　<div class="card bg-info text-white">
　　　　<div class="card-body">Info card</div>
　　</div>
　　<br>
　　<div class="card bg-warning text-white">
　　　　<div class="card-body">Warning card</div>
　　</div>
　　<br>
　　<div class="card bg-danger text-white">
　　　　<div class="card-body">Danger card</div>
　　</div>
　　<br>
　　<div class="card bg-secondary text-white">
　　　　<div class="card-body">Secondary card</div>
　　</div>
　　<br>
　　<div class="card bg-dark text-white">
　　　　<div class="card-body">Dark card</div>
　　</div>
　　<br>
　　<div class="card bg-light text-dark">
　　　　<div class="card-body">Light card</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›

Title, text and link

We can use .card on the header element-title class to set the title of the card . .card-text class is used to set the content of the card text. .card-link class is used to set the color of the link.

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Title, text and link</h2>
　　<div class="card">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">Card title</h4>
　　　　　　<p class="card-text">Some example text. Some example text.</p>
　　　　　　<a href="#" class="card-link">Card link</a>
　　　　　　<a href="#" class="card-link">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›

Image card

We can give <img> Add .card-img-top (Image above text) or .card-img-bottom (Image below text. To set image card:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>图片卡片</h2>
　　<p>图片在头部　(card-img-top):</p>
　　<div　class="card"　style="width:400px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/images/mix/"img_avatar.png"　alt="Card　image"　style="width:100%">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Some　example　text　some　example　text.　John　Doe　is　an　architect　and　engineer</p>
　　　　　　<a href="#" class="btn btn-primary">See Profile</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>图片在底部(card-img-bottom):</p>
　　<div　class="card"　style="width:400px">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">Jane　Doe</h4>
　　　　　　<p class="card-text">Some　example　text　some　example　text.　Jane　Doe　is　an　architect　and　engineer</p>
　　　　　　<a href="#" class="btn btn-primary">See Profile</a>
　　　　</div>
　　　　<img　class="card-img-bottom"　src="https://static.oldtoolbag.com/images/mix/"img_avatar.png"　alt="Card　image"　style="width:100%">
　　</div>
</div>
</body>
</html>
Test and See ‹/›

如果图片要设置为背景，可以使用 .card-img-overlay 类:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>文字覆盖图片</h2>
　　<p>如果图片要设置为背景，可以使用　.card-img-overlay　类:</p>
　　<div　class="card　img-fluid"　style="width:500px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/images/mix/"img_avatar.png"　alt="Card　image"　style="width:100%">
　　　　<div class="card-img-overlay">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
　　　　　　<a href="#" class="btn btn-primary">See Profile</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›
Bootstrap4 DropdownsBootstrap4 List Groups