How to

Bootstrap Studio Help
1

Hello,

I am dynamically generating columns using a flask database. And want only two columns side by side max on medium to larger dispalys and one on smaller ones. Currently I have the "per-rows" setting on the row set to 2. I thought this would restrict only two columns being side by side, but as I add columns to the row three are added side by side. I added some margins to the columns but I dont want to overdo the margins because on smaller screens the display looks to smushed.

I have all column widths set to 'auto' and the columns are set to 'grow'. so that the column fill the page if there is an odd number of columns and one is left at the bottom.

My goal: I only want two columns side by side max. on smaller displays I want only one column on down.

As these columns are dynamically generated by flask...is there a way to populate them on the page with only two side by side max?

2

I believe you want to set the col setting to col-md-6 on each column. I believe this will only show 2 columns side by side when screen is at or bigger than MD setting. If the smaller screen sizes still show more cols when add to each col-12 as in (col-12 col-md-6 on each).

Saj

3

@mesand

You could also use :nth-child on the row to target the 3rd and following columns to make them full width.

@media (min-width:768px) {
  .full-width :nth-child(n + 3) {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
4

thank you, is this responsive to different sizes?