CODEWITHSUNDEEP
asp.net-mvc-4
user5336770
user5336770

Reputation:

How to divide two column in my forms?

I am developing in an MVC project. I want to put my form's input areas in two columns. How can i do it? I made it like this, but I think it's not the correct method.

My code:

@using (Html.BeginForm("Save", "Company"))
{
    <div id="t00" style="position:relative;">
        <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;">
            <b>Company Code</b>
        </div>
        <div class="col-md-6">
            @Html.TextBoxFor(a => a.CompanyCode, new { @maxlength = "5", Class = "form-control", placeholder = " Company Code", style = "width:175px;height:25px;" })
            @Html.ValidationMessageFor(a => a.CompanyCode)
        </div>
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>

    <div id="t01" style="position:relative;left:468px; top:-25px;">
        <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;">
            <b>Company Name </b>
        </div>
        <div class="col-md-6">
            @Html.TextBoxFor(a => a.CompanyName, new { @maxlength = "15", Class = "form-control", placeholder = " Company Name", style = "width:175px;height:25px;" })
            @Html.ValidationMessageFor(a => a.CompanyName)
        </div>
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>

    <div id="t02" style="position:relative;top:-22px; ">
        <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;">
            <b>Contact Person</b>
        </div>
        <div class="col-md-6">
            @Html.TextBoxFor(a => a.ContactPerson, new { @maxlength = "15", Class = "form-control", placeholder = " Contact Person", style = "width:175px;height:25px;" })
            @Html.ValidationMessageFor(a => a.ContactPerson)
        </div>
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>





            <div id="t04" style="position:relative;left:468px; top:-48px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Company Address</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.CompanyAddress, new { @maxlength = "100", Class = "form-control", placeholder = " Company Address", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.CompanyAddress)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>

            </div>
            <div id="t05" style="position:relative; top:-45px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Company Website</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.CompanyWebsite, new { @maxlength = "50", Class = "form-control", placeholder = "  Website", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.CompanyWebsite)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>

            </div>


            <div id="t06" style="position:relative;left:468px; top:-71px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Phone Number</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.Phone, new { @maxlength = "20", Class = "form-control", placeholder = " Phone Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.Phone)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>



            <div id="t07" style="position:relative; top:-68px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>TelePhone Number</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.TelNo, new { @maxlength = "20", Class = "form-control", placeholder = " TelePhone Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.TelNo)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>





            <div id="t08" style="position:relative;left:468px; top:-94px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Fax Number</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.FaxNo, new { @maxlength = "20", Class = "form-control", placeholder = " Fax Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.FaxNo)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>

            </div>
            <div id="t09" style="position:relative; top:-92px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Mobile Number</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.Mobile, new { @maxlength = "20", Class = "form-control", placeholder = " Mobile Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.Mobile)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>

            </div>


            <div id="t10" style="position:relative;left:468px; top:-117px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Email</b></div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.Email, new { @maxlength = "50", Class = "form-control", placeholder = " Email", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.Email)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>




            <div id="t11" style="position:relative;top:-115px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Vat Number</b></div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.VATNumber, new { @maxlength = "50", Class = "form-control", placeholder = " Vat Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.VATNumber)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>
            <div id="t12" style="position:relative;left:468px; top:-140px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>SVAT Number</b></div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.SVATNumber, new { @maxlength = "50", Class = "form-control", placeholder = " SVAT Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.SVATNumber)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>

            <div id="t13" style="position:relative; top:-138px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Remarks</b> </div>
                <div class="col-md-6">@Html.TextAreaFor(a => a.Remarks, new { style = "width: 178px; height: 65px; resize: none;", Class = "form-control", })</div>
                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>
            <div id="t14" style="position:relative;left:468px; top:-200px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Status</b></div>
                <div class="col-md-6">@Html.CheckBoxFor(a => a.StatusId)</div>

                <div class="col-md-6"></div> <div class="col-md-6"></div>
            </div>

            <div id="t15" style="position:relative;left:580px; top:-198px;">
                <div class="col-md-6"></div>
                <div class="col-md-6">   <input type="submit" value="Save" class="btn btn-success" /> </div>
            </div>
        }
    </div>

Upvotes: 1

Views: 2556

Answers (3)

ranjeetsingh
ranjeetsingh

Reputation: 1

Remember only one thing the col class should be after just raw class

class container class raw class col class col

Upvotes: 0

user5336770
user5336770

Reputation:

i found some solution 

<form class="container">
    <div class="row">
        <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>

        <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
 <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div> <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
         <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div> <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
         <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
         <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div> <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
    </div>
</form>

Upvotes: 1

alikuli
alikuli

Reputation: 546

Why not use Bootstrap that comes with MVC?

You can see examples on http://getbootstrap.com/css/

meanwhile, here is the way to get 2 columns using boostrap

<div class="row">
   <div class="col-lg-6">Add whatever you want for COL 1</div>
   <div class="col-lg-6">Add whatever you want for COL 2</div>
</div>

Note col-lg-6 means that out of the 12 units that are available to you on the row, you are using 6 and that if the disp;ay device does not have a large display, then responsive will kick in, i.e. the columns will show as a single column. Read up on it, its great and useful. Make sure your columns always add up to "12"

Upvotes: 1

Related Questions