CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 731

Boostrap with SELECT and icon on the same row

I am trying to place those controls on the same level. I want to have the save button bottom aligned with the element.

enter image description here

  <div class="row">
        <div class="col-sm-8">
          <div class="form-group">
            @Html.LabelFor(f => f.DatabaseName, "Database Name")
            @Html.DropDownListFor(f => f.DatabaseName, ViewBag.DatabaseList as IEnumerable<SelectListItem>, new { @class = "dbs form-control", style = "margin-bottom:20px" })
            <span class="glyphicon glyphicon-save"></span> Save
          </div>
          </div>
          <div class="col-sm-4">
            <div class="form-group">
              <span class="glyphicon glyphicon-save"></span> Save
            </div>
          </div>
        </div>

Upvotes: 0

Views: 107

Answers (2)

Ben Temple-Heald
Ben Temple-Heald

Reputation: 708

take a look at : http://www.bootply.com/yHUeAcHaRX 

<div class="col-md-6">
    <div class="input-group">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
        </select>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-save"></i>Save</button>
        </span>
    </div>
</div>

Upvotes: 2

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

 <div class="row">
        <div class="col-sm-8">
<div class="col-sm-4">
          <div class="form-group">

            <span class="glyphicon glyphicon-save"></span> Save
          </div>
          </div>
</div>
          <div class="col-sm-4">
            <div class="form-group">
              <span class="glyphicon glyphicon-save"></span> Save
            </div>
          </div>
        </div>
</div>

Upvotes: 0

Related Questions