Using Grid on page

#1 · May 3, 2024, 6:46 pm

I am back trying to learn VisualNeo Web by rebuilding a website that is Bootstrap based.

VisualNeo web seems to use the bootscrap library.

I would like to have a grid on a page with clickable links in different cells.

I am not sure how to get started setting up the grid.

I see 'ne0-row' but don't see where/how to use it.

#2 · May 3, 2024, 9:06 pm

@cssystems there are currently two different responsive grids available in VisualNEO Web:
BootStrap 3 based and a custom CSS Flexbox based system. You can use any of them but the second one is more modern.

For BootStrap 3:

Included sample App (look in My Documents\VisualNEO Web\Sample Apps folder):
https://visualneo.com/tutorials/responsive
Video tutorials:
https://webhelp.visualneo.com/Responsiveapps.html
https://www.youtube.com/watch?v=QjmPVwRbYIc

For CSS Flexbox (see BootStrap video tutorial first):

https://webhelp.visualneo.com/Flexboxbasedgridsystem.html
https://www.youtube.com/watch?v=CPIMaxDuJxA

I hope it helps.

Vadim has reacted to this post.

#3 · May 3, 2024, 10:04 pm

So simple now I watched the video.

Thanks so much.

#4 · May 3, 2024, 10:33 pm

Looks like a start.

Create a container and two columns but the row wants to align top and can't get it to move.

Checked alignment but says nothing about TOP.

A little more help please.

#5 · May 4, 2024, 10:15 am

@cssystems be sure to see this carefully:

https://webhelp.visualneo.com/Flexboxbasedgridsystem.html

There are also some special predefined CSS classes you can aply to any object placed in a column or even to the column itself:

https://webhelp.visualneo.com/VisualNEOCSSClasses.html

CSS classes to facilitate objects positioning in both responsive and standard designs (aply to the object itself):

neo-top-right
neo-bottom-right
neo-top-left
neo-bottom-left
neo-top-center
neo-bottom-center
neo-middle-center
neo-middle-left
neo-middle-right

CSS classes to facilitate content positioning inside objects (aply to the container):

neo-top-right-content
neo-bottom-right-content
neo-top-left-content
neo-bottom-left-content
neo-top-center-content
neo-bottom-center-content
neo-middle-center-content
neo-middle-left-content
neo-middle-right-content

Using Grid on page - Forum

Using Grid on page

For BootStrap 3:

For CSS Flexbox (see BootStrap video tutorial first):

For BootStrap 3:

For CSS Flexbox (see BootStrap video tutorial first):