[Newbie] Bootstrap columns

[Mario Giammarco]

Hello,
since NoWicket generates html code with bootstrap I tried to do two columns form adding a div of class "row" but without luck:

<div class="row">

                <div class="form-group">

                    <label class="control-label col-sm-2" wicket:for="ricerca">

                        <wicket:label>

                            Ricerca

                        </wicket:label>

                    </label>

                    <div wicket:id="ricerca_gridColumn" class="col-sm-4">

                        <input type="text" class="form-control" wicket:id="ricerca">

                    </div>

                </div>

                <div class="form-group">

                    <div wicket:id="auto_gridColumn" class="col-sm-offset-2 col-sm-4">

                        <div class="checkbox">

                            <label wicket:for="auto">

                                <input type="checkbox" wicket:id="auto">

                                <wicket:label>

                                    Auto

                                </wicket:label>

                            </label>

                        </div>

                    </div>

                </div>

            </div>

[Edwin Stang]

The trick I use is to merge two form-groups into one. Each form-group is an individual row, the length of the components is then defined via the col-sm-x attributes. A sum of 12 is available, so the default html generator prepares this for two-column display. You can make it 3 columns by shrinking the components, changing from form-horizontal to form-vertical by removing the form-horizontal class.

            <div class="form-group">

                    <label class="control-label col-sm-2" wicket:for="ricerca">

                        <wicket:label>

                            Ricerca

                        </wicket:label>

                    </label>

                    <div wicket:id="ricerca_gridColumn" class="col-sm-4">

                        <input type="text" class="form-control" wicket:id="ricerca">

                    </div>

                    <div wicket:id="auto_gridColumn" class="col-sm-offset-2 col-sm-4">

                        <div class="checkbox">

                            <label wicket:for="auto">

                                <input type="checkbox" wicket:id="auto">

                                <wicket:label>

                                    Auto

                                </wicket:label>

                            </label>

                        </div>

                    </div>

                </div>

Though if you want to use "row", you have to shrink the size of the form-groups individually by adding col-sm-6 and maxking the label col-sm-4 and the component col-sm-8. An example is visible here: https://bootsnipp.com/snippets/3XrGb

It is helpful to read the bootstrap documentation a bit about how the grid system works and how the size css-classes work on each nested layer you define.

[Mario Giammarco]

Sorry I had overlooked div of class form-group. I removed it as you suggested and now it is ok.