CSS to use Responsive BootStrap

#1 · April 3, 2021, 6:17 pm

After many test I have finally found the way to work with BootStrap responsive designs within VisualNEO Web. Just use normal Bootstrap columns classes in Containers located within another Container using row class. To get responsiveness leave "width" property empty in all Containers and add this CSS to Project > Properties > Styles

/*Dynamic app size*/
.neobody, .neopage{
      width:100%;
      height:100%;
      margin-top:0px;
      max-width:1200px;
}
.neopage{
      overflow:visible!important;
}

/*Bootstrap container*/
.container{
  position:relative!important;
  min-height:30px;
  width:100%!important;
  height:auto!important;
  top:auto!important;
  left:auto!important;
}

/*Bootstrap row*/
.row{
  position:relative!important;
  min-height:30px;
  width:100%!important;
  height:auto!important;
  top:auto!important;
  left:auto!important;
  padding:10px;
}

/*Bootstrap columns*/
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{
  position:relative!important;
  min-height:30px;
  height:auto!important;
  top:auto!important;
  left:auto!important;
  padding:10px;
}

I will try to share some samples as soon as possible.
UPDATED: 2021/04/04

CDY@44, asmat and 2 other users have reacted to this post.

#2 · April 4, 2021, 9:40 am

I have updated the code to make it more compact and easy to use.
Just doing some test with complex responsive designs and it works very nicely once you understand how it works :)

Vadim, CDY@44 and 2 other users have reacted to this post.

#3 · April 4, 2021, 6:57 pm

I have included all this CSS by default on VisualNEO Web version 21.4.4.
Responsive source code sample app included. Check here:
https://visualneo.com/tutorials/responsive

Regards.

Vadim, CDY@44 and 5 other users have reacted to this post.

#4 · April 5, 2021, 6:39 pm

hi, Thanks a lot for the new version. Why in your tutorial example the carousel goes out after reducing the size of the screen?

thanks

#5 · April 5, 2021, 7:04 pm

hi, Thanks a lot for the new version. Why in your tutorial example the carousel goes out after reducing the size of the screen?

Hi @kazem I will add soon a video tutorial about responsive design to explain everything as better as possible. I'm just trying to figure out the best way and will probably add some more changes on a new software release. I'm very happy about all the possibilities that it opens.

As the Carousel becomes very small in smartphones in this sample app, I have decided to hide it on small devices by using the special CSS class hidden-sm on its Container. This will cause the Carousel to be hidden on small devices. Just delete that CSS class and it will be shown on every size.

More to come :)

Best regards.

Vadim, CDY@44 and noyzen have reacted to this post.

#6 · April 10, 2021, 7:28 pm

Perfect im going to test it now, that's cool we got it included in VNweb.

is there any option in project size setting to work best with this responsive codes?

#7 · April 11, 2021, 7:23 am

Hi @noyzen

Note that all these codes are no longer necessary. They are already included in VisualNEO Web. Check app size properties and look for Responsive option.

There is a responsive sample app included with latest version too.

I'm trying to find time enough to record a video tutorial as soon as possible.

But believe me, now it's really easy and fast to design responsive apps and websites.

This open up a lot of possibilities and my mind is plenty of ideas for next VisualNEO Web versions but I know a comprehensive help is needed very much too.

Vadim and roccocogliano have reacted to this post.

#8 · April 11, 2021, 8:31 am

Yes i know, i used your responsive template from long time ago i know how it works.
i found how to use new easy way you included in software also :)

luishp has reacted to this post.

#9 · April 12, 2021, 1:39 pm

Quote from luishp on April 5, 2021, 7:04 pm

hi, Thanks a lot for the new version. Why in your tutorial example the carousel goes out after reducing the size of the screen?

Hi @kazem I will add soon a video tutorial about responsive design to explain everything as better as possible. I'm just trying to figure out the best way and will probably add some more changes on a new software release. I'm very happy about all the possibilities that it opens.

As the Carousel becomes very small in smartphones in this sample app, I have decided to hide it on small devices by using the special CSS class hidden-sm on its Container. This will cause the Carousel to be hidden on small devices. Just delete that CSS class and it will be shown on every size.

More to come :)

Best regards.

hi, I did it thank you. why this ccs class is not included in the properties style file? where is the hidden-xs class?

regards

#10 · April 12, 2021, 2:18 pm

Hi @kazem,

hi, I did it thank you. why this ccs class is not included in the properties style file? where is the hidden-xs class?

That class and many others are part of Bootstrap, an included library with VisualNEO Web. You just can use it directly in your responsive designs. Please check our this Bootstrap tutorial and this responsive design video tutorial for more information. This is a cheatsheet with all the Bootstrap included CSS classes.

Regards.

Vadim and farhad2008 have reacted to this post.

CSS to use Responsive BootStrap - Forum

CSS to use Responsive BootStrap