Issue with Column Toolbar settings

Bootstrap Studio Help
1

Hello,

I am having problems with Column Toolbar settings. I have a two column row and want the columns side by side in desktop view but stacked one on to of the other in mobile view. There are instructions in the documentation for applying different settings via the options to different grid breakpoints, but when applied to one breakpoint, The change is applied to all the breakpoints. The same happens if the column helper/clearfix is applied to the mobile breakpoint in options - all breakpoints are affected. Is the options panel broken or am I missing something? Hopefully someone can advise.

2

Just in case you have applied other classes to the row or columns, I’d suggest deleting them and trying this.

  1. Add a new Row to the page.
  2. Select the Row, and add two columns.
  3. With the Row still selected, open the Options panel from the right hand side of the canvas.
  4. Find the Per Row option, and from the drop-down choose 1.
  5. Then click on the :play_button: symbol next to the drop-down and from LG, choose 2

This will make the Row fit two columns on mobile, up to the LG breakpoint. And have two columns across from LG upwards.

2 Likes
3

Perfect, that resolves the issue. Thank you so much for your reply.

4

Glad to help, you’ll find all the nifty options for layouts in the options panel.

Also try selecting a column and viewing the options, you can shift them around and change their order on different screen sizes.

Just remember you sadly can’t use the per row option on columns with different widths. That’s a bit more complicated.

1 Like