Sunday, July 17, 2022
HomeWordPress DevelopmentEasy Bootstrap Card - DEV Group

Easy Bootstrap Card – DEV Group


Right here is how one can make a easy bootstrap card.

For extra Bootstrap Card Examples go to right here – Bootstrap Card Examples

First create the essential html format in a brand new index.html file and hyperlink the bootstrap stylesheet.

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

Exit fullscreen mode



Create the Container for the Card

Now create the html container that may include all the weather of the cardboard. The container may have a prime picture, Heading, Description and a Learn Extra button.

  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" model="width: 20rem;">
            <img
              src="https://photographs.pexels.com/images/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">
                Considering of getting cat ?
              </h5>
              <p class="card-text">
                Some fast instance textual content to construct on the cardboard title and make up
                the majority of the cardboard's content material.
              </p>
              <a href="#" class="btn my-btn">Learn extra</a>
            </div>
          </div>
        </div>
      </div>
    </div>
Enter fullscreen mode

Exit fullscreen mode

After creating the container its time to model it.



Styling the General 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 {
  shade: #696969;
}
Enter fullscreen mode

Exit fullscreen mode



Styling the Button and Including a Easy Hover impact to it

.custom-card .my-btn {
  background: #ba7b43;
  shade: white;
}
.custom-card .my-btn:hover {
  shade: white;
  background: #885427;
}
Enter fullscreen mode

Exit fullscreen mode

That is it for styling, Now mix all of the css and html.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <hyperlink rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<model>
.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 {
  shade: #696969;
}
.custom-card .my-btn {
  background: #ba7b43;
  shade: white;
}
.custom-card .my-btn:hover {
  shade: white;
  background: #885427;
}
</model>
</head>
<physique>
  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" model="width: 20rem;">
            <img
              src="https://photographs.pexels.com/images/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 textual content right here?
              </h5>
              <p class="card-text">
                You'll be able to enter a easy description right here.
              </p>
              <a href="#" class="btn my-btn">Learn extra</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</physique>
</html>
Enter fullscreen mode

Exit fullscreen mode

Right here is the Output.

Image description

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments