The two Bootstrap columns are not displaying properly on the screen

I'm working on a website that features a gallery. The code below should ideally display two columns of photos when viewed on a medium device width (768px up to 992px). However, only one column is showing up on the screen. I'm hesitant to group the images in rows as I want them to be responsive and adjust to the width of the device screen. What could be causing this unexpected behavior?

<div class="container-fluid">
    <h1 class="text-center pb-4">Gallery</h1>
    <div id="lightgallery" class="text-center no-gutter">
      <a data-src="img/img-1.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-12" src="img/img-1.jpg">
      </a>
      <a data-src="img/img-2.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-2.jpg">
      </a>
      <a data-src="img/img-3.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-3.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-4.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-5.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-6.jpg">
      </a>
    </div>
  </div>

Changing the medium columns to col-md-5 seems to work, but given Bootstrap's maximum of 12 columns, I'm left wondering about the constraints.

cssimagebootstrap-4

Answer №1

Place the col element directly inside a row. My suggestion to resolve this issue is to modify your code as follows:

<div class="container-fluid">
    <h1 class="text-center pb-4">Gallery</h1>
    <div id="lightgallery" class="text-center no-gutter row">
      <a data-src="img/img-1.jpg" class="col-lg-3 col-md-6 col-sm-12">
        <img class="img-fluid" src="img/img-1.jpg">
      </a>

Answer №2

I successfully solved the issue by incorporating a row, despite initially considering otherwise. I introduced a div with class="row" and additional div elements, each dedicated to a picture, with column classes. See the revised code below:

<div class="container-fluid">
    <h1 class="text-center pb-4">Gallery</h1>
    <div id="lightgallery">
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-1.jpg">
            <img class="img-fluid" src="img/img-1.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-2.jpg">
            <img class="img-fluid" src="img/img-2.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-3.jpg">
            <img class="img-fluid" src="img/img-3.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-4.jpg">
            <img class="img-fluid" src="img/img-4.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-5.jpg">
            <img class="img-fluid" src="img/img-5.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-6.jpg">
            <img class="img-fluid" src="img/img-6.jpg">
          </a>
        </div>
      </div>
    </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

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

javascripthtmlcssvue.js

Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while d ...

htmlcss

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

javascriptc#htmlcsswebpack

Why do CSS media queries stop working at exactly 5 distinct resolution sizes? This seems odd

Just completed my first JavaScript project, a 3D website using three.js. However, right before publishing, I realized that the dimensions and contents were not optimized for viewing on browsers other than 1920x1080. So, I delved into setting DevicePixelRat ...

htmlcssmedia-queries

Is it possible to style the parent CSS file using a query?

Is it feasible to achieve this, or are there alternative methods to accomplish something similar? In a CSS file, we have the ability to set queries for various screen resolutions, allowing CSS rules to apply only to specific screens. @media (max-width: 76 ...

htmlcsscss-selectors

Connecting an external SVG file to its corresponding HTML code

Can I connect my SVG file to my CSS file for a line animation? I'm uncertain about including the SVG code directly in my HTML file. ...

htmlcsssvg

Creating dynamic canvas elements with images using HTML and JavaScript

Currently, I am working on a unique project involving a canvas filled with dynamic moving balls. This project is an extension or inspired by the codepen project located at: https://codepen.io/zetyler/pen/LergVR. The basic concept of this project remains t ...

javascripthtmlcsscanvas

Conflicting configurations in VS Code causing issues

Currently making adjustments to my JSON settings and everything is functioning correctly, however, I keep encountering this persistent error: "Expected comma jsonc(514)" Here's a snippet of my code that's causing the issue: "css.li ...

cssjsonvisual-studio-codesettings

Update the color of buttons after being clicked - Bootstrap

If I want to change the class "btn-success" to "btn-warning" or update the color code to "#ffc107" upon a successful process, how can I achieve that? Button ; <button type="submit" name="teklifver" value="Teklif Ver" class="btn btn-block btn-success" ...

javascriptbootstrap-4

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

Is there a similar function to -moz-linear-gradient in Chrome?

My button's CSS includes background: -moz-linear-gradient(center top, #59a1d8, #27247D) repeat scroll 0 0 #0f78c7;, which works well in Mozilla Firefox. However, it does not display properly in the Chrome browser. Can someone suggest an equivalent cod ...

htmlcss

I seem to be having a problem with CSS and Flexbox sizing. Does anyone have an explanation for what might be

Hey there! I'm currently in the process of building a Netflix clone, and everything seems to be working well except for one issue with the layout. No matter how I adjust the width of the div containing the images, they just won't change size. I&a ...

cssreactjsflexboxcarouselnetflix

Is there a way to use Media Queries to require CSS to load an image?

Here is the CSS code I am using: html { background: url(../img/header_mobile.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* Smal ...

htmlcssresponsive-design

Place two anchors side by side using inline-blocks without using the float property

Is there a way to align two buttons next to each other without using floating? I have encountered an issue where adding a width to one of the buttons causes it to jump down and be on a different line than the other button. The buttons are centered, so th ...

htmlcss

inconsistency in button heights

I am currently working on a website project for one of my college courses and I have encountered an issue with the button heights in my slide show not matching up. I'm seeking advice or tips on how to align both buttons to have the same height. Can an ...

htmlcssslideshow

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon res ...

javascriptjqueryhtmlcsswebkit

CSS Horizontal Menu positioned left losing its background color due to float property

Can you explain why the background color of the ul element disappears when its child elements are floated? I have a vague memory of reading something about floats causing this issue, but I can't recall the details. (JSFiddle) ul { padding-left: ...

htmlcss

Guide on implementing gradient animation effects in a React component

How can I implement gradient animation effects like this example in a React component using inline CSS? I need to utilize the CSS-based gradient animation effects shown below directly within the React component. Are there any specific packages available ...

cssreactjs

The input field is failing to show up on the screen

I have been working on my React app and experimenting with how to dynamically display input elements based on different screen sizes. To achieve this, I implemented the use of window.innerWidth as shown in the code snippet below: <div className='Tr ...

cssreactjsinputjsxconditional-rendering

Tips for detecting the height of a row with 2 columns in CSS

I am attempting to create two text/image boxes side by side, where one box dictates the height of both on desktop. In this scenario, the leftcol box should expand its background color to match the size of rightcol and center the content. On mobile devices, ...

htmlcssflexbox