Styles Grid Classes
Description
The BcGrid utility provides a flexible grid system for structuring layout using flexbox. It allows elements to be arranged into 12 columns, with configurable widths and responsive breakpoints.
Responsive Grid Classes
For responsive layouts, use classes like 'bc-col-sm-6' or 'bc-col-lg-4' to adjust column widths at different breakpoints.
Available Grid Classes
bc-grid-container
Applies a flexbox-based container that wraps columns and ensures proper spacing.
bc-col
Defines a flexible column that automatically adjusts width based on content.
bc-col-1
Applies a column spanning 1/12 of the container width.
bc-col-2
Applies a column spanning 2/12 (1/6) of the container width.
bc-col-3
Applies a column spanning 3/12 (1/4) of the container width.
bc-col-4
Applies a column spanning 4/12 (1/3) of the container width.
bc-col-5
Applies a column spanning 5/12 of the container width.
bc-col-6
Applies a column spanning 6/12 (1/2) of the container width.
bc-col-7
Applies a column spanning 7/12 of the container width.
bc-col-8
Applies a column spanning 8/12 (2/3) of the container width.
bc-col-9
Applies a column spanning 9/12 (3/4) of the container width.
bc-col-10
Applies a column spanning 10/12 (5/6) of the container width.
bc-col-11
Applies a column spanning 11/12 of the container width.
bc-col-12
Applies a column spanning the full 12/12 (100%) width of the container.