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 l…


This content originally appeared on DEV Community and was authored by Its Aomi

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>

Here is the Output.

Image description


This content originally appeared on DEV Community and was authored by Its Aomi


Print Share Comment Cite Upload Translate Updates
APA

Its Aomi | Sciencx (2022-07-17T04:08:54+00:00) Simple Bootstrap Card. Retrieved from https://www.scien.cx/2022/07/17/simple-bootstrap-card/

MLA
" » Simple Bootstrap Card." Its Aomi | Sciencx - Sunday July 17, 2022, https://www.scien.cx/2022/07/17/simple-bootstrap-card/
HARVARD
Its Aomi | Sciencx Sunday July 17, 2022 » Simple Bootstrap Card., viewed ,<https://www.scien.cx/2022/07/17/simple-bootstrap-card/>
VANCOUVER
Its Aomi | Sciencx - » Simple Bootstrap Card. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/17/simple-bootstrap-card/
CHICAGO
" » Simple Bootstrap Card." Its Aomi | Sciencx - Accessed . https://www.scien.cx/2022/07/17/simple-bootstrap-card/
IEEE
" » Simple Bootstrap Card." Its Aomi | Sciencx [Online]. Available: https://www.scien.cx/2022/07/17/simple-bootstrap-card/. [Accessed: ]
rf:citation
» Simple Bootstrap Card | Its Aomi | Sciencx | https://www.scien.cx/2022/07/17/simple-bootstrap-card/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts