Row-Fluid and Span classes

The row-fluid and span classes are old Sitecore CSS classes that help define rows and columns on the page. Bootstrap 5 instead uses row and col classes to define layout. The advantage to Bootstrap’s CSS library is that you no longer need to define a new <div> for each row.

These classes can be changed quickly by doing a find/replace of "row-fluid" for "row" and "spanX" for "col-X" within a text editor. However, we recommend that you update the CSS to take advantage of Bootstrap’s responsive styles.

The example below shows how the Sitecore row-fluid and span classes would create a 2x2 grid and how you can replace them with Bootstrap 5 CSS.

row-fluid and span classes

  • The width of the column is defined by the number appended at the end. This is set within a 12 column grid. Two col-6 classes display as a two column layout. Three col-4 classes would display as a three column layout.
  • This set-up will reflow for different screen sizes but isn’t as responsive as the next option. Use this for a quick fix only.

New responsive layout classes

NOTES

  • Within Bootstrap 5, it’s better to define the column widths using the row-cols class. 
  • This allows you to define how many columns appear per row based on the display size of the screen.
  • row-cols-1 sets the default display as a single column. 
  • row-cols-md-2 sets the display as a two-column layout for medium screen sizes and above.
  • If you wanted more columns per row on larger screens you could add classes such as row-cols-lg-3.
  • g-4 sets the gutter space between columns and rows as 1.5 rems.
  • With this setup you can add as many new columns as you want and Bootstrap will reflow the content to the appropriate number of columns and rows based on the display size.
  • The extra div around the paragraph bounds the column content so that the gutter (g-4) classes work as expected.

Column Documentation: https://getbootstrap.com/docs/5.0/layout/grid/#row-columns

Display Size Documentation: https://getbootstrap.com/docs/5.0/layout/breakpoints/

This change can be made and published before August 3.