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

User interface changes

Edge to Edge Background + Full Content + Gutters

API changes

None

Data model changes

None

Comments

RajabNatshah created an issue. See original summary.

Rajab Natshah’s picture

Issue summary: View changes

  • RajabNatshah committed 6061ea3 on 9.0.x
    Issue #3201146: Backport .gx- to Vartheme BS4 from Bootstrap 5 to be...
Rajab Natshah’s picture

Assigned: Rajab Natshah » Mohammed J. Razem
Status: Active » Needs review
Issue tags: +varbase-9.0.0-rc2, +varbase-9.0.0
Rajab Natshah’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.