What is the best way to insert header text into the img alt attribute in HTML/Bootstrap?

I'm having trouble adding titles to the images displayed in my Bootstrap code. Here's what I have currently:

<div class="work">
        <img class="anim" src="1.png" alt="Text1">
        <img class="anim" src="2.jpeg" alt="Text2">
        <img class="anim" src="3.jpeg" alt="Text3">
        <img class="anim" src="4.jpeg" alt="Text4">
    </div>

The output is as shown in the link below:

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

Can anyone guide me on how to insert headings or titles for each image to describe their purpose?

htmlcssbootstrap-4

Answer №1

Implement the following code snippet using Bootstrap's grid system and utilize h3 tags to incorporate image titles

<div class="row">
     <div class="col-sm-6">
         <h3>Title 1</h3>
         <img class="anim" src="1.png" alt="Image 1">
     </div>
     <div class="col-sm-6">
         <h3>Title 2</h3>
         <img class="anim" src="2.png" alt="Image 2">
     </div>
     <div class="col-sm-6">
         <h3>Title 3</h3>
         <img class="anim" src="3.png" alt="Image 3">
     </div>
     <div class="col-sm-6">
         <h3>Title 4</h3>
         <img class="anim" src="4.png" alt="Image 4">
     </div>
 </div>

Answer №2

To accomplish this, you can leverage the figure element, which Bootstrap provides pre-designed styles. For example:

<div class="gallery">
    <figure class="figure">
        <figcaption class="figure-caption">Image 1</figcaption>
        <img class="animation figure-img" src="1.png" alt="Description 1">
    </figure>
     <figure class="figure">
        <figcaption class="figure-caption">Image 2</figcaption>
        <img class="animation figure-img" src="2.png" alt="Description 2">
    </figure>
     <figure class="figure">
        <figcaption class="figure-caption">Image 3</figcaption>
        <img class="animation figure-img" src="3.png" alt="Description 3">
    </figure>
     <figure class="figure">
        <figcaption class="figure-caption">Image 4</figcaption>
        <img class="animation figure-img" src="4.png" alt="Description 4">
    </figure>
</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

How to centrally align a component in React (both horizontally and vertically)

I am currently implementing React with Bootstrap in my project. Here is the render function I have been working on, with the goal of center aligning the form. render() { return ( <div class="row"> <div className="col-md-3 ...

htmlcssreactjs

Incorporate titles for items in the jquery caroufredsel plugin

I am currently using the second example of the caroufredsel plugin, which can be found on this page . I am attempting to add a caption for each picture. To achieve this, I have used `li` and `lis` in my HTML code: <div class="list_carousel"> &l ...

javascriptjqueryhtmlajax

The click function operates only once

Here are two simple JavaScript functions: CTCC.Transactions.PieceRecuClick = function (source) { $(".chk input[type='checkbox']").attr('checked', true); } CTCC.Transactions.PieceNonRecuClick = function (source) { $(".chk input ...

javascriptjqueryhtmlasp.net

Unable to interact with "load more" button using Selenium

Is there a way to click the "Load More" button multiple times using Selenium? I'm encountering an issue where I am unable to click on the button, even though it's not really a button. Every time I attempt to click on it, I receive the error messa ...

pythonhtmlseleniumweb-scrapingscroll

Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...

javascripthtmljquerycssfrontend

React drag and drop feature now comes with autoscroll functionality, making

I am encountering an issue with my nested list Items that are draggable and droppable. When I reach the bottom of the page, I want it to automatically scroll down. Take a look at the screenshot below: https://i.sstatic.net/ADI2f.png As shown in the image ...

javascriptcssreactjsdrag-and-dropoverflow

Retrieve information from a bootstrap card

Could use some help with my card display. I want each card to show specific entries from the database in a sequential order, like the first card displaying the first entry, the second card showing the second entry, and so on. Any assistance would be grea ...

phpmysqlibootstrap-4web-deploymentbootstrap-cards

Having Trouble Shutting Down Bootstrap Modal Using Fade Feature

I have been using the code below to generate modal pop-ups dynamically, but I've run into an issue. The problem is that while the modal displays correctly, I am unable to close it. I've attempted both data-dismiss="modal" and .modal("hide"), but ...

javascriptjquerybootstrap-4bootstrap-modal

Learn how to iterate over an array and display items with a specific class when clicked using jQuery

I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...

javascriptjqueryhtmlcss

Issues within html language

The formatting of this table is causing issues with printing <tr height="95%"> <td width="100%"> <div id="placeSchedule"> <table bgcolor="red" width="100%" height="100%" border="1"> <tr> < ...

htmlstyles

The text in the image caption has been drastically reduced along with the size of the image

Currently, I am dealing with the following code: <div style="min-width: 1000px;"> <p> Some text </p> <div class='div_img_left'> <img src="images/sth.png" alt="missing image" style="max-width ...

htmlcss

Is it possible to add animation to an SVG filter to create a captivating rotating planet with color effects?

I've added a filter to my self-created SVG and I'm interested in animating it so that the colors move diagonally, giving the appearance of a spinning planet. Below is the code featuring my SVG and how I'd like it to begin with the blue colo ...

javascripthtmlcssreactjssvg

Can integer values be stored in localStorage similar to JavaScript objects and retrieved without requiring typecasting?

After setting an integer value to a localStorage item: localStorage.setItem('a', 1) and checking its data type: typeof(localStorage.a) "string" it shows as a string. I then typecast it to an int for my purposes: parseInt(localStorage.a) My ...

javascripthtmllocal-storage

The "Next" button fails to function after a replay has been completed

I created a small quiz app to practice my JS skills. Everything seems to be working fine, except for one issue - when I click on replay, the quiz box shows up but the 'Next' button stops functioning. There are no console errors and I'm strug ...

javascriptbootstrap-4

What is the best way to gather the "name" and "value" attributes from a designated section of a form using JavaScript and store them in an array?

How can I extract the "name" and "value" attributes from a specific section of a form and store them in an array using JavaScript? Here is the section of the form in question: <div class="multiPickerForm"> <input type="text" name="Id" value="1"& ...

javascriptjqueryhtmlarraysobject

Having issues with my html file's navbar-right functionality

As a beginner in angular, I am trying to create a simple navbar. In my project's .json file, Bootstrap is loaded like this:- "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css ...

htmlbootstrap-4angular9

Concealing a hyperlink depending on the value chosen in a dropdown menu

Looking for guidance on how to use jQuery to read the current value of a drop-down list and hide a specific link based on that value. The drop-down list is for selecting the language/locale. For example, when "English" is selected, I want the link to be h ...

javascriptjquerycsslocaleaspdotnetstorefront

OpenWeatherMap API call failing - not visible in Network tab of Console

I am facing an issue with my API call while trying to retrieve temperature data for a specific city. I am unsure if the problem lies with my API key or the code itself. Can you please provide guidance on how I can resolve this issue? Upon entering the city ...

htmlcssreactjsopenweathermap

Unable to adjust the height of the border when hovering over a P tag

Why doesn't the P tag text and border height increase work when it is hovered over by a mouse? What could be causing this issue? Here is the HTML code snippet: <body> <div class="cheap"> <p id= "pen">hello hannan .hello ...

htmlcss

knockoutjs - revolutionizing the quiz-making experience

This is the knockoutjs file: $(function () { $('#info').hide(); QuizViewModel(); ko.applyBindings(new QuizViewModel()); $('#restart').click(function () { location.reload(); }); }); function Qu ...

jsonhtmlknockout.js