0

I'm using Bootstrap 4. I have a flex layout like

.larger {
  background: blue;
}

.smaller {
  background: red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col larger"> larger column </div>
  <div class="col-3 smaller"> smaller column </div>
</div>

Now when I resize the window to a very small width, the second column is displayed in a new line, all by itself. That's fine. However, it is still displayed in only a fraction of the line's width. That's bad. If there is a linebreak, I would like to have the divs fill the available size. How can I do that?

Yong
  • 1,622
  • 1
  • 4
  • 29
Felix Dombek
  • 13,664
  • 17
  • 79
  • 131

4 Answers4

1

Kindly use this code

<div class="row">
  <div class="col"> larger column </div>
  <div class="col-12 col-md-3"> smaller column </div>
</div>

.col-md-3 takes a third of the screen on tablets and larger screens but on small screens it has no effect.

ruleboy21
  • 5,510
  • 4
  • 17
  • 34
1

Follow the grid options.

Each row is made up of 12 columns. If you want the second element to take up 3 columns on small screen and above (~576px), but all 12 columns on less than that, the classes to use would be col-12 col-sm-3.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col"> larger column </div>
  <div class="col-12 col-sm-3"> smaller column </div>
</div>
J. Titus
  • 9,535
  • 1
  • 32
  • 45
  • Ah, that makes sense. If I don't specify any display size, what is the default, when does it break? – Felix Dombek Jan 31 '22 at 02:02
  • Breakpoint information can be found [here](https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints). You need to specify a column size in order for it to break. – J. Titus Jan 31 '22 at 02:06
  • The problem is, this only reacts to screen size, not available width. For example, I have a collapsible sidebar which changes the width available to the main content, but specifying col-sm-3 is too small when the sidebar is there and kind of ok when it is not, -md- the other way around. – Felix Dombek Jan 31 '22 at 02:09
  • That's the problem with using a menu that affects the flow of the page content. You may need to do something like change the classes on those elements when the menu is open vs closed (with JavaScript). Alternatively, you may want to make the side menu pull out on top of the content (with absolute positioning and z-index), or push the content to the right and set `overflow-x: hidden` on the parent container so you don't get a horizontal scroll bar. Just a couple options to think about. Both would require media queries so you can still use the menu normally when you have enough screen space. – J. Titus Jan 31 '22 at 02:21
  • Too bad Bootstrap makes it so difficult; these options are unfortunately not viable because the sidebar usually needs to be visible, so it can't obscure elements. Just when it's removed I would like to have the rest of the page use that space intelligently. – Felix Dombek Jan 31 '22 at 02:31
1

Since you've added a css tag, here's a pure CSS alternative solution:

.container{
  display: flex;
  flex-wrap: wrap;
}

.larger {
  background: blue;
  flex: 1;
  width: 100%;
  min-width: 75%;
}

.smaller {
  background: red;
  flex: 1;
}
<div class="container">
  <div class="larger"> larger column </div>
  <div class="smaller"> smaller column </div>
</div>

What I've done here is use flexbox to make use of flex-wrap for wrapping and flex-grow to make them grow to whatever space is available. Then lastly, using min-width to set the larger column to 3/4th of the row. If you're interested in flexbox and how it works, more on it here.

Yong
  • 1,622
  • 1
  • 4
  • 29
  • I think this actually works the way I need it. Should the `flex: 1` be `flex-grow: 1`? – Felix Dombek Jan 31 '22 at 02:13
  • Yep, `flex: 1;` is shorthand for `flex-grow: 1;`. – Yong Jan 31 '22 at 02:21
  • This works just like a charm. If no other "bootstrap-native" answer gets this solved, I'll accept this :) – Felix Dombek Jan 31 '22 at 02:41
  • @FelixDombek flex:1 is not shorthand for flex-grow, it's the shorthand for flex-basis/flex-shrink/flex-grow (it's not equivalent to flex-grow) – Temani Afif Jan 31 '22 at 08:26
  • `flex` is `flex: flex-grow flex-shrink flex-basis`, it's default values are: `flex: 0 1 auto;`. `flex: 1;` is modifying `flex-grow` and giving it a value of `1`. So yes, it's not the shorthand for `flex-grow`, but, it isn't really wrong to call it that, no? – Yong Jan 31 '22 at 08:31
  • Together with the Bootstrap grid I didn't even have to set that. Just the width/min-width was needed to get the desired effect. – Felix Dombek Jan 31 '22 at 12:40
  • 1
    flex:1 set flex-basis to 0 which makes a difference (https://stackoverflow.com/a/45772102/8620333) – Temani Afif Jan 31 '22 at 12:46
1

You are not obliged to use the row/col system:

div {
  outline:1px solid red
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="d-flex flex-wrap">
  <div class="w-75 flex-grow-1"> larger column </div>
  <div class="flex-fill"> smaller column </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415