Bootstrap 4 full width grids

Question

I can't figure out how to make the grids to extend to the container's full width no matter how many columns there are

<div class="container">
  <div class="row">
     <div class="col-md-2 first"></div>
     <div class="col-md-9 second"></div>
  </div>
</div>

In the example above are displayed 2 columns inline and the .row having full width.Yet if i remove the first div(keeping the exact same code), the second div will change its position to left and will keep the original width.I need it to stretch to the full width of the container.The reason i need this is because i'll have some php conditional expression that will prevent it from showing,in which case i want the template to change and the second div to be full width and position on the middle.

I found an answer with the following CSS which indeed worked but it also messed the responsive structure and i'll have to patch it up till no end probably:

CSS:

.row{
    display: table;
    width: 100%;
}

.first, .second{
    display: table-cell;
    float: none;
}

.second{
    width: 100%;
}

Since i'm a newbie with Bootstrap, i was wondering if there is any built in class which solves this problem? Thank you

Answer 1

In this case, just have the first div as col-2 and the second one as col.

col will be 100% width if col-2 is missing, but if it is there, col will fill the remaining columns.

Check out the Grid system documentation.

Answer 2

I'm not sure why you're using display:table. Just use Bootstrap 4 auto-layout grid, and the second will fill the width if the first is missing/hidden.

"Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it."

https://www.codeply.com/go/igkSq57Vwn

<div class="row">
     <div class="col-md-2 first"></div>
     <div class="col-md second"></div>
</div>