Newbe Dev Stack

Answer : It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content. Bootstrap 4 Sidebar switch to Top Navbar on mobile <div class="container-fluid h-100"> <div class="row h-100"> <aside class="col-12 col-md-2 p-0 bg-dark"> <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start"> <div class="collapse navbar-collapse"> <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between"> <li class="nav-item"> <a class="nav-link pl-0" href="#">Link</a> </li> .. </ul> </div> </nav> </aside...

Answer : This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4... The Bootstrap 3 "height problem" occurs because the columns use float:left . When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights , the correct behavior is to stack them to the closest side. Note : The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row . For readers that don't understand why there would ever be more than 12 cols in a row , or think the solution is to "use separate rows" should read this first There are a few ways to fix this.. (updated for 2018) 1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number...

Answer : just simply use as below and it will word wrap any long text within a table . No need to anything else <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> So you can use the following : td { white-space: normal !important; // To consider whitespace. } If this doesn't work: td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it - was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below - but I found you will need to adjust it for the table in question - since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing - is because it removes the wrapping constraints to get a full table for the scrollbars. THe...