CODEWITHSUNDEEP
htmlcssbootstrap-4
Petru Lebada
Petru Lebada

Reputation: 1682

Bootstrap 4 full width grids

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

Upvotes: 3

Views: 15631

Answers (3)

mahdia abbasi
mahdia abbasi

Reputation: 1

i have same problem . and you can fix it by set (margin : 0px) for row (by style attribute or id in css file) and set (padding : 0px) for col (by style attribute or id in css file)

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362820

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>

Upvotes: 2

Phiter
Phiter

Reputation: 14967

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.

Upvotes: 6

Related Questions