Is there a way to generate a number image from a number using Bootstrap

user_1480018 0
Viewed 172

I have a number of webpages that show tiles with images

e.g

enter image description here

and I have other pages that look the same, but don't have any images

enter image description here

On this second screenshot see each tile refers to a number, so what i want to do is just display an image with the number.

Is there a way to simply display an arbitary number as an image, so has border and can click anywhere in the tile to trigger the href.

I am using Bootstrap 5.1 if relevant

Update

I have had some success using css as suggested

<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));grid-gap: 10px;" id="tiles">
    <div class="tile" style="display:block" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" style="display:block" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
</div>

But I would like width of buttons to always be same, not less wide if less text (e.g 1 versus 120)

enter image description here

bootstrap-5 css html
1 Answers

Please try this

#tiles{
display:flex;
gap: .75rem;
flex-wrap: wrap;
}
.tile{
    border: 1px solid rgba(0,0,0,0.25);
    border-radius:5px;
    padding:1rem
    flex: 0 0 auto;
    width: 8.33333333%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}
.tile a{
color:#000;
font-size:20px;
text-decoration:none;
}
<div id="tiles">
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             61
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              0
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             161
        </a>
    </div>
    <div class="tile" sort_order="0" name_order="0">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 0&amp;cid=0$=BPM$6909" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
              105
        </a>
    </div>
    <div class="tile" sort_order="1" name_order="69">
        <a href="/bpm.start?id=70bd15b0-c1b3-4f0d-b275-c1f8553ae1f6&amp;title=Bpms / 61&amp;cid=0$=BPM$31324" class="btn btn-outline-dark" style="position:relative;--bs-btn-padding-y:1.0rem;--bs-btn-padding-x:2rem;--bs-btn-font-size:2.5rem;--bs-btn-border-radius:0.5rem">
             106
        </a>
    </div>
</div>

user_128181540
Related