Bootstrap CARD

by 3axap

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
  <div class="card">
    <img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif">
    <div class="card-block">
      <h4 class="card-title">Название новости</h4>
      <div class="card-meta">
        <a href="#">Friends</a>
      </div>
      <div class="card-text">
        Tawshif is a web designer living in Bangladesh.
      </div>
    </div>
    <div class="card-footer">
      <small>Last updated 3 mins ago</small>
      <button class="btn btn-info float-right btn-sm">Читать</button>
    </div>
  </div>
</div>
<br>

CSS

html {
  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 14px;
}

h5 {
  font-size: 1.28571429em;
  font-weight: 700;
  line-height: 1.2857em;
  margin: 0;
}

.card {
  font-size: 1em;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: .28571429rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.card-block {
  font-size: 1em;
  position: relative;
  margin: 0;
  padding: 1em;
  border: none;
  border-top: 1px solid rgba(34, 36, 38, .1);
  box-shadow: none;
}

.card-img-top {
  display: block;
  width: 100%;
  height: auto;
}

.card-title {
  font-size: 1.28571429em;
  font-weight: 700;
  line-height: 1.2857em;
}

.card-text {
  clear: both;
  margin-top: .5em;
  color: rgba(0, 0, 0, .68);
}

.card-footer {
  font-size: 1em;
  position: static;
  top: 0;
  left: 0;
  max-width: 100%;
  padding: .75em 1em;
  color: rgba(0, 0, 0, .4);
  border-top: 1px solid rgba(0, 0, 0, .05) !important;
  background: #fff;
}

.card-inverse .btn {
  border: 1px solid rgba(0, 0, 0, .05);
}

.card-meta {
  font-size: 1em;
  color: rgba(0, 0, 0, .4);
}

.card-meta a {
  text-decoration: none;
  color: rgba(0, 0, 0, .4);
}

.card-meta a:hover {
  color: rgba(0, 0, 0, .87);
}