Search code examples
htmlrazorrazor-2razorengine

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

Solution

  • 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