Upon transitioning to Bootstrap 4, the grid columns automatically wrap

I currently have a table-like display created using the bootstrap grid classes. The body rows on this table are filled dynamically with JavaScript. Depending on the application state, the table is either hidden or shown. I have two divs, one with an ID containing a row for the header columns, and another div with a separate ID to hold the body rows structured as follows:

        <div id="myDynamicList" style="display:none;">
            <div class="row" id="myHeaderRow">
                <div class="col-sm-4 tabledHeader">Service Id</div>
                <div class="col-sm-4 tabledHeader">Service Type</div>
                <div class="col-sm-1 tabledHeader">Synchronised</div>
                <div class="col-sm-1 tabledHeader">Singleton</div>
                <div class="col-sm-2 tabledHeader"></div>
            </div>
            <div id="myListOutput"></div>
        </div>

In Bootstrap 3.5, everything works fine. However, in version 4, each "col" element appears on a new line rather than inline as intended. Removing the wrapping divs like myListOutput and myDynamicList fixes the layout issue, displaying the columns side by side correctly.

However, I require these wrapping divs to properly append child elements and interact with the DOM, causing the layout problem. How can this be achieved in Bootstrap 4?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

How about enclosing each line of the table body (inside the div with id="myListOutput") within a div that is given a 'row' class and setting flex-wrap to nowrap :

<div id="myDynamicList">
    <div class="row flex-nowrap" id="myHeaderRow">
        <div class="col-4 tabledHeader">Service Id</div>
        <div class="col-4 tabledHeader">Service Type</div>
        <div class="col-2 tabledHeader">Synchronised</div>
        <div class="col-1 tabledHeader">Singleton</div>
        <div class="col-1 tabledHeader"></div>
    </div>
    <div id="myListOutput">
        <div class="row flex-nowrap">
            <div class="col-4"> first </div>
            <div class="col-4"> second </div>
            <div class="col-2"> third </div>
            <div class="col-1"> fourth </div>
            <div class="col-1"> fifth </div>
        </div>

        <div class="row flex-nowrap">
            ...
        </div>
        ...
    </div>
</div>

Answer №2

To successfully make it work, I took the approach of including an additional set of row and col classes, shown below...

   <div id="myDynamicList" style="display:none;" class="row">
      <div class="col-sm-12">
          <div class="row">
             <div class="col-sm-4 tabledHeader">Service Id</div>
             <div class="col-sm-4 tabledHeader">Service Type</div>
             <div class="col-sm-1 tabledHeader">Synchronised</div>
             <div class="col-sm-1 tabledHeader">Singleton</div>
             <div class="col-sm-2 tabledHeader"></div>
           </div>
      </div>
   </div>
   <div class="row" id="listBody">
      <div class="col-sm-12" id="myListOutput"></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

Having trouble getting your jQuery/JavaScript function to detect the property "-webkit-clip-path"?

Exploring the clip-path feature of CSS has been a fun experiment for me. I have successfully implemented it in my project and am now trying to incorporate JavaScript to dynamically change the start/stop positions of the clip-path. Below is a snippet of my ...

javascriptjqueryhtmlcss

Incorporating descriptions below the images within this JavaScript carousel

I'm struggling to add text under the images in this slider. The functionality is simple, but I can't figure it out. I might have to rewrite it. Here's the HTML and JS: <div id="look-book-scroll"> <a href="javascript:;" id="lookbo ...

javascriptjqueryhtmlcssfrontend

What steps should I take to incorporate Google AdSense advertisements onto my website?

After developing a website using HTML and PHP, I attempted to incorporate Adsense ads. However, upon inserting the ad code between the body tags, the ads failed to display on the site. How can I resolve this issue? ...

htmladsadsense

Can the floating side of a div be switched after resizing?

Let's say I have two divs set up in the following configuration: |------------------------------| | div1 ------------------ div2 | |------------------------------| .div1{ float:left; } .div2{ float:right; } From my understanding, they w ...

htmlcssbootstrap-4

Text transitions in a gentle fade effect, appearing and disappearing with each change

I want to create a smooth fade in and out effect for the text within a div when it changes or hides. After researching on Google and Stack Overflow, I found that most solutions involve adding a 'hide' CSS class and toggling it with a custom func ...

javascriptcss

Creating a larger spinning div using CSS3 animation

I am looking to add a fun hover effect to my div where it spins and zooms in at the same time. Here is what I have so far: [html] div class="myMsg">> <p id="welly" style="color: #009">Welcome to Y3!<br><br><br>T ...

htmlcss

**Issue Resolved:** Looking to have the form results appear only when a valid input is submitted; otherwise, the

As a newcomer to PHP, SQL, and HTML, I've been learning for around 3 months now. Can someone assist me in achieving the following: I would like my form to display the results table only if a valid search has been submitted, showing only the database r ...

phphtml

Location of the search bar

I am having trouble figuring out which class in Bootstrap I should modify in order to center the search bar in the navigation bar. Can anyone help? <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> ...

htmlcssbootstrap-5

When an HTML input button within a table fails to trigger any jQuery function upon being clicked

I currently have a table set up with multiple rows and columns. <table style="width: 100%;" class='table_result'> <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td> ...

javascriptjqueryhtml

Is the ID Column in the Minimal Material Table Demo not appearing as expected?

Hey there, I'm in the process of developing a simple demonstration of a material table - Take note that this is a stackblitz link and for some reason, the id column isn't showing up. Here's a snippet from my app.component.ts: import { C ...

javascripthtmlangulartypescriptangular-material

Where can I find the CSS classes for Material-UI?

I am new to Material UI and I want to explore its grid examples. However, when I tried coding the example provided below, it gave me an error saying that there was no CSS file found to load for these examples. Without including the className parameter, I ...

cssreactjsmaterial-ui

Presenting a data table in Angular

I'm new to using Angular and need help creating a table to organize my data, which is being fetched from a JSON file on the server. Here's the content of data.component.html: <div class="container"> <h1>Search history</h1> ...

htmlangularangular-material

Practical steps for programmatically adding or removing md-disable-backdrop in md-sidenav

Can the md-disable-backdrop attribute be removed from HTML? The issue arises when opening the side navigation as the md-sidenav does not have the md-disable-backdrop attribute. After making a selection from the form displayed in the side navigation, I now ...

javascripthtmlangularjsmaterial-designangular-material

`Angular 9 template directives`

I am facing an issue with my Angular template that includes a ng-template. I have attempted to insert an embedded view using ngTemplateOutlet, but I keep encountering the following error: core.js:4061 ERROR Error: ExpressionChangedAfterItHasBeenCheckedEr ...

htmlangulartypescript

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

Tips for utilizing a file name when using the move_uploaded_file function

I have a mission to produce a video and then transfer the video onto a file server. I am capable of creating the video, which is stored as a BLOB, and converting it into a file format. After that, my aim is to upload this file onto the server. The html a ...

phphtml

The upper border is missing from the middle div in the presence of three divs

I am currently working on a new project using HTML, CSS, and Bootstrap. However, I have encountered a problem. I have created a box with a border all around it, and when I hover over this box, an image appears inside of it. By default, the inside of the bo ...

htmlcssbootstrap-5

The attribute aria-required is necessary for a radio group

When creating a required radio group, how should the aria-required="true" attribute be assigned? Specifically, I have multiple <input type="radio"> elements with the same name grouped under a <fieldset>. Should the aria-required be placed o ...

htmlradio-buttonaccessibilitywai-aria

Centering Images Using CSS Floats

I've got this HTML code featuring images and titles: <div class="container"> <div class="box"><a href="#" class="catname"><img src="image1.jpg" class="thumb"><p>Title 1</p></a></div> <div class="box" ...

htmlcss

JavaScript pause until the DOM has been modified

My current situation involves using a JavaScript file to make changes to the DOM of a page by adding a navigation menu. Following this code, there is another function that further modifies the newly added navigation menu. However, I am facing an issue wher ...

javascriptjqueryhtmldom