Problem/Motivation
#3199224: Fix Container type and Gutters layouts rendering
#3201141: Change .px-4 to use the right .gx-* CSS class from Bootstrap 5 to be used with Bootstrap 4 using the gutter size in px, not in rem to be inline with Bootstrap 4
Bootstrap 5 Horizontal gutters
https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters
.gx-*
classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we’ve increased the padding with.px-4
:
Steps to reproduce
Proposed resolution
- Change .px-4 to use the right .gx-* CSS class from Bootstrap 5 to be used with Bootstrap 4
Proposed by Razem
- Use the gutter size for .gx-* in px, not in rem to be inline with Bootstrap 4
Remaining tasks
- Backport
.gx-
to Vartheme BS4 from Bootstrap 5 to be used with Bootstrap 4 using the gutter size in px, not in rem to be inline with Bootstrap 4 - #3201141: Change .px-4 to use the right .gx-* CSS class from Bootstrap 5 to be used with Bootstrap 4 using the gutter size in px, not in rem to be inline with Bootstrap 4
User interface changes
Edge to Edge Background + Full Content + Gutters
API changes
None
Data model changes
None
Comments
Comment #2
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #4
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #5
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commented#3201602: Switch definition class for the Layout Builder provider from Bootstrap Layout class to Varbase Layout Builder Bootstrap Layout class
Comment #6
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commented