The settings for the Bootstrap Grid format in Views only has options for col-xs, col-sm, and col-md.

col-lg and col-xl are missing and the col-lg takes the default full-width class (col-lg-12) and this value can't be controlled from the UI.

The patch from this issue should display the missing configurations in the form settings.

The Idea we should stop think in Bootstrap 3 and think and style with Bootstrap 4
http://upgrade-bootstrap.bootply.com/

It is better to make the change in all CSS, TWIG, and yml configs with logical code too.
Thinking in Bootstrap 4 and how we could have a full migration of old lead developers

Migrating to v4
https://getbootstrap.com/docs/4.1/migration/

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 vs Bootstrap 3

In Varbase Media we had mapped old Bootstrap 3 into Bootstrap 4

Switched BS3 XS max ( < 768px) to BS4 SM max ( <767.98px)

Switched BS3 SM min ( >=768px) to BS4 MD min ( >=768px)

Switched BS3 MD min ( >=992px) to BS4 LG min ( >=992px)

Switched BS3 LG min ( >=1200px) to BS4 XL min ( >=1200px)

Varbase Media Mapping Bootstrap 3 into Bootstrap 4 -- Switched XS max ( < 768px) to SM max (<767.98px)

Bootstrap 3 Breakpoints

Bootstrap 3 Breakpoints

Bootstrap 4 Breakpoints

Bootstrap 4 Breakpoints

Shifted Bootstrap 4 Breakpoints

Shifted Bootstrap 4 Breakpoints

CommentFileSizeAuthor
#14 Varbase Blog - with better logic from views bootstrap - Content dev varbase7c.png208.88 KBRajab Natshah
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Muath Khraisat created an issue. See original summary.

Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Assigned: Unassigned » Mohammed J. Razem
Issue tags: +varbase-8.7.2
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Assigned: Mohammed J. Razem » Unassigned
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Status: Needs review » Fixed
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Status: Fixed » Needs work
Related issues: +#3049311: Grids should not be split into multiple rows

Switching to use the better solution from #3049311: Grids should not be split into multiple rows

Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Title: Add the 3059241-4.patch for [Views Bootstrap] module to fix missing col-lg and col-xl in bootstrap grid format settings » Add the 3049311-9.patch for [Views Bootstrap] module to fix missing col-lg and col-xl in bootstrap grid format settings
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Title: Add the 3049311-9.patch for [Views Bootstrap] module to fix missing col-lg and col-xl in bootstrap grid format settings » Add the 3049311-9.patch for [Views Bootstrap] module to fix missing col-lg and col-xl in bootstrap grid format settings and grids should not be split into multiple rows

  • RajabNatshah committed c25ad3e on 8.x-7.x 
    Issue #3085141 by RajabNatshah, Muath Khraisat: Add the 3049311-9.patch...
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Assigned: Unassigned » Mohammed J. Razem
Status: Needs work » Needs review
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Assigned: Mohammed J. Razem » Unassigned
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Issue summary: View changes
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Issue summary: View changes
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
FileSize
Varbase Blog - with better logic from views bootstrap - Content dev varbase7c.png208.88 KB

This will follow work on the Varbase Blog views to have the following:
#3086223: Change [Varbase Blog] views for blog listing to work with the better logic for Bootstrap 4

      style:
        type: views_bootstrap_grid
        options:
          row_class: px-md-0
          default_row_class: true
          uses_fields: false
          col_xs: none
          col_sm: col-sm-12
          col_md: col-md-4
          col_lg: col-lg-4
          col_xl: col-xl-4

Varbase Blog after the change of logic patch in Views Bootstrap

Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Assigned: Unassigned » Mohammed J. Razem
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Assigned: Mohammed J. Razem » Unassigned
Rajab Natshah’s picture

Rajab Natshah CreditAttribution: Rajab Natshah at Vardot commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

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