Skip to main content
Ozzy_UX
Ozzy_UX
New Participant
March 30, 2022
Answered

Does the Bootstrap grid user an 8pt spacing system or not?

  • March 30, 2022
  • 1 reply
  • 453 views

I have been trying to set up a Bootstrap grid in an artboard with the following specs 1440x1024, but I've seen different approaches to setting it up.

 

On the Bootstrap site, it tells you to use the following specs:
1. Gutter width of 30px (15px on each side of a column) > Which do not fall under the 4 or 8pts system.

 

Tutorials:

2. Most tutorials make it by following the 8pt spacing system. If you go this way, you see a weird column of numbers.

 

Can someone tell which of the approaches to implement this in XD is correct, or if it is ok to break the rules (odd column numbers) and still call it Bootstrap grid?

This topic has been closed for replies.
Correct answer Spas K.

Not sure where bootstrap mentions 15px / 30px gutters. The example they give is with 1.5rem, which is 24px (on a 16px base font size) like in your example. (Edit: I saw that v4 uses 15/30px, and v5 uses .75/1.5rem) The default bootstrap grid is with 12 columns. This can be modified, along with all other bootstrap defaults, but it depends on whether you want to bother with it.

You could simplify it and make it a 4 column grid, grouping each 3 columns, and keeping the gutters. The devs will then use col-3 class to indicate that the element is 25% of the total, col-6 for 50% and so on.

 

If your main layout width is @ 1140px (bootstrap xl container width), and your artboard is 1440px wide, then you have exactly 150px on both sides as the margins, and with you gutter set to 24px, Xd will calculate the size of your columns, which in your case is 73px. Bootstrap is the same. In Bootstrap the column widths are also not defined in pixels, only in %s, which does not always amount to round values, especially between breakpoints.

 

I think as long as you use close values, it will be fine. I like round or at least even numbers and a few pixels difference when the website is later developed with bootstrap isn't a big deal. Also, bootstrap's default values can be changed, although few devs like to bother 🙂

1 reply

Spas K.
Spas K.Correct answer
Adobe Expert
March 31, 2022

Not sure where bootstrap mentions 15px / 30px gutters. The example they give is with 1.5rem, which is 24px (on a 16px base font size) like in your example. (Edit: I saw that v4 uses 15/30px, and v5 uses .75/1.5rem) The default bootstrap grid is with 12 columns. This can be modified, along with all other bootstrap defaults, but it depends on whether you want to bother with it.

You could simplify it and make it a 4 column grid, grouping each 3 columns, and keeping the gutters. The devs will then use col-3 class to indicate that the element is 25% of the total, col-6 for 50% and so on.

 

If your main layout width is @ 1140px (bootstrap xl container width), and your artboard is 1440px wide, then you have exactly 150px on both sides as the margins, and with you gutter set to 24px, Xd will calculate the size of your columns, which in your case is 73px. Bootstrap is the same. In Bootstrap the column widths are also not defined in pixels, only in %s, which does not always amount to round values, especially between breakpoints.

 

I think as long as you use close values, it will be fine. I like round or at least even numbers and a few pixels difference when the website is later developed with bootstrap isn't a big deal. Also, bootstrap's default values can be changed, although few devs like to bother 🙂

    Ozzy_UX
    Ozzy_UXAuthor
    New Participant
    March 31, 2022

    Very well explained Spas! Thank you!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices