How do I manage site margins and columns gutter?

Hi all!
I’m designing a full-page website (I’m just setting au a very large width) and I was wondering how I do:

  1. Manage the site external margins (in px)
  2. Manage the width of the gutter between the columns (the space between each column, in px)

I’d like to control these values at each breakpoint.

Any help will be very appreciated :slight_smile:
Gio

I’d say that’s possible in general, but will require some work to do so.

Bootstrap is based on a 12-column grid layout (you can see that when you press g in design mode). You can adjust the width, that those 12 columns will use (standard is 1140px) in the project settings. You can also force columns to use 1 to 12 grids, depending on the breakpoint. You can even use the class no-gutters on the row to remove all gutters between all columns in a row, and then use single classes to apply left / right margin on each column at each breakpoint. But that’ll require to adjust the grids each column uses on each breakpoint also, which makes it quite a cumbersome process.

Not sure if there’s an easier solution to this or if what you intend to do is at all doable with blocs. I’m not the most savvy one when it comes to bootstrap classes :wink: Maybe there’s a way and someone else knows better.

PS: I just discovered in the Bootstrap Documentation that you can use the classes p-1 to p-5 and m-1 to m-5 to adjust the padding and margin on single columns. Those classes will add padding or margin to all 4 sides though, but you can’t change the for specific breakpoints within blocs. There might be ways to accomplish what you seek with Bootstrap 5.

1 Like

Thank you! :slight_smile: