In the start.vaadin.com page, there are classes which extends Div mostly and some with Main ? Usually the default I use is VerticalLayout so wondering when to use these
It depends what you wanna build. Div is a low level component where you have to do the styling with css. Main defines the main content of a page - especially “needed” for good accessibility / semantic tag usage. Vertical layout is more complex layout to ease development for the java user who doesn’t care about frontend.
The start.vaadin.com page exaples are responsive and there is no VL so I was thinking that is the reason why they’re using Div like in Bootstrap
No, they are just responsive cause Rolf cares for accessibility and responsibility is part of accessibility. Technically it can archived with every layout easier or harder.
harder
better they update with VL so we know we’re following the right approach. The examples use HTML Div and I use VL makes me think, I’m not follwing the right approach because vaadin itself use Div and not VL
Documentation is a never ending story 
customer says, Bootstrap templates are responsive and it costs just <=$50 why don’t you buy it and adapt the same and give me the product with same responsive features. I do not have answer
For java guys, CSS sucks ( my personal opinion )
Well just do it would be my answer 
Yes it sucks, but you have to learn / understand it to build really good software. It’s impossible to do it without it. Yes, flow can get you really far but it’s impossible for a generic framework with so much content to fullfil all needs perfectly
Rolf, you echo the same or have different opinion ?
You can do it ( that’s the reason I built the bootstrap add-on), especially if your requirements are “copy bootstrap”. Just for a responsive grid, bootstrap is too much ( you can simply copy the bootstrap-grid.css instead).
For accessibility reasons, your page should have a main section ( it’s not required but it helps). The pages in start.vaadin.com are not necessarily the best practices in terms of accessibility.
finally able to achieve this much
for some reason, there is some blank space here
it is not getting stretched automatically
I haven’t worked on the Start templates so I’m not very familiar with how they’re implemented, but:
Div in Flow is the html
element, a generic container. It’s commonly used together with css flexbox to do layouts.
The Vaadin Vertical and Horizontal Layouts are really just fancy versions of that, that provide convenient APIs for flexbox stuff. Div is more low level and lightweight. It’s a matter of preference.
Main is the html element, which is really just a div with special semantics that identify it as the main connect area of the page. Same goes for Aside, Header and some others. They’re really just divs with a dedicated semantics role which helps screen readers understand the page correctly.
The same semantic meaning can also be applied to divs and to Vertical and Horizontal Layouts by applying a role attribute:
somelayout.getElement().setAttribute(“role”, “main”);
This matters for accessibility / usability with screen readers, but is otherwise up to the developer to choose whether and how to use.