0

I'm working on updating a site with lots of existing pages that I'm not looking to alter the markup on that was based on Bootstrap 3. I'm building the new template with Bootstrap 4 and I've run across an idiosyncrasy that causes the columns to collapse in Bootstrap 4 because it's missing a row class.

The fix is simply adding a row class to id="bottom"(or adding another wrapper), but editing all these pages isn't feasible, nor can I assume the code to be the same from one page to another to hook any JS fix into it. How do I get the Bootstrap 3 nested row behavior to work in Bootstrap 4? Is it some incompatibility between the old grid and the flexbox grid?

<main class="main-container">    
    <div class="container page-container">
        <div id="content" class="row row-with-vspace site-content">
            <div class="col-md-12 content-area" id="main-column">
                <main id="main" class="site-main" role="main">
                    <div id="bottom">
                        <h1>12 column</h1>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                        <div class="col-md-8">
                            <h4>8 column</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                        </div>
                        <!--.col-md-8 -->
                        <aside class="col-md-4 menu list-group">
                            <div class="list-group-item">
                                <h4>4 column that bumps out</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                            </div>
                        </aside>
                        <div class="col-md-12">
                            <h2>12 column</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                        </div>
                        <div class="col-md-6">
                            <h3>6 column</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet. </p>
                        </div>
                        <!--.col-md-6 -->
                        <div class="col-md-6">
                            <h3>6 column that bumps out</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet.  </p>
                        </div>
                        <!--.col-md-6 -->
                    </div>
                    <!--.col-md-12 -->
                    <div class="profile col-md-12">
                        <h3>12 column</h3>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sem in risus tincidunt aliquam sed nec massa. In dictum dolor libero, in convallis ligula porta sit amet. </p>
                    </div>
            </main></div></div></div></main>

I've put together working examples of the problem on jsfiddle

Bootstrap 3 with columns functioning https://jsfiddle.net/slideaway/u42h61fa/1/

Bootstrap 4 that won't properly display columns https://jsfiddle.net/slideaway/d1nj260c

jbwharris
  • 710
  • 1
  • 10
  • 30
  • "columns must be the immediate children of row" https://getbootstrap.com/docs/4.3/layout/grid/#nesting .. for Bootstrap 4 col depends on row – Carol Skelly May 28 '19 at 15:08
  • But clearly they didn't need to be previously in Bootstrap 3. Same code, different grid behavior. – jbwharris May 28 '19 at 15:11
  • 1
    Please see: https://stackoverflow.com/questions/22053195/bootstrap-rows-and-columns-do-i-need-to-use-row/22053352#22053352 Yes, the grid is different in 4.x because the row is the flexbox parent, and the columns behavior is dependent on the parent. The row was also needed in 3.x but for different reasons. Also content shouldn't be placed directly in the row.. this will cause other problems. Only columns should be placed inside row. – Carol Skelly May 28 '19 at 15:12
  • Thanks for the info. I won't speak for the formatting of the code above, it is what it is, hence why I'm trying to find some way around this issue. – jbwharris May 28 '19 at 15:21

0 Answers0