grid columns wrap after upgrading to bootstrap 4 - html

Question

I have a table like display made using the bootstrap grid classes.
The body rows of which are populated dynamically with javascript.
The table is hidden or shown depending upon the state of the application.
I have a div with an id which contains a row for the header columns and another div with another id to hold the body rows like this:
<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 this works fine. In 4 every col is on a new line when they should be in-line.
If I remove the wrapping divs such as the myListOutput and myDynamicList the layout is corret. Cols side by side filling the comlete row and each row on a new line.
I need the wrapping divs in order to get a hook in the DOM to append my child elements to but this throws the layout
How should this be done in bootstrap 4.

Answer 1

why don't you wrap each line of the table body (inside the div with id="myListOutput") with a div that has a 'row' class and set 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

The way I got it to work in the end was to add another set of row and col classes like this...
<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>