CODEWITHSUNDEEP
htmlrazorrazor-2razorengine
kez
kez

Reputation: 2313

button align at same row

I have view like following

enter image description here

I'm trying to align this button like those drop down and labels , in same row 

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            @Html.LabelFor(m => m.SelectedMonth, htmlAttributes: new { @class = "control-label col-xs-6" })
            <div class="col-xs-6">
                @Html.DropDownListFor(model => model.SelectedMonth, (IEnumerable<SelectListItem>)ViewBag.Months, "Month", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.SelectedMonth, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="col-xs-6">
        <div class="form-group">
            @Html.LabelFor(m => m.SelectedYear, htmlAttributes: new { @class = "control-label col-xs-6" })
            <div class="col-xs-6">
                @Html.DropDownListFor(model => model.SelectedYear, (IEnumerable<SelectListItem>)ViewBag.Years, "Year", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.SelectedYear, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="col-xs-6">
        <div class="form-group">

            <div style="width:70%; float:left; height: 20px; text-align:left" class="control-label col-xs-6">
                <input type="submit" value="Download Data File"/>
            </div>

        </div>
    </div>
</div>

Please advise

Upvotes: 0

Views: 940

Answers (3)

Lawrence
Lawrence

Reputation: 942

Bootstrap is built on 12-column rows as demonstrated in the grid system description. Your outermost row has 18 columns in it so the final group of 6, which contains the button you have an issue with, is being pushed onto the next 'row'. You should make the columns that are directly descended from the row size 4 to fix this issue.

You may also need to fiddle with the inner column sizes because they aren't contained in any row so their behavior might become complicated later.

Upvotes: 1

Raj Rana
Raj Rana

Reputation: 90

By bootstrap framework we can use in a row 12 columns but here you mentioned 18 columns so after 12 columnns by bootstrap nature it push to next line .

If you want in same line so divided 12 columns into 3 like .col-xs-4 .col-xs-4 .col-xs-4

check this code changed the div class name to col-xs-4.hope it will work 

<div class="row">
<div class="col-xs-4">
    <div class="form-group">
        @Html.LabelFor(m => m.SelectedMonth, htmlAttributes: new { @class = "control-label col-xs-6" })
        <div class="col-xs-6">
            @Html.DropDownListFor(model => model.SelectedMonth, (IEnumerable<SelectListItem>)ViewBag.Months, "Month", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.SelectedMonth, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

<div class="col-xs-4">
    <div class="form-group">
        @Html.LabelFor(m => m.SelectedYear, htmlAttributes: new { @class = "control-label col-xs-6" })
        <div class="col-xs-6">
            @Html.DropDownListFor(model => model.SelectedYear, (IEnumerable<SelectListItem>)ViewBag.Years, "Year", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.SelectedYear, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

<div class="col-xs-4">
    <div class="form-group">

        <div style="width:70%; float:left; height: 20px; text-align:left" class="control-label col-xs-6">
            <input type="submit" value="Download Data File"/>
        </div>

    </div>
</div>

Upvotes: 0

Kapil
Kapil

Reputation: 1141

Please try to this

<form class="form-horizontal">
    <div class="row">
        <div class="col-xs-4">
            <div class="form-group">
                @Html.LabelFor(m => m.SelectedMonth, htmlAttributes: new { @class = "control-label col-xs-6" })
                <div class="col-xs-6">
                    @Html.DropDownListFor(model => model.SelectedMonth, (IEnumerable<SelectListItem>)ViewBag.Months, "Month", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.SelectedMonth, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="form-group">
                @Html.LabelFor(m => m.SelectedYear, htmlAttributes: new { @class = "control-label col-xs-6" })
                <div class="col-xs-6">
                    @Html.DropDownListFor(model => model.SelectedYear, (IEnumerable<SelectListItem>)ViewBag.Years, "Year", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.SelectedYear, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="form-group">
                <div style="width:70%; float:left; height: 20px; text-align:left" class="control-label col-xs-6">
                    <input type="submit" value="Download Data File"/>
                </div>
            </div>
        </div>
    </div>
</form>

you can set bootstrap class as per your need

Upvotes: 0

Related Questions