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