CODEWITHSUNDEEP
htmlcss
CYr
CYr

Reputation: 347

Repeat HTML Element With Only HTML/CSS

I am building a simple event calendar with php, html, and css. Inside the calendar, I have a basic div, with some text inside it, which is a simple replication of one box in a calendar: 

<div class="day col-sm p-2 border border-left-0 border-top-0 text-truncate ">
      <h5 class="row align-items-center">
        <span class="date col-1">24</span>
        <small class="col d-sm-none text-center text-muted">Friday</small>
        <span class="col-1"></span>
      </h5>
      <p class="d-sm-none">Event: Go to Work</p>
</div>

Everything is working pretty well inside the calendar, it's just that I have to repeat the above element multiple, in fact a very large number of times, which, in general, is not a very good practice, and the code is very hard to work with. So I decided I would find a way to repeat this div's code, but to only do it with HTML & CSS. At most a tiny bit of php, but nothing else.

I've tried searching up and trying answers on google & stack overflow, all to no avail. Any help is appreciated

Upvotes: 0

Views: 523

Answers (1)

Paskal Arzel
Paskal Arzel

Reputation: 71

You won't be able to do it without using at least a bit of PHP, unfortunately, HTML/CSS alone aren't enough to make a loop (Anyway, you'll almost never need to do so without using variables from your PHP code running behind)

So, for example, with a little bit of PHP, if you want this elem 10 times :

<?php for ($x = 0; $x < 10; $x++) { ?>
<div class="day col-sm p-2 border border-left-0 border-top-0 text-truncate ">
      <h5 class="row align-items-center">
        <span class="date col-1">24</span>
        <small class="col d-sm-none text-center text-muted">Friday</small>
        <span class="col-1"></span>
      </h5>
      <p class="d-sm-none">Event: Go to Work</p>
</div>
<?php } ?>

Upvotes: 1

Related Questions