Why is Bootstrap 4 causing these columns to stack vertically instead of horizontally?

After upgrading to bootstrap 4, I noticed that my gallery layout has changed from horizontal in bootstrap 3 to vertical. What could have caused this sudden change?

To see the issue, here is a link to a fiddle.

Here are my column settings:

<div class="row gallerymargin">
    <div class="col-md-12">
        <div class="latest_posts default-style">
            <div class="row" id="contentgallery">
                  <div id="album">
                    <div class="col-sm-6 col-lg-4 post">
                      <a href="cms/images/gallerijen/over-ons/8200trouwen.jpg" target="_blank" class="hoverBorder plus lightgallerytrigger">
                        <span class="hoverBorderWrapper">
                          <img style="object-fit:cover;width:100%;height:200px;" src="cms/images/gallerijen/over-ons/8200trouwen.jpg" class="img-responsive" width="370" height="200" alt="" title="">
                          <span class="theHoverBorder"></span>
                        </span>
                        <h6>View Photo +</h6>
                      </a>
                    </div>
                    (more individual columns go here)
                </div>
            </div>
            <!--/ row -->
        </div>
    </div>
</div>

All other elements on my website appear fine, so it's puzzling why only the gallery layout was affected by the upgrade.

csstwitter-bootstrapbootstrap-4

Answer №1

To optimize your HTML code for bootstrap 4, it is recommended to delete the <div id="album"> element. Since Bootstrap 4 utilizes a Flex layout, flex properties should be applied directly to its child elements (specifically the album class).

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 can I adjust the width of a td table in an Angular 6 component template using Bootstrap?

I am currently working on a project using Angular 6. Here is a snapshot of the screen I am working on: https://i.stack.imgur.com/hQLOI.png The screen consists of two main elements - an HTML table and a component that represents the table data in individ ...

angularbootstrap-4

Radio buttons are not having the :invalid pseudo class properly applied

Looking to style a radio group with a required attribute. Attempting to adjust the appearance of the radio group depending on whether an input is selected or not. However, it appears that the :invalid pseudo-class does not apply to radio buttons. ...

csshtmlradio-button

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

Guide to ensuring a jQuery modal box appears above other page elements

As I work on a jQuery popup modal box, I am faced with the issue of it pushing all other content aside when called. The toggleSlide() function is being used and works fine, but the layout problem remains. Attempts to rectify this by using position: relati ...

jquerypopupmodal-dialogcss

In the world of web design, blank areas can sometimes appear on a page as you

My website has a fixed header with a height of 44 pixels, content that takes up 89% of the screen, and a footer that occupies 6% of the space. Everything looks fine when the browser is at 100% zoom, but as I zoom out, white spaces start appearing before th ...

htmlcsswebbootstrap-4

Struggles with implementing CSS Grid's dynamic column heights and expanding rows

Linked partially to Removing empty space in CSS Grid, with specific adjustments I am aiming for. Essentially, I want my rows and columns to expand and contract based on the content present. In this CodePen example, you can observe that the content of the ...

htmlcsscss-grid

CSS guidelines for handling single line breaks with the white-space property set to pre-wrap

Is it considered acceptable to include solitary carriage return characters in an HTML block styled with white-space: pre-wrap? I am working with an application that receives SOAP messages and logs them to a file. The logging process involves removing new- ...

htmlcssnewline

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

javascriptjquerycssgoogle-chromefirefox

Attempting to adjust the width upon hovering with CSS

I have attempted this previously and cannot figure out why it is not functioning properly. I am attempting to do the following: http://jsfiddle.net/geometron/u3M6r/1/ <ul> <li><a href="content1.html"> Demo 1 </a></li> ...

cssanimation

Bootstrap has been successfully installed and is functioning properly; however, the custom styling does not seem to be

After successfully installing bootstrap and JavaScript through NPM in my Laravel 6 project, I have noticed that the bootstrap is functioning properly on my website. However, I encountered an issue when trying to add custom styles in the resources/sass/ap ...

laravelnpmbootstrap-4

What steps can I take to design a functional hamburger menu?

After multiple attempts to create a hamburger menu, I have hit a roadblock. Clicking on the menu icon transforms it into an 'X', but unfortunately, it does not trigger the opening of the menu. Despite days of effort and research, I have yet to fi ...

javascripthtmlcssnavigationbarhamburger-menu

Step-by-step Guide on Making a Dropdown List with Options Featuring Background Images and Text

Hello, I am working on creating a customized dropdown list similar to the one shown in the image. https://i.sstatic.net/saeCd.png My goal is to have a select list with options that display both an image and the country name. However, my current code is n ...

phphtmlcss

The contents table remains fixed in the top right corner as you scroll

I have developed an Angular app with a table-of-contents component that only displays two items. The code for the script is as follows: ts import { Component, OnInit } from '@angular/core'; import { pdfDefaultOptions } from 'ngx-extended-p ...

htmlcssangulartypescriptbootstrap-4

Unbinding or undoing an 'onclick' event when another 'onclick' event is triggered

I am facing an issue where clicking on elements with 'onclick' functions works as expected, but when I click on a different element with another 'onclick' function, the first one remains active. What I actually want is for the previous ...

javascripthtmlcss

How do you set a background image for the color of the font?

Imagine I have this piece of code: <span>Hello world!</span> Along with the following CSS: span{ color:red; } Is it possible to replace the red value with an image? Something like url(images/text-bg.png);? I am looking to add a texture to m ...

htmlcss

Alignment of Material-UI dialogue buttons on the left side

I have a Dialog containing three buttons as shown below: https://i.stack.imgur.com/T6o35.png Here is the JSX code: <DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} > <Button classes={{ root: this.props ...

javascripthtmlcssmaterial-ui

Is it possible to configure Nginx mime types within a Docker container?

My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...

javascriptcssnginxwebserverstatic-files

Broken image path in the Model-View-Controller framework

When using the jQuery DatePicker plugin in my MVC application, I face an issue with displaying a certain image for the Calendar pop-up. Here is the code snippet: $.datepicker.setDefaults({ showOn: "both", buttonImage: "../images/Calendar.png", ...

jquerycssasp.net-mvcimagesrc

Is there a way to modify the video height so that it aligns with the dimensions of the

I'm currently trying to adjust the background video to fit the parent div, but I am facing issues with adjusting its height within the media query. Any suggestions on how I can resolve this problem? HTML <div class="hero"> <video ...

htmlcss

Preserve the original color of links in CSS by using the `a

Is it feasible to specify in CSS that a link should not change its color and instead use the default one? For example: If I have text displayed in red, and that text is also a hyperlink. Typically, when clicked on, the text would change to blue because i ...

htmlcsshyperlink