Simple Bootstrap Card

#webdev #beginners #tutorial #css

Here is how you can make a simple bootstrap card.

For more Bootstrap Card Examples visit here - Bootstrap Card Examples

First create the basic html format in a new index.html file and link the bootstrap stylesheet.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Cat Bootstrap Card</title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
</head>
<body>
</body>
</html>

Create the Container for the Card

Now create the html container that will contain all the elements of the card. The container will have a top image, Heading, Description and a Read More button.

  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" style="width: 20rem;">
            <img
              src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
              class="card-img-top"
              alt="cat-image"
            />
            <div class="card-body">
              <h5 class="card-title font-weight-bold">
                Thinking of getting cat ?
              </h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn my-btn">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </div>

After creating the container its time to style it.

Styling the Overall Card

.custom-card {
  margin: 0px auto;
  box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
  cursor: pointer;
}

Styling the Title & Description

.custom-card .card-title {
  font-size: 1.4rem;
}
.custom-card .card-text {
  color: #696969;
}

Styling the Button and Adding a Simple Hover effect to it

.custom-card .my-btn {
  background: #ba7b43;
  color: white;
}
.custom-card .my-btn:hover {
  color: white;
  background: #885427;
}

That's it for styling, Now combine all the css and html.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<style>
.custom-card {
  margin: 0px auto;
  box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
  cursor: pointer;
}
.custom-card .card-title {
  font-size: 1.4rem;
}
.custom-card .card-text {
  color: #696969;
}
.custom-card .my-btn {
  background: #ba7b43;
  color: white;
}
.custom-card .my-btn:hover {
  color: white;
  background: #885427;
}
</style>
</head>
<body>
  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" style="width: 20rem;">
            <img
              src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
              class="card-img-top"
              alt="cat-image"
            />
            <div class="card-body">
              <h5 class="card-title font-weight-bold">
                Some text here?
              </h5>
              <p class="card-text">
                You can enter a simple description here.
              </p>
              <a href="#" class="btn my-btn">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>