How can I create an image of a number using Bootstrap?

I have a collection of web pages featuring tiles with various images

For example:

https://i.sstatic.net/HKna1.jpg

Some of my pages look identical to these, but do not include any images

https://i.sstatic.net/rLXPY.png

In the second screenshot, each tile corresponds to a number. My goal is to display an image alongside that number.

Is there a simple way to show a number as an image within a bordered tile that can be clicked anywhere to trigger the hyperlink?

I am utilizing Bootstrap 5.1 if that information is pertinent

Update

I've had some success using CSS as recommended

<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>

However, I would like the buttons' width to always remain consistent regardless of the text length (e.g., 1 versus 120)

https://i.sstatic.net/1qHBc.png

htmlcssbootstrap-5

Answer â„–1

Give this a shot!

#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>
   <!-- more code snippets here -->
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

htmlcss

Leveraging the CSS-Element-Queries Library for emulating the functionality of CSS media queries

Recently, I used a nifty CSS-Element-Queries tool to perform basic element manipulations that trigger whenever the window is resized. In simple terms, my goal was to dynamically adjust an element's attribute based on the current width of the window â ...

javascriptjqueryhtmlcss

Interactive HTML Table in PHP Email

I am curious to know if it is possible to include a user-defined function in PHP Mail. $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceabb6afa3bea2ab8eabb6afa3bea2abe0ada1a3">[email protected]</a>"; $mess ...

phphtmlmysqlemail

Using JavaScript to interact with text elements in external SVG documents

When it comes to creating an SVG within HTML and assigning specific IDs to text elements for easy access, everything works smoothly. For example, I can easily retrieve the ID using: let callQSO = document.getElementById("QSOcall").value; and th ...

javascripthtmlsvggetreact-native-svg

How to eliminate the space between text and list-style-image in CSS

My ul list items have an image added using the list-style-image property. Here is an example of what I have done: JSFiddle ul { list-style-image: url('http://placehold.it/50x40'); } <ul> <li>Coffee</li&g ...

htmlcss

Tips on changing rows within tables using HTML code

I have a code snippet that pulls data from a database and displays it in a table format. However, I am facing an issue where courses with the same term number are being displayed on separate rows. Here is the current code: <html> <head> <ti ...

phphtmlcsssql

Learning the ins and outs of HTML5 and CSS3

Does anyone have recommendations for high-quality HTML5 and CSS3 tutorials? ...

htmlcss

Displaying a div on click is simple with CSS and JQuery, but what if you want it to stay visible even after a second click? By utilizing classes within <li> tags instead of buttons

My current code involves clicking on a menu, which should reveal a list where each item has a corresponding section that slides down and slides back up when clicked. However, only the sliding down functionality is working at the moment. I'm new to jQu ...

jquerycssshow-hide

a pair of columns next to each other

I am having trouble getting two lists to display side by side. The second list keeps appearing below the first list. I need them to be in separate divs because they will have different colors and content. Additionally, the lists will be dynamically populat ...

htmlcss

Eliminating the need for horizontal scrolling in the window causes a change in the height of an internal DIV element

Check out this snippet of code, a simplified version of a larger piece: html, body { margin: 0 !important; padding: 0 !important; /* overflow-x: hidden; /* uncomment this line */ } .app { position: relative; width: 100%; text-align: center !important; } ...

htmlcss

Which is more optimal for importing CSS - using the link tag or style tag?

Is this a matter of personal preference or is there a specific advantage to using one method over the other? <link href="main.css" rel="stylesheet" type="text/css"> versus <style type="text/css> @import url('main.css'); </style& ...

htmlcssperformance

It displays empty squares instead of icons

Currently, I am working on a form using Bootstrap and HTML. I have incorporated glyphicons into the design but unfortunately they do not seem to be functioning properly. <label>International Collaboration &nbsp;<span class="glyphicon glyphico ...

htmltwitter-bootstrap-3

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

javascripthtmlcsspdf

Tips for extracting and utilizing the values of multiple checked checkboxes in a jQuery datatable

When a button is clicked, I am trying to retrieve the selected values of multiple rows from the datatables. However, with my current code below, I am only able to get the value of the first selected row. function AssignVendor() { var table = $(assig ...

javascriptjqueryhtmlcheckboxdatatables

What is the best way to convert HTML into a React component?

This is the situation I am facing : 1) The application requests a CMS (Content Management System) for page contents. 2) The CMS responds with "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>" 3) The applicat ...

javascripthtmlreactjscompilationcontent-management-system

Struggling to keep navbar fixed with a blur effect without it colliding with body content as you scroll?

I'm looking to create a sticky navbar with a blur effect similar to the one seen on (try scrolling to see the blur effect on the nav). I want it to have the following structure: My HTML code is as follows: <header class="sticky z-10 top-10"> ...

htmlcsstailwind-css

How can I achieve a full-width stepper in Bootstrap?

.row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://useloope ...

htmlcsstwitter-bootstrap

What strategies can we implement to reduce the gutter width in Bootstrap 3?

Is there a way to decrease the gutter-width in Bootstrap 3? Since Bootstrap uses a 12-grids system, using col-sm-* creates a gap between elements of around 30px (15px on each side of the grid-column). However, my theme requires less space between columns ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Hiding a related field using a designated delimiter can be achieved with JavaScript

I am looking to create a function that hides the corresponding textarea field of a dropdown. This functionality will be utilized in multiple instances, hence the need for it to be within a function. <div id="formElement1" class="field"> <labe ...

javascriptjqueryhtml

Manipulating binary data through the use of encodeURIComponent

Currently, I am reading a binary file by making a jQuery ajax get request. The file (a zip file in this instance) is returned as a string. After performing some actions on the file within the browser without modifying it, I need to send it back to a server ...

javascriptjqueryajaxhtmlnode.js