BootStrap fluid 2-column form

[pritaeas]

I want to design a fluid two-column form with BootStrap. What is the best way to tackle this? Do I start with a fluid container and two columns, and then fit a vertical form in each of them? Or is there a better alternative?

[mmcdonald]

A fluid container with two columns is the way I would proceed.

If you want to play around with BS3 forms before you begin check these out:

A form builder:
http://bootsnipp.com/forms?version=3

Some useful example code (All credit to 'pppeater'):
http://www.bootply.com/pppeater/jrNvaahcOh

Write some code and then post it here and we can all take a look and shuffle bits around :)

Regards,
Michael

[pritaeas]

Thanks, the three-column example is useful. I had the form already, just problems with scaling it correctly (due to lack of bootstrap knowledge).

Here's the form (for now). The addon icons (font awesome) are not alinging with the inputs.

<h1><asp:Literal runat="server" Text="<%$ Localize:LoginRequest %>"/></h1>

<fieldset>
    <legend><asp:Literal runat="server" Text="<%$ Localize:RequiredFields %>"></asp:Literal></legend>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 col-lg-6">
                <div class="form-group">
                    <h3><asp:Literal runat="server" Text="<%$ Localize:ContactInformation %>"/></h3>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="E-mail" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="Password" type="password" value="" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <select runat="server" class="form-control">
                            <option>Mr.</option>
                            <option>Mrs.</option>
                        </select>
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="FirstName" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="Infix" type="text" />
                        <span class="input-group-addon"><i class="fa"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="LastName" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-6">
                <div class="form-group">
                    <h3><asp:Literal runat="server" Text="<%$ Localize:CompanyInformation %>"/></h3>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="Name" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="Phone" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="E-mail" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="Vat number" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="CoC number" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <h3><asp:Literal runat="server" Text="<%$ Localize:InvoiceAddress %>"/></h3>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="Address" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="Postal code" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="City" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" placeholder="E-mail" type="text" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <h3><asp:Literal runat="server" Text="<%$ Localize:DeliveryAddress %>"/></h3>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" checked="checked" /> <asp:Literal runat="server" Text="<%$ Localize:DeliveryAsInvoice %>"/>
                        </label>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" readonly="readonly" placeholder="Address" type="text" />
                        <span class="input-group-addon"><i class="fa"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" readonly="readonly" placeholder="Postal code" type="text" />
                        <span class="input-group-addon"><i class="fa"></i></span>
                    </div>

                    <div class="input-group">
                        <input runat="server" class="form-control" readonly="readonly" placeholder="City" type="text" />
                        <span class="input-group-addon"><i class="fa"></i></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-lg-6">
                <div class="form-group">
                    <button runat="server" type="submit" class="btn btn-default"><asp:Literal runat="server" Text="<%$ Localize:Submit %>"/></button>
                </div>
            </div>
        </div>
    </div>
</fieldset>

The example uses a horizontal form, but that's not what I want. The first column are personal details, the second company details. They can't flow like the example.

[mmcdonald]

The example uses a horizontal form, but that's not what I want. The first column are personal details, the second company details. They can't flow like the example.

<form>
<div class="row">

    <div class="col-lg-6">
        <div class="form-group">
             <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input runat="server" class="form-control" ... />
              </div>
              <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input runat="server" class="form-control" ... />
              </div>
              <!-- more personal fields... -->
         </div>
    </div>

    <div class="col-lg-6">
        <div class="form-group">
             <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input runat="server" class="form-control" ... />
              </div>
              <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input runat="server" class="form-control" ... />
              </div>
              <!-- more company fields... -->
         </div>
    </div>

</div>
</form>

I've litterally slapped that together on the DW editor so excuse any blatent mistakes, I'm currently stuck on a corporate citrix farm :P I believe the layout above would do the trick? Can you get it displayed and show me a picture to help visualise? Sorry if I'm actually making this experience more painful haha :D

Michael

[pritaeas]

Thanks. Basically that's what I want, but the problem is the input-group-addon (I think). It's not connecting both parts, see attached (both Opera and IE). It works if I put them before, but not after. Any css class missing?

[mmcdonald]

Oooooo funky - can you change the tag from a div to a span please? And in the good spirit of not stealing content on the web, I'm currently reading through this: https://github.com/plataformatec/simple_form/wiki/How-to-use-Bootstrap-3-input-group-in-Simple-Form and this http://www.tutorialspoint.com/bootstrap/bootstrap_input_groups.htm

Take a look. I'll post back if I spot something important!

[pritaeas]

can you change the tag from a div to a span please?

Which one? I don't see a difference.

[mmcdonald]

Sorry for the lack of clarity.

Change this:

<div class="input-group-addon">@</div>

to this:

<span class="input-group-addon">@</span>

I'm wondering if it's a style on the division tag that's causing the issue.

[pritaeas]

I have span ...

[mmcdonald]

So you do, it was me that didn't, sorry!! :D Still reading but what you have looks fine. Have you tried using the style editor in your browser, unchecking certain styles applied on the form, fields and appended icons? I'm struggling simply because everything looks fine with the mark-up above.

[pritaeas]

I'm struggling simply because everything looks fine with the mark-up above.

Same here. What I had was close to your example, cept that it looks crap. Quick "solution" is to prepend, but not what I want. I'll see if I can find some time to debug this.

[mmcdonald]

Okay chap, I'm sorry I couldn't help at all - good luck!

[pritaeas]

It works online with bootply. The difference is that it's a later version of Bootstrap. I've tried updating my project, but got an exception in the process... Looks like it's the cause though.

Hmz. Just updated to 3.2.0, same problem still... And another thing I only just noticed is that even though I specified col-md-6 the input aren't as wide as expected (on bootply they are wider). What is interfering in Visual Studio? Could it be one of the other scripts?

This is the generated HTML:

<fieldset>
    <legend>Fields marked <i class="fa fa-star-o"></i> are required.</legend>

    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <h3>Contact details</h3>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="E-mail" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="password" class="form-control" placeholder="Password" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <select class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select>
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="FirstName" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Infix" />
                        <span class="input-group-addon"><i class="fa"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="LastName" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="form-group">
                    <h3>Company details</h3>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Name" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Phone" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="E-mail" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Vat number" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="CoC number" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <h3>Invoice address</h3>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Address" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Postal code" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="City" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="E-mail" />
                        <span class="input-group-addon"><i class="fa fa-star-o"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <h3>Delivery address</h3>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" checked="checked" /> Delivery address is invoice address
                        </label>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" readonly="readonly" placeholder="Address" />
                        <span class="input-group-addon"><i class="fa"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" readonly="readonly" placeholder="Postal code" />
                        <span class="input-group-addon"><i class="fa"></i></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control" readonly="readonly" placeholder="City" />
                        <span class="input-group-addon"><i class="fa"></i></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </div>
    </div>
</fieldset>

[pritaeas]

Sigh... Ok. Visual Studio it was. While doing tests tring to fix this, the original Site.css VS creates was restored which contains a max-width for inputs... To quote Homer: "DOH!"