Are Bootstrap classes like "row row-md" or "row row-cols" compatible with images?

I'm having an issue where the images are not displaying properly. When I try replacing the image line with something like <h1></h1>, it works just fine. Why is this not working with images? I also attempted using 

div class="col col-lg-2 col-md-3"
, but that didn't solve the problem either. It must be something simple, and my brain just can't figure it out...

<div class="container">

        <button type="button" data-toggle="collapse" data-target="#gallery button">Simple collapsible</button>
        
        <div id="gallery button" class="collapse">

            <section class="gallery min-vh-100">

                <div class="row row-md-3">
                    <div class="col">
                        <img src="images/art_img000.jpg" class="gallery-item">
                    </div>  
                
                    <div class="col">
                        <img src="images/art_img000.jpg" class="gallery-item">
                    </div>  
                
                    <div class="col">
                        <img src="images/art_img000.jpg" class="gallery-item">
                    </div>  
                
                    <div class="col">
                        <img src="images/art_img000.jpg" class="gallery-item">
                    </div>                  
                </div> 
                
            </section>

        </div>
    </div>
htmlcssbootstrap-5

Answer №1

There are a few errors in your code that need to be corrected:

  • You should use data-bs-toggle and data-bs-target for Bootstrap 5 instead of data-toggle and data-target for Bootstrap 4.
  • Make sure to follow the correct Bootstrap HTML structure as outlined in the documentation to ensure proper functionality.
  • Avoid using non-existent Bootstrap classes like row-md-3. Refer to the official documentation for valid class names.
  • Check your usage of col-md-3 to ensure it is applied correctly.

Below is an example snippet demonstrating the correct implementation:

If the window width exceeds 768px, the images will display side by side. If the window width is equal to or less than 768px, they will stack vertically. Consult the documentation for more information on breakpoints.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161140f130f12">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f435f42">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class="container">
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#gallery-button" aria-expanded="false" aria-controls="gallery-button">
    Button with data-bs-target
  </button>
  <div id="gallery-button" class="collapse">
    <section class="gallery min-vh-100">
      <div class="row">
        <div class="col-md-3">
          <img src="images/art_img000.jpg" class="gallery-item">
        </div>

        <div class="col-md-3">
          <img src="images/art_img000.jpg" class="gallery-item">
        </div>

        <div class="col-md-3">
          <img src="images/art_img000.jpg" class="gallery-item">
        </div>

        <div class="col-md-3">
          <img src="images/art_img000.jpg" class="gallery-item">
        </div>
      </div>
    </section>
  </div>
</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

Is the "Wait for Document Loaded" function available for Chrome in Blue Prism?

Currently using BP 6.5 with the new Browser Automation mode, it appears that some features found in the HTML mode are missing. The absence of "Wait for Parent Document Loaded" is particularly notable - only "Check Exists" is available. Is there something ...

htmlblueprism

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

c#javascriptasp.netcsssitefinity

Utilize a external API to fetch JSON data from the website and showcase it on a webpage in a asynchronous manner

<!DOCTYPE html> <html> <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body> <input type="text" placeholder="Enter Your Zip Code" id="zipCode ...

htmljsonxml

experiencing a problem with the scrollTo() function

I am encountering difficulty in finding the correct X and Y coordinate values to move an image using mouse scroll within a div. I have included my sample code below. I have successfully managed to scroll the image without using a div. Can anyone assist m ...

javascripthtml

Large button in Bootstrap 3 breaks out of Jumbotron on smaller mobile screens

I have set up my layout with a Jumbotron that features a prominent call-to-action button. <a href="#" class="btn btn-lg btn-success">Let's Purchase Something Elegant</a> However, when viewed on an XS mobile screen, the button extends bey ...

csstwitter-bootstraptwitter-bootstrap-3

What is the best way to determine the position of an element with text content

Currently facing an issue with positioning in my project. Attached is a snapshot of my desired layout. I've tried creating a starburst effect and adding text using this code: jsfiddle link, but I'm struggling to position the elements correctly ...

htmlcss

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Four-pointed star design with rounded edges

https://i.sstatic.net/E3ZFb.png My goal is to create a pixel-perfect star using CSS. I have attempted to achieve this so far, but the star currently has 5 points and I would like it to only have 4 points. Additionally, I am looking for a way to make the c ...

htmlcsssvgcss-shapes

How to style tables in CSS with specific border spacing inside cells

I've been struggling with this issue for months now and even Google hasn't been able to provide a solution. My problem is that I want to add spacing between <td> and <th> tags in a table, but whenever I do, the spacing appears on the ...

csshtml-table

Manipulating checkboxes with Jquery

I have set up a scenario with two divs and two checkboxes. When the first checkbox is clicked, the first div will appear. Subsequently, if the second checkbox is clicked, the second div will appear below the first div. I initially styled both divs. Howev ...

jqueryhtmlcheckbox

Emphasize entries in an index that match the currently visible content as you scroll

I have a table of contents in my HTML page with the CSS attribute position: fixed;. I want to emphasize the current reading position by highlighting it (bold or italics) as I scroll down the page. | yada yada yada ... 1. Secti ...

javascripthtmlcsshugo

Implementing a configuration file into a client-side web application using asynchronous methods

Currently, I am facing a challenge with an SPA that is being developed using various custom components from different sources. The main issue at hand is how to initialize certain settings (such as Endpoint URLs) using a settings file that can be configure ...

javascriptjqueryhtmlsingle-page-application

"HTML Parsing with Simple DOM: Dealing with Class Names Containing Spaces

I am currently utilizing PHP Simple HTML DOM to extract elements from the source code of a website (which is not my own). However, when attempting to locate a ul class named "board List", it is not being found. It seems like there may be an issue with spac ...

phphtmlsimple-html-dom

Tips for accessing the HTML code of a TextBox in JavaScript while utilizing HTMLEditorExtender

Currently, I am utilizing the HTMLEditorExtender ajax tool on my website. The data is being saved in HTML format into the database and then retrieved within my project without any issues. However, there is a setback that I have encountered... When attemp ...

javascriptjqueryhtmlasp.netasp.net-ajax

Enhance your images with Jquery thumbnail zoom feature

I am in the process of creating color swatches for clothing items, using them as a reference point. http://jquery.malsup.com/cycle/pager7.html Take a look at the thumbnails on the webpage mentioned above. My goal is to display these thumbnails without re ...

jquerycssimage-processing

What is the best way to eliminate the appended content within the tbody?

The code snippet below is functioning correctly. I am trying to retrieve the ID or Class of the appended data from the checkbox. However, when I use the following code $('.chk').click(function(){ console.log(cc);}), it does not work as expected. ...

javascriptjqueryhtml

After upgrading from Windows 7 to Windows 10, I noticed that the CSS, HTML, and Bootstrap elements seemed to have lost their impact

<!DOCTYPE html> <html> <head> <title>Registration</title> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <link href ...

htmlcss

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

htmlw3c

Create a timer that plays music when a button is pressed

My goal is to initiate a timer when a specific button is clicked. While there are many timers available that start upon page load, I have not been able to find one that begins upon clicking a button. Additionally, the timer must start at the same time as ...

javascripthtmlaudiotimer

Creating a Custom "Save As" Dialog in HTML5 and JavaScript for Downloading Files

I have developed a NodeJS/Express application that is capable of generating and downloading an Excel document (created using ExcelJS) when a user clicks on a button. Currently, the file gets automatically downloaded to the default download location of the ...

javascripthtmlnode.jsexpressexceljs