Bootstrap 12-grid component - SOLVED -

Using Servoy to administrate the content of your website? Discuss all webrelated Servoy topics on this forum!

Bootstrap 12-grid component - SOLVED -

Postby patrick1645350822 » Wed Aug 10, 2022 11:57 pm

Hi,

I found documentation on bootstrap: https://getbootstrap.com/docs/4.0/layou ... er-classes showing that it is possible to order the columns depending on the screen width:

Reordering
Order classes
Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

Is this supported by Servoy? I do not seem to get this working.
Last edited by patrick1645350822 on Wed Aug 17, 2022 5:23 pm, edited 1 time in total.
Greetings,

Patrick Marelis
Sileram BV
https://sileram.nl
patrick1645350822
 
Posts: 37
Joined: Sun Feb 20, 2022 11:53 am

Re: Bootstrap 12-grid component

Postby jcompagner » Thu Aug 11, 2022 9:36 am

Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8863
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Bootstrap 12-grid component - SOLVED -

Postby patrick1645350822 » Wed Aug 17, 2022 5:22 pm

Thanx,

That did the trick. I did not start the solution in the correct mode. One tip. If using order for different sizes you need to set them all:
ie set the class: col-lg-6 col-md-6 col-sm-6 col-xs-12 order-lg-1 order-md-1 order-sm-2 order-xs-2
Greetings,

Patrick Marelis
Sileram BV
https://sileram.nl
patrick1645350822
 
Posts: 37
Joined: Sun Feb 20, 2022 11:53 am

Re: Bootstrap 12-grid component - SOLVED -

Postby jcompagner1660751177 » Wed Aug 17, 2022 5:49 pm

i want to mention that the col-xs-N and also the order-xs-N are not there anymore in bootstrap 4/5
they are col-N or order-N
jcompagner1660751177
 
Posts: 1
Joined: Wed Aug 17, 2022 5:46 pm

Re: Bootstrap 12-grid component - SOLVED -

Postby patrick1645350822 » Wed Aug 17, 2022 10:58 pm

Hi,

Thanks, I checked that and you are right. Thats a pity because I wanted a different sort for the 'phone' resolution.
The solution I now made was to swap the content of the container depending on the resolution.
Greetings,

Patrick Marelis
Sileram BV
https://sileram.nl
patrick1645350822
 
Posts: 37
Joined: Sun Feb 20, 2022 11:53 am

Re: Bootstrap 12-grid component - SOLVED -

Postby jcompagner » Thu Aug 18, 2022 1:24 pm

no they didn't remove anything
they just renamed it..

"xs" always meant i think that the media breakpoint was 0px (or starting from 0)

until 576px (then sm kicks in) see: https://getbootstrap.com/docs/5.0/layout/breakpoints/

so when you use xs uust use without that prefix that is the same as using xs
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8863
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet


Return to Web Development

Who is online

Users browsing this forum: No registered users and 2 guests