Search code examples
cssbootstrap-4gridcontainerscol

Navbar and div`s "breaks" out of container-fluid in bootstrap 4

I am working with bootstrap and I am having a problem that I understand is simple and I cannot see it. The fact in question is that I have all my divs inside a container-fluid, but when testing it on a cell phone for example in a 435x600 resolution the nav-bar is half. Here is an example where I made a box at the point in question and below the code. enter image description here

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   LOGO 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  </div>
 <form class="form-inline my-2 my-lg-0 badge-log">
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 <div class="navbar-nav"></div>
 </div>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
    target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" 
   aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
      </form>
    </nav>
    <div class="container-fluid">
    <div class="row">
   <div class="col-1"></div>
  <div class="col-10">
    <table class="table">
   TABLA CONTENT
   </table>
     </div>
    <div class="col-1"></div>
  </div>
    </div>
Solution

  • The overflow issue was caused by the table. To make the tables responsive, you can wrap them with .table-responsive: https://getbootstrap.com/docs/4.5/content/tables/#always-responsive

    <div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>QTY</th>
                <th>Category</th>
            </tr>
        </thead>
    </table>
</div>

    demo: https://jsfiddle.net/davidliang2008/swr38daf/2/