Centering my top panel

[Manu Botija]

Hello,

I am new to GWT-Bootstrap but so far I like what I see. There is something however that I can't manage quite to do. That is to center the top container of my site in the center of the page.

This is the UI Binder class for the Top Presenter of my application (I use GWTP):

<ui:style>
 .root {
 margin-left: auto;
 margin-right: auto;
 }
 </ui:style>


 <g:HTMLPanel styleName="{style.root}">


 <b:Row>
 <b:Column size="12">
 <g:SimplePanel ui:field="header" />
 </b:Column>
 </b:Row>

 <b:Row>
 <b:Column size="12">
 <b:Row>
 <b:Column size="2">
 <g:SimplePanel ui:field="navigation" />
 </b:Column>
 <b:Column size="10">
 <g:SimplePanel ui:field="main" />
 </b:Column>
 </b:Row>
 </b:Column>
 </b:Row>

 </g:HTMLPanel>

(sorry I lose the indentation when pasting...)

I also added margin:auto to the body just in case but still does not work. My page remains in the left of the screen. Any ideas why?

Thanks

[Joshua Godi]

Instead of wrapping everything in a HTMLPanel, wrap it in a Container (from GWT-Bootstrap) with a width on it if you would like. That is a widget that will be centered on the screen for you.

[Joshua Godi]

 <b:Container width="80%"> // This can be whatever you want to center it, this will give you a 10% gutter on each side

 <g:SimplePanel ui:field="header" />

 <b:FluidRow>

 <b:Column size="2">
 <g:SimplePanel ui:field="navigation" />
 </b:Column>
 <b:Column size="10">
 <g:SimplePanel ui:field="main" />
 </b:Column>

 </b:FluidRow >
 </b:Container>

Try that for the layout that you are trying to accomplish too.

[Manu Botija]

Thanks! The container was one important piece I was missing in this puzzle (I am new to both GWT-Bootstrap and Bootstrap in general). And using a percentage width certainly helps making it responsive.