Flexbox based grid system
Since version 21.12.26 VisualNEO Web includes a complete Flexbox based responsive grid system.
This grid system is based on 12 columns, just as the original BootStrap one and three sizes: sm (small < 768px), md (medium) and lg (large >= 960px)
Be sure to configure each column for each possible size.
New CSS clasess are available in order to use it while designing your own responsive apps:
Fluid Grid
neo-row
neo-col-12
neo-row
neo-col-1
neo-col-11
neo-row
neo-col-2
neo-col-10
neo-row
neo-col-3
neo-col-9
neo-row
neo-col-4
neo-col-8
neo-row
neo-col-6
neo-col-6
Responsive Grid
neo-row
neo-col-sm-12
neo-row
neo-col-sm-12 neo-col-md-3 neo-col-lg-3
neo-col-sm-12 neo-col-md-9 neo-col-lg-9
neo-row
neo-col-sm-12 neo-col-md-4 neo-col-lg-4
neo-col-sm-12 neo-col-md-8 neo-col-lg-8
neo-row
neo-col-sm-12 neo-col-md-6 neo-col-lg-6
neo-col-sm-12 neo-col-md-6 neo-col-lg-6
Smart Columns
neo-row
neo-col-sm-12 neo-col-md-6 neo-col-lg-4
neo-col
Reverse order
Extend a row with the row-reverse class to reverse the order of the columns. For responsive use neo-row-sm-reverse, neo-row-md-reverse or neo-row-lg-reverse.
neo-row neo-row-reverse
neo-col-4
neo-col-4
neo-col-4
Align left
Extend a row with the neo-row-left class to align the columns to the left. For responsive use neo-row-sm-left, neo-row-md-left or neo-row-lg-left.
neo-row neo-row-left
neo-col-2
neo-col-3
neo-col-2
Align right
Extend a row with the neo-row-right class to align the columns to the right. For responsive use neo-row-sm-right, neo-row-md-right or neo-row-lg-right.
neo-row neo-row-right
neo-col-2
neo-col-3
neo-col-2
Align center
Extend a row with the neo-row-center class to align the columns to the center. For responsive use neo-row-sm-center, neo-row-md-center or neo-row-lg-center.
neo-row neo-row-center
neo-col-2
neo-col-3
neo-col-2
Space between
Extend a row with the neo-row-space-between class to distribute the columns evenly in the line. The first column will be aligned to the left and the last column to the right. For responsive use neo-row-sm-space-between, neo-row-md-space-between or neo-row-lg-space-between.
neo-row neo-row-space-between
neo-col-2
neo-col-3
neo-col-2
Space around
Extend a row with the neo-row-space-around class to distribute the columns evenly in the line. The columns will have equal space between them. The space at the begin and the end of the line will be half of the space between the columns. For responsive use neo-row-sm-space-between, neo-row-md-space-between or neo-row-lg-space-between.
neo-row neo-row-space-around
neo-col-2
neo-col-3
neo-col-2
Individual height align top
neo-row neo-row-top
neo-col-4
neo-col-4
neo-col-4
Individual height align center
neo-row neo-row-middle
neo-col-4
neo-col-4
neo-col-4
Individual height align bottom
neo-row neo-row-bottom
neo-col-4
neo-col-4
neo-col-4
Individual height align lingle column
neo-row neo-row-top
neo-col-3 neo-col-bottom
neo-col-3
neo-col-3 neo-col-top
neo-col-3 neo-col-middle
Equal column height
neo-row neo-row-equal
neo-col-4
neo-col-4
neo-col-4
Hide column for current breakpoint
neo-row
neo-col-4 neo-hide-sm
neo-col-4 neo-hide-md
neo-col-4 neo-hide-lg
Nested grids
The Flex Grid is nestable. Every nested grid needs the neo-grid container.
neo-row neo-row-equal
neo-col-6
neo-grid
neo-row neo-row-equal
neo-col-6
neo-col-6
neo-row neo-row-equal
neo-col-3
neo-col-9
neo-col-6
neo-grid
neo-row
neo-col-4
neo-col-8
neo-row
neo-col-7
neo-col-5
Created with the Personal Edition of HelpNDoc: Maximize Your Productivity with a Help Authoring Tool