Skip to main content

Comment Card Design | HTML, CSS And Bootstrap

by Rustcode
Comment-Card-Design-html-css-and-bootstrap

Comment Card Design Using Html Css And Bootstrap

How To Design Comment Card Design Using Html Css And Bootstrap. As we know, Comment cards are an important part of the feedback loop for service providers or any product and service-based company. They provide a way for users to voice their opinions about the service, the product they have received and what can be improved.

The design of comment cards is an important aspect in order to make sure that clients get the best user experience when filling them out. The following steps will help you create designing of comment card using html css and bootstrap. It is important that the comment card interface must be easy and simple to fill out and provides all the necessary information and icons.

A good comment card should always include:

  • A clear call-to-action, such as Like, Reply, Share, Reaction.
  • User Name And Comment Date
  • Clear Comment Fonts

For more cards design you can visit thiscards playlist.

You can read interesting articles on web development.

 

Table Of Contents

 

 

HTML:

let's start with the html boilerplate code. Boilerplate is nothing but are sections of code that are repeated in multiple places with little to no variation. Similarly, html document also has a boilerplate, in html document we will add start code that we should add this boilerplate to all of your html pages.

<!DOCTYPE html>
<html>
<head>
  <title>Comment Card Design | Rustcode</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
     
      page content.

</body>
</html>


Incude bootstrap css

https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css


Incude font-awesome for icons

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css


Add the the page content

<!DOCTYPE html>
<html>
  <head>
    <title>Comment Card Design | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
  </head>
  <body>
    <div class="container d-flex justify-content-center align-items-center height-vh">
      <div class="row d-flex justify-content-center">
        <div class="col-md-8">
          <div class="d-flex flex-column" id="comment-container">
            <div class="bg-white">
              <div class="flex-row d-flex">
                <img src="dp.jpg" width="40" class="rounded-circle">
                <div class="d-flex flex-column justify-content-start ml-2">
                  <span class="d-block font-weight-bold name">Wonder Woman</span>
                  <span class="date text-black-50">Public - 09Jun, 2021</span>
                </div>
              </div>
              <div class="mt-3">
                <p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis velit lorem, et condimentum est tempus sed. Integer tristique malesuada diam at mollis. Quisque id finibus mauris. Donec turpis justo, euismod nec commodo quis, elementum nec risus. Praesent blandit in lacus sed pretium. Duis in velit augue. Integer velit urna, convallis eget fermentum sed, aliquet at quam.</p>
              </div>
            </div>
            <div class="bg-white">
              <div class="d-flex flex-row fs-14">
                <div class="p-2 cursor p-2"><i class="fa fa-thumbs-o-up"></i><span class="ml-1">Like</span></div>
                <div class="p-2 cursor p-2"><i class="fa fa-comment"></i><span class="ml-1">Reply</span></div>
                <div class="p-2 cursor p-2"><i class="fa fa-share"></i><span class="ml-1">Share</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

 

Read Also:

  1. 3D Layer Hover Effect On Image | HTML And CSS
  2. Blurred Image Background | HTML And CSS
  3. Glitch Effect On Image | HTML And CSS

 

 

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
 *{
   border-radius: 0px !important;
   border: 0px !important;
 }

 body{
   margin: 0px;
   font-family: "Poppins", sans-serif !important;
   background: #FED18C !important;
 }

 .height-vh{
   height: 100vh;
 }

#comment-container{
  padding: 40px !important;
  background: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.date{
  font-size: 12px;
}

.comment-text{
  font-size: 14px;
  line-height: 1.2rem;
}

.fs-14{
  font-size: 14px;
}

.name{
  color: #FE654F;
}

.cursor{
  cursor: pointer;
}

.cursor:hover{
  color: blue;
}

 

 

Output:

Comment-Card-Design-html-css-and-bootstrap-output

 

 

Read Also:

  1. Multiple Overlay Animation On Image | HTML And CSS
  2. Split Image On Hover | HTML And CSS
  3. Swap Image On Hover | HTML, CSS And jQuery

 

 

Youtube Video:

We also made a youtube video for "Comment Card Design Using Html Css And Bootstrap", if you want to watch and want to learn every step of this design.

 

 

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

 

 

Read Also:

  1. Attractive Profile Card Design | Html And Css
  2. Cookies Card Design | HTML And CSS
  3. Credit Card Design | HTML And CSS
  4. Notification Card Design | HTML And CSS
  5. Laptop Ecommerce Card Design | HTML, CSS And Bootstrap
  6. OTP Verification Card Design | HTML CSS And Bootstrap
  7. Weather Report Card Design | HTML, CSS And Bootstrap

 

Comments

Post a Comment