Bootstrap 4 displays columns in a vertical stack rather than in a horizontal row side by side

I have implemented an accordion element on my website. When I click the button to reveal the content inside a div, there are two columns displayed next to each other. However, on wider screens, the columns appear stacked on top of each other instead of horizontally aligned. What could be causing this issue?

         <div class="row collapse" id="infoData">
            <div class="col-md-5">
              <p><img src="/icons/shirt.svg" class="icon">{{ $player->club }}</p>
              <p><img src="/icons/football-field.svg" class="icon">{{ $player->position }}</p>
              <p><img src="/icons/contract.svg" class="icon">Pro sports agency</p>
            </div>
            <div class="col-md-5">
              <p><img src="/icons/scale.svg" class="icon">100m: 11.1s</p>
              <p><img src="/icons/scale.svg" class="icon">Vertical jump: 65cm</p>
              <p><img src="/icons/football-field.svg" class="icon">Left foot</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-10">
              <a data-toggle="collapse" href="#infoData" aria-expanded="false" aria-controls="infoData">
                See more
              </a>
            </div>
          </div>

Take a look at the fiddle here.

cssbootstrap-4

Answer №1

The issue at hand is due to the behavior of 'collapse'.

Within Bootstrap 4, the DIVs with the class row are styled using CSS3's display:flex property.

This conflicts with the collapse code provided, which changes the display property to block instead of returning it to its original state. This causes Bootstrap 4 to malfunction.

To resolve this, nest the row inside the collapse div as shown in this example.

Just keep in mind when using JSFiddle that col-md-* classes may appear full width on screens smaller than 'md', so expanding the render box can provide a better representation.

<div class="collapse" id="infoData">
  <div class="row">
    <div class="col-md-5">
      <p><img src="/icons/shirt.svg" class="icon">{{ $player->club }}</p>
      <p><img src="/icons/football-field.svg" class="icon">{{ $player->position }}</p>
      <p><img src="/icons/contract.svg" class="icon">Pro sports agency</p>
    </div>
    <div class="col-md-5">
      <p><img src="/icons/scale.svg" class="icon">100m: 11.1s</p>
      <p><img src="/icons/scale.svg" class="icon">Vertical jump: 65cm</p>
      <p><img src="/icons/football-field.svg" class="icon">Left foot</p>
    </div>
  </div>

</div>
<div class="row">
  <div class="col-md-10">
    <a data-toggle="collapse" href="#infoData" aria-expanded="false" aria-controls="infoData">
                    See more
                  </a>
  </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 there a setting causing Webpack to not rebuild when there are changes to the CSS?

I have configured postcss-loader and style-loader on webpack, and I am using webpack-dev-server. However, every time I make changes to the CSS, webpack does not rebuild automatically. The script for webpack dev server that I use in npm scripts: webpack-d ...

cssnode.jswebpackwebpack-dev-server

How can I keep tab-navigation fixed in Bootstrap 4?

Issue with bootstrap 4 tab navigation: Clicking on a tab jumps to the correct tab pane but doesn't stay in place. Additionally, if the pane is longer than the viewport, it jumps to the top of the page after loading, covering the nav-tabs. I've fo ...

cssbootstrap-4

The tab panels are failing to function properly due to the maxcdn CSS integration

I am struggling to make my basic JQuery code work, specifically to show and hide panels when a list item in the menu is clicked. The CSS I am using is from max cdn, so I'm unsure if I need to create my own CSS file for this. <!DOCTYPE html> ...

jqueryhtmlcss

Updating the Angular 5 Navigation Bar to a New Color

I am currently utilizing Angular 5 and Bootstrap 4 as my primary front-end frameworks. One of the functionalities I am working on involves using Bootstrap's `fixed-top` navigation bar and changing its background color when scrolling the window. To ach ...

jquerybootstrap-4angular5

Expanding the size of a text area input within a form using CSS and

How can I adjust the size of the text area in the Comment section to match the full width of the section, starting from the beginning instead of the middle? You can find the code here. HTML <body bgcolor="#00BCD4"> <div> <h1>Co ...

htmlcssformstextareawindow-resize

What is the reason that a div can accept both before and after selectors, while an img tag cannot have this capability

What is the reason behind a div being able to accept before and after selectors, while an img tag cannot? How can I effectively define two pseudo elements for my image? ...

htmlcss

issues with the functionality of bootstrap modal

I'm currently working on a project where I need to set up a modal popup using bootstrap. The website I'm working on is organized by departments, so the only part of the code that I have control over is the main body of the site. I have included t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Encountering a maximum call stack size exceeded error while using toggle with bootstrap 4

Currently, I am working with asp.net, using Bootstrap 4 and Jquery 3.3.1 to implement bootstrap4-toggle. My setup includes 3 inputs, each with a unique ID. Upon loading, the first toggle is set to on. I have an onchange event that triggers whenever a check ...

jquerybootstrap-4toggle

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...

javascriptcssreactjssass

The background image in the hovering textbox shifts and changes size

I've been trying to set a background image on a Kendo UI Textbox. It looks good until you hover over it. But when you do hover over it, this issue arises: How can I resolve this? The background image should remain in place even when I hover and cli ...

htmlcsskendo-uitextboxkendo-asp.net-mvc

What is the best way to trigger an event function again once a specific condition has been satisfied?

I'm currently working on a project where I need a sidebar to scroll at a slower rate until it reaches a specific point, and then stop scrolling once that point is reached. Below is the jQuery code I've been using: $(window).on("scroll", function ...

javascriptjquerycss

Angular component causing issues with correct functionality of absolute positioning

I am facing an issue with positioning an element absolute relative to a parent outside of an Angular component. Despite using the proper structure, it does not seem to work as expected. <div id="div1" style="position:relative; padding-lef ...

cssangularabsolute

The alignment of the website design is off

I'm in the process of creating a custom template for my website and everything was going smoothly until I encountered an issue with the news bar placement. Instead of appearing below the navbar and welcome message bar, it's showing up above the n ...

csshtml

Loading jQuery leads to the entire body of the webpage becoming white

As I transition from a welcoming page to a new content page using jQuery's fadeOut/fadeIn and load functions, I encounter an issue where the background, which is black on both pages, suddenly changes to white upon loading the second page. This isn&ap ...

javascriptjqueryhtmlcssajax

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

javascriptjqueryhtmlcssgoogle-chrome

Designing rectangular divs with arrow elements

As I delve deeper into the world of CSS, my experiments have been yielding exciting results! From creating popup boxes to playing around with CSS styling, it's been a fun journey so far. However, I'm eager to challenge myself and expand my knowle ...

cssgraphics

Utilizing Jquery for toggling HTML elements and styling with CSS

I'm trying to implement a jQuery toggle button that switches between two states below; When I click the Toggle Button/link, everything in picture A (above the red line) should be hidden. Clicking the toggle button again would make it reappear. I&apo ...

jqueryhtmlcss

Positives and negatives images for accordion menu

I have successfully created an accordion list using HTML, CSS, and JavaScript. However, I would like to enhance it by adding a plus and minus picture in the left corner of the heading. Is there a way to achieve this functionality? I have two images that I ...

javascripthtmlcssaccordion

Show fixed position buttons

My Angular HTML form includes a grid setup, defined as follows: .grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2%; grid-auto-rows: 90%; } This grid creates two parallel rectangles. I have divs ...

htmlcssangularbootstrap-4angular8

Step by step guide on integrating a Slider into the header bullet point

I have successfully added the Bootstrap 5 website slider and it is working well. However, I am wondering how to position the slider at the top right with bullet points and without the back and previous arrows. Does anyone know the correct way to achieve th ...

javascripthtmlcssbootstrap-5