Dreamweaver / Bootstrap grid breaks from 4 columns to 1 column

[Garry Maclean]

iMac Ventura 13.2

Dreamweaver C.C.

Bootstrap 4.4.1

Hi folks,

I currently have my web rows set to  .  .  .  

class="col-lg-4">

I have 4 fluid columns which reduce in size as the site narrows but when they reach a "mid point" they break from 4 columns to 1 column.

Is it a relatively easy fix to get things to go from 4 columns to 2 columns to 1 column instead of jumping from 4 to 1  ?

I'm not really very technically minded so hopefully this is not beyond my understanding

Any advice and assistance greatly appreciated.

Kind regards, Garry.

[Ben M]

Yes. You need additional classes as you have only defined the col-lg-4. So there are no breakpoints for anything smaller than lg ( https://getbootstrap.com/docs/5.3/layout/breakpoints/ ). If you add a breakpoint col-md-2, col-sm-1, you will get the desired output.

[Nancy OShea]

In the latest version of Bootstrap 5x, you don't need much in the way of classes. This will naturally break from four to two to one col on medium & small devices.

<div class="container">

<div class="row">

<div class="col">Something here...</div>

<div class="col">Something here...</div>

<div class="col">Something here...</div>

<div class="col">Something here...</div>

<!--end row--></div>
<!--end container--></div>

In earlier version 4x, it's a little more complicated. There are specific classes for x-lg, lg, md, sm & x-sm devices. The values should always add up to 12 box grids.

6 x 2 = 12 (two columns). 

3 x 4 = 12 (four columns). 

12 x 1 = 12 (one column, default).

<div class="container">

<div class="row">

<div class="col-md-6 col-lg-3">Something here...</div>

<div class="col-md-6 col-lg-3">Something here...</div>

<div class="col-md-6 col-lg-3">Something here...</div>

<div class="col-md-6 col-lg-3">Something here...</div>

<!--end row--></div>

<!--end container--></div>

 Hope that helps rather than confuse.

[Garry Maclean]

As always folks many many thanks for you assistance, your replies led me down the correct path to solve my dilemma.

When I first “converted/switched" my old site into a Bootstrap site ~ although I have no recollections as to why I made this decision ~ I took the decision to customise it and create it as a 16 grid system.

Really not got a scooby why.

Anyhow the solution in my case was  .  .  .

<div class="container">

<div class="row">

<div class="col-lg-4 col-md-8">

<div class="col-lg-4 col-md-8">

<div class="col-lg-4 col-md-8”>å

<div class="col-lg-4 col-md-8">

<!--end row--></div>
<!--end container--></div>

My next challenge is to incorporate an interactive Mapbox map into the website.

‘He who is not willing to risk going beyond his limits should not complain about the mediocrity of his existence.’

Many thanks to all once again.

[Nancy OShea]

I took the decision to customise it [Bootstrap's 12-box grid] and create it as a 16 grid system.

By @Garry Maclean

=========

That would massively mess me up.  Just b/c you CAN, doesn't mean you should. 🤔

Good luck.