7.18.1. A simple card ¶
We can use Bootstrap5’s .card and .card-body class to create a simple card that can contain header, content, bottom, and various color settings, as shown in the following example:
Bootstrap 4 provides a variety of card background color categories: We can use it on the header element We can give If you want to set the picture as the background, you can use the
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 
Example ¶
<div class="card">
<div class="card-body">Simple cardsdiv>
div>
7.18.2. Head and bottom ¶
.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: 
Example ¶
<div class="card">
<div class="card-header">headerdiv>
<div class="card-body">bodydiv>
<div class="card-footer">footerdiv>
div>
7.18.3. Multi-color card ¶
.bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark and .bg-light . 
Example ¶
<div class="container">
<h2>Multiple color cardsh2>
<div class="card">
<div class="card-body">Basic Carddiv>
div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Main cardsdiv>
div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success Carddiv>
div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Information carddiv>
div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning carddiv>
div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger Carddiv>
div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary Carddiv>
div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Black Carddiv>
div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light colored cardsdiv>
div>
div>
7.18.4. Title, text, and link ¶
.card-title class to set the title of the card. .card-body class is used to set the contents of the card body. .card-text class is used to set the card .card-body in the class label, if the last line can remove the bottom margin. .card-link class is used to set the color for links. Example ¶
<div class="card">
<div class="card-body">
<h4 class="card-title">Card titleh4>
<p class="card-text">Some example text. Some example text.p>
<a href="#" class="card-link">Card linka>
<a href="#" class="card-link">Another linka>
div>
div>
7.18.5. Picture card ¶
add
.card-img-top (the picture is above the text) or .card-img-bottom (the picture is below the text to set the picture card: Example ¶
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doeh4>
<p class="card-text">Some example text.p>
<a href="#" class="btn btn-primary">See Profilea>
div>
div>
.card-img-overlay class: Example ¶
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doeh4>
<p class="card-text">Some example text.p>
<a href="#" class="btn btn-primary">See Profilea>
div>
div>
Principles, Technologies, and Methods of Geographic Information Systems
102