Multiple fields on one row on the page

Article
2014-06-22

Question

_{Sunday, June 22, 2014 2:58 PM}

I know how to do this using bootstrap on web forms but here in the app I am building (came from web matrix - now moved to vs2013) - I want an entry form with multiple fields on one line- i.e.

First Name: __________ Middle Name: ____________ Last Name: __________________

Street Address _____________ City: ______________ State: ________________ Zip: ____________

No matter what i do, this ends up

First Name: _____________

Middle Name: _____________

Last Name: ___________-

etc. etc.

Thanks

DonnieS

All replies (7)

_{Tuesday, July 1, 2014 5:24 PM ✅Answered}

DonnieS

So bootstrap can do everything except the one thing that is most common on a regular form entry screen.

Bootstrap can do what you need in this situation without custom CSS. As a developer you need to be able to think of creative solutions to things so don't always rely on bootstrap. As mike said, bootstrap is a starting point, not a solution for everything.

To answer your question, to get the proper layout for your form just use bootstrap's grid system

<form role="form">
    <div class="row">
        <div class="form-group col-sm-4">
            @* input for first name *@
        </div>
        <div class="form-group col-sm-4">
            @* input for middle name *@
        </div>
        <div class="form-group col-sm-4">
            @* input for last name *@
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-3">
            @* input for address *@
        </div>
        <div class="form-group col-sm-3">
            @* input for city *@
        </div>
        <div class="form-group col-sm-3">
            @* input for state *@
        </div>
        <div class="form-group col-sm-3">
            @* input for zip *@
        </div>
    </div>
    <input class="btn btn-default btn-block" type="submit">
</form>

_{Thursday, July 3, 2014 5:39 AM ✅Answered}

Hi DonnieS,

As mhcodner said that you could use grid system.

For your requirement, the code could be like this:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <form role="form">
    <div class="row">
        <label for="firstName" class="col-sm-1 control-label">First Name:</label>
        <div class="form-group col-sm-3">
            <input type="text" class="form-control" id="firstName" />
        </div>
        <label for="middleName" class="col-sm-1 control-label">Middle Name:</label>
        <div class="form-group col-sm-3">
            <input type="text" class="form-control" id="middleName" />
        </div>
        <label for="lastName" class="col-sm-1 control-label">Last Name:</label>
        <div class="form-group col-sm-3">
            <input type="text" class="form-control" id="lastName" />
        </div> 
    </div>
    <div class="row">
        <label for="streetAddress" class="col-sm-1 control-label">Street Address:</label>
        <div class="form-group col-sm-2">
            <input type="text" class="form-control" id="streetAddress" />
        </div>
        <label for="city" class="col-sm-1 control-label">City:</label>
        <div class="form-group col-sm-2">
            <input type="text" class="form-control" id="city" />
        </div>
        <label for="state" class="col-sm-1 control-label">State:</label>
        <div class="form-group col-sm-2">
            <input type="text" class="form-control" id="state" />
        </div> 
        <label for="zip" class="col-sm-1 control-label">Zip:</label>
        <div class="form-group col-sm-2">
            <input type="text" class="form-control" id="zip" />
        </div> 
    </div>
    <input class="btn btn-default btn-block" type="submit"/>
</form>
</body>
</html>

Thanks

Best Regards

_{Sunday, June 22, 2014 5:38 PM}

I know how to do this using bootstrap on web forms

You would do exactly the same thing in MVC or Web Pages: http://getbootstrap.com/css/#forms-inline

_{Monday, June 30, 2014 1:19 PM}

This example , the #forms-inline doesnt appear to fit the form I have drawn in my OP, its more a one line - type of form, which in the real world, I may never have seen. The example I have above is the normal data entry type of form. And with all the examples they list, that one is not there.

DonnieS

_{Monday, June 30, 2014 3:10 PM}

You need to apply your own CSS to control the positioning.

_{Monday, June 30, 2014 3:15 PM}

So bootstrap can do everything except the one thing that is most common on a regular form entry screen. Thanks Mike - appreciate your help and your time.

DonnieS

_{Monday, June 30, 2014 3:46 PM}

Bootstrap is just a starting point. It is not the sole answer to everything. No framework is.

Share via

Multiple fields on one row on the page

Question

All replies (7)

DonnieS

Additional resources