DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Its Aomi
Its Aomi

Posted on

Simple Bootstrap Card

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Styling the Title & Description

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Here is the Output.

Image description

Top comments (1)

Collapse
 
doge1346 profile image
Doge

Cool.

What image format should you use in your next project? πŸ€”