CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
BMills
BMills

Reputation: 901

Elements on same line in bootstrap column

Trying to get 2 elements on same line within a bootstrap column because I don't want a gap that putting it in a separate col would create.

<style>
   .inline {
             display: inline-block;
           }
</style>

<div class="row">
            <div class="col-md-6">
                <label class="inline">View</label>
                @Html.EnumDropDownListFor(x => x.View, new {@class = "form-control inline"})
            </div>
            <div class="col-md-4">
                @Html.DropDownListFor(x => x.SportId, Model.Sports, new {@class = "form-control"})
            </div>
</div>

Output is like this: enter image description here

Edit: I think many of you misunderstood what I need. Iswarya got me on the right track. Just had to created another col within the col like this:

 <div class="row">
        <div class="col-md-6">               
                <div class="col-md-2">
                    <label>View</label>
                </div>
                <div class="col-md-6">
                    @Html.EnumDropDownListFor(x => x.View, new {@class = "form-control"})
                </div>                
        </div>
        <div class="col-md-4">
            @Html.DropDownListFor(x => x.SportId, Model.Sports, new {@class = "form-control"})
        </div>
    </div>

Which created: enter image description here

Upvotes: 0

Views: 11167

Answers (4)

Iswarya Swaminadhan
Iswarya Swaminadhan

Reputation: 125

See here is the code for your question and use bootstrap and it saves your day .

<form  class="form-horizontal" id="form1 " >
                <div class="col-sm-12">
                    <div class="col-sm-6">
                    <div class="form-group">
                        <label class="control-label col-sm-6">customer Name<span class="impstar">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name" Placeholder="Enter Name" re>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-6">pounds<span class="impstar">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name" Placeholder="Ex : 20" >
                        </div>
                    </div>


                    </div>

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

                    <div class="form-group">
                        <label class="control-label col-sm-6">us dollars<span class="impstar">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="fname" Placeholder="Ex : Rs.60,000" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-6">euro dollars<span class="impstar">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="fname" Placeholder="Ex : Rs.35,000" >
                        </div>
                    </div>

                    <div class="form-group text-right">

                        <input type="submit" class="btn btn-info" value="Submit ">
                    </div>
                    </div>
                </div>
                </form>

Upvotes: 2

AG_
AG_

Reputation: 2689

if you using bootstap 4 then just add mt-auto in div.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<style>
   .inline {
             display: inline-block;
           }
</style>

<div class="row">
            <div class="col-md-6">
                <label class="">View</label>
                <select class="form-control">
                </select>
            </div>
            <div class="col-md-4 mt-auto">
                <select class="form-control">
                </select>
            </div>
</div>

Upvotes: 0

user10105289
user10105289

Reputation: 32

In your code there is

<label>view>/label> on right hand and for next field there is no label that's why its getting misaligned.

<div class="col-md-4">
   @Html.DropDownListFor(x => x.SportId, Model.Sports, new {@class = "form-control"})
</div>

for this div write following css

vertical-align: middle or bottom or sub

Upvotes: 0

core114
core114

Reputation: 5325

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

Form row

Try like this 

<form>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="View>View</label>
          @Html.EnumDropDownListFor(x => x.View, new {@class = "form-control "})
        </div>
        <div class="form-group col-md-4">
          <label for="lable-text"></label>
            @Html.DropDownListFor(x => x.SportId, Model.Sports, new {@class = "form-control"})
        </div>
      </div>
    </form>

Upvotes: 0

Related Questions