Boostrap container overflow and not responsive (always displayed two columns) - css

Question

I have created a form with two columns. But when I decrease the browser width, two columns are preserved even when their content overflows. I have tried to change the code to plain DIV with container class, specify cols count, set width but it resists.
Here is the codepen: https://codesandbox.io/s/stoic-goldberg-4ugt6
and the source code of the parent container:
<div class="container flex-wrap pt-3 w-75 ml-auto mr-auto mt-auto mb-5">
<div class="row">
<div class="col">
<b-card>
<SeriesForm />
</b-card>
</div>
<div class="col">
<b-card :header="captions[1]">
<SeriesForm :group="forms[1]" />
</b-card>
</div>
</div>
<div class="row">
<div class="col text-center p-4">
<b-button>Analyse</b-button>
</div>
</div>
</div>
How can I make it two columns when there is enough space and single column otherwise?

Answer 1

U can try class like col-sm-6 or col-xs-6 or col-md-6 or col-lg-6 according to your need.
<div class="container flex-wrap pt-3 w-75 ml-auto mr-auto mt-auto mb-5">
<div class="row">
<div class="col-sm-6">
<b-card>
<SeriesForm />
</b-card>
</div>
<div class="col-sm-6">
<b-card :header="captions[1]">
<SeriesForm :group="forms[1]" />
</b-card>
</div>
</div>
<div class="row">
<div class="col text-center p-4">
<b-button>Analyse</b-button>
</div>
</div>
</div>

Answer 2

The issue isn't with the bootstrap grid itself, the issue is with how your checkboxes are displayed.
You're defining in the .align-nicely class, that your checkbox group must always be 3 columns.
display: grid isn't that smart. So if you tell it to be 3 columns, it will be 3 columns and ignore everything else. This is why your content is overflowing.
So to fix the issue or improve it at least. You have to change how the display: grid columns are handled.
One method would be to use CSS #media queries, to define how many columns there should be at a given screen width. This way you can scale them down as the screen gets smaller.
The below CSS should work if you use <b-col xl='6'> with your current text.
.align-nicely {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
#media screen and (max-width: 1350px) {
.align-nicely {
grid-template-columns: 1fr 1fr;
}
}
#media screen and (max-width: 576px) {
.align-nicely {
grid-template-columns: 1fr;
}
}
Another solution could be to use the repeat() function combined with minmax().
This option will be a lot more dynamic than the first one, but will break the alignment across your different groups.
.align-nicely {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 10px;
/*
The 110px inside minmax(), is how small each column is allowed to get.
So if there isn't space on the current row for the column to be over 110px,
it will be moved to a new row. So you will need to adjust this based on your content size.
*/
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

Answer 3

This is happening because of the flex display,
what you need to do is set the columns with below your row for each form :
use this <div class='col-12 col-xl-6'> instead of <div class='col'> .. the spacing is a little bit tight so you might need to remove some of the margins and paddings
this will make each form take full width on big screens and below and will make them 50% width on xl screens

Answer 4

I have added attribute to your tags
If you will expand the screen then u will get the initial format.