Bootstrap Cards

by tacman1123

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
        <div class="card-header">

                                        <span class="float-end">
                                <img src="https://mapa.mus.wip/media/cache/squared_thumbnail_small/nabolom/images/mapa-1-0.jpg" alt="">

                </span>
            
            <span class="float-start text-secondary">#mapa-1</span>

            <h6 class="card-title"></h6>
            <p class="card-subtitle text-muted mb-0">Subtitle</p>
        </div>
        <div class="card-body">
            <p class="text-muted">
                
            </p>

                                                
                                                        <div>
                <span class="fa-light fa-map-location-dot " title=""></span>
                chiapas

            </div>
            
                                            
                                            
                                                        <div>
                <span class="fal fa-timeline " title=""></span>
                1953

            </div>
            
                                                        <div>
                <span class="fal fa-person " title=""></span>
                frans_blom

            </div>
            
            
        </div>
    </div>

CSS

/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/

body {
  min-height: 100vh;
  background: #fafafa;
}


.social-link {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 50%;
  transition: all 0.3s;
  font-size: 0.9rem;
}

.social-link:hover,
.social-link:focus {
  background: #ddd;
  text-decoration: none;
  color: #555;
}

.progress {
  height: 10px;
}