Uploaded image for project: 'OpenShift Virtualization'
  1. OpenShift Virtualization
  2. CNV-63471

Replace Bootstrap Grid CSS with PatternFly grid

XMLWordPrintable

    • Replace Bootstrap Grid CSS with PatternFly grid
    • Future Sustainability
    • False
    • Hide

      None

      Show
      None
    • False
    • CNV v4.20.0.rhel9-59
    • Green
    • Done
    • 0% To Do, 0% In Progress, 100% Done
    • Hide

      2025-08-04:
      DONE...

      Show
      2025-08-04: DONE...

      Replace Bootstrap Grid CSS with PatternFly grid in kubevirt, nmstate and networking. 

      In OpenShift 4.20, we plan to remove the Bootstrap Grid CSS from console (jira: CONSOLE-4550). Please check your dynamic plugins to see if you're using these classes, and replace them with PatternFly grid as needed. Here are some notes from when I did this transition in console: * I did a global search with the regex col-[a-z][a-z] to search for the presence of bootstrap columns in the console repo for migration

      • You will likely want the hasGutter prop in your <Grid> element to emulate the column gutters in the BS CSS.
      • The .clearfix class was removed and no longer does anything
      • By default GridItem spans 12 columns, so col-xs-12 is no longer necessary
      • Replace col-[a-z][a-z](pull|push)[0-9][0-9]? with the order prop in the PF GridItem compoennt
      • Replace col-[a-z][a-z]offset[0-9][0-9]? with the offsetsmOffset, ..., xl2Offset in the PF GridItem component
      • In some cases, the usage of Grid would not be best practice (for example, the Form component would be better suited for form layouts)

      PS: Please also take a look at the other CSS in the ancillary folder, and remove usage of any of these ancillary classes or styles as well (e.g., the (visible|hidden)-(xs|sm|md|lg) classes, which can be replaced by the PF Display utility classes).We want to aim for a pure PatternFly implementation of console, so these styles will also likely be removed in the future

              mschatzm@redhat.com Matan Schatzman
              rh-ee-aviktora Adam Viktora
              Guohua Ouyang Guohua Ouyang
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: