-1

I have simple code example on codepen but here is the markup for convinience:

<div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-2 my-col">One of three columns</div>
    <div class="col-5 my-col">One of three columns</div>
    <div class="col-5 my-col">One of three columns</div>
  </div>
</div>

And some custom css:

.my-row {
  justify-content: stretch;
}

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
  align-self: stretch;
}

With larger screen width I get this which is fine: enter image description here

But when I set small sizes, eg. instead of resizing browser window you can my-container width to 150px just to demonstrate what happens

.my-container {
  width: 150px;
}

Then items wrap and I get following result: enter image description here

How can I make wrapped items to fill the rest of the width?

mlst
  • 2,688
  • 7
  • 27
  • 57
  • don't make your container 150px wide - if you do then you need to increase the size of your cols - col 2 means a sixth of 150px which is why your col is so narrow and the text overflows – Pete Sep 09 '19 at 11:13
  • and remove align-self: stretch; – Dimitris Sep 09 '19 at 11:13
  • I made it 150px wide just to demonstrate what happens at small widths because you can't resize codepen viewpor that low. – mlst Sep 09 '19 at 11:16
  • then use the responsive classes to make the col resize depending on browser size: eg try `col-sm-6 col-lg-2 my-col` and remove the stretch and width of the container then resize your browser – Pete Sep 09 '19 at 11:17
  • @Dimitris removing align-self: stretch doesn't seem to have any effect – mlst Sep 09 '19 at 11:17
  • read this section: https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content – Pete Sep 09 '19 at 11:21
  • You just need to add class "flex-nowrap" with "row m-row" class. – Prakash Rajotiya Sep 10 '19 at 07:16

3 Answers3

1

I guess you should use the bootstrap breakpoints see here under Grid options.

So if you want them to be full width of your container use col-12.

 <div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-12 col-sm-2">One of three columns</div>
    <div class="col-12 col-sm-5">One of three columns</div>
    <div class="col-12 col-5">One of three columns</div>
  </div>
</div>
J1n
  • 71
  • 5
  • this will indeed stretch the last item when it gets wrapped for small widths, but for large widths it will stay in the wrapped row and not move to the first row where there is enough space to accommodate it – mlst Sep 09 '19 at 12:38
  • thats because i missed to set col-12 col-sm-5 and the last div in the row – J1n Sep 10 '19 at 07:06
1

just add white-space: nowrap;

.my-row {
  justify-content: stretch;
  white-space: nowrap;
}

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
  align-self: stretch;
  white-space: nowrap;
}
Marvin Villaver
  • 11
  • 2
0

you can use .col-md-* or .col-sm-* classes for the full width content in small devices instead of .col classes. show snippet in full width and make it resize.

.my-row {
  justify-content: stretch;
}

.my-col {
  background: yellowgreen;
  border: 1px gray solid;
  align-self: stretch;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
<div class="container my-container">
  <div class="row m-row justify-content-between">
    <div class="col-md-2 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
    <div class="col-md-5 my-col">One of three columns</div>
  </div>
</div>

NOTE: your .col-**-* class width can't change if you change in .container width you have to change it manually.

Thank You...

KuldipKoradia
  • 3,005
  • 7
  • 20