How do I create container with checkbox inside for each product


I’m pretty new to html and I have a question.

Image how it should look

So, as you can see in the Image there is individual container with checkbox (checkboxes are for mass deletion) for each product (The products I get from mysql database, the database is working), I was wondering how do I even do something like this ? I’ve tried searching google for something similar, but nothing comes up :(, could anyone help please ?


I made something based on your request. the content written inside the box was written inside a ‘p’ tag(paragraph). just so that you can have an idea.
but you can delete that paragraph and what ever type of content you want.
here is the html and CSS code.

<!DOCTYPE html>
<html lang="en">

    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <div class="outerbox">
        <input type="checkbox" class="checkbox">
        <p class="content">jvc200123 <br>Acme <br>1.00 $<br>size:700 MB</p>



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

.outerbox {
  width: 150px;
  height: 150px;
  border: 2px solid grey;
  margin: 20px;
  border-radius: 5px;

.checkbox {
  margin: 10px;
  transform: scale(1.5);

.content {
  margin: 10px 25px;
  font-family: sans-serif;

Answered By – sravanTG

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published