How to properly position bootstrap html divs

Question

I want to properly align the controls within bootstrap divs, so that they look like

Currently there is a lot of gap between the rows and margin-bottom or padding doesnot seem to work. Also, how do i expand the list box to completely cover the length of screen? It looks like this

HTML

  <div class="row" style="margin-left: 5px; margin-right: 5px">
    <div class="table">
        <div class="row" style="margin-top:0px; padding-top:0px; border:dotted">
            <div style="float: left; margin-left:10px;">
                @Html.ListBoxFor(m => m.cM.CategoryList, new SelectList(Model.cM.CategoryList, "CategoryID", "Description"), new { @id = "listCommentCategory" })
            </div>
            <div style="margin-left:100px; margin-top:0px;">
                <div class="row" style="margin:0px; padding:0px; margin-bottom:0px; padding-bottom:0px; border:dashed">
                    <div class="col-md-1">
                        @Html.DropDownListFor(m => m.cM.HeaderList, new SelectList(Model.cM.HeaderList, "CommentID", "Comment"), new { @id = "ddlCommentHeaders" })
                    </div>
                    <div class="col-md-2" style="margin-left:10px">
                        Search:
                        @Html.TextBox("txtSearchHeader")
                        <button id="clear">X</button>
                    </div>
                    <div class="col-md-1" style="margin-left:10px">
                        <button id="refresh">Refresh</button>
                    </div>
                </div>
                <div class="row" style="margin-left:10px;  border:dashed">
                    Select or double-click on a comment to insert:
                </div>
                <div class="row" style="margin-left:10px;  border:dashed">
                    @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), "listComments")
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

After lots of hard-coding of height, width, padding and margin, i was able to achieve the target. (Also, if i set the col-xs-4 in second columns' first row, the button always goes on the next line. so i have reduced the col sums to 9. I guess 10 will also be fine)

Here is the mark-up

 <div class="table">
        <div class="row" style="margin-top:0px; padding-top:0px;">
            <div class="col-xs-2" style="width:70px; border:groove; margin-left: 20px">

                        @Html.ListBoxFor(m => m.cM.CategoryList, new SelectList(Model.cM.CategoryList, "CategoryID", "Description"), new { @id = "listCommentCategory", @style = "height:190px; margin-top:5px; margin-bottom: 5px;" })

            </div>
            <div class="col-xs10" style="float: right; width:1000px; border:groove; margin-right: 20px">
                <div class="row" style="margin-top:5px; padding-top:0px;">
                    <div class="col-xs-3" style=" margin-left: 5px">
                        @Html.DropDownListFor(m => m.cM.HeaderList, new SelectList(Model.cM.HeaderList, "CommentID", "Comment"), new { @id = "ddlCommentHeaders" })
                    </div>
                    <div class="col-xs-4">
                        Search:
                        @Html.TextBox("txtSearchHeader")
                        <button id="clear">X</button>
                    </div>
                    <div class="col-xs-2">
                        <button id="refresh">Refresh</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12" style="margin-left:5px">
                        Select or double-click on a comment to insert:
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12" style="margin-left:5px">
                        @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:75px; margin-bottom:5px" })
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 2

The reason why the second column doesn't align is because using .col adds 15px padding on the left and right. Row on the other hand adds -15px margin on the left and right.

Because you used col-md-1 on the first row but no columns on the rest, there's a 15px left padding on the row where you have your dropdown.

Instead, it may be better to do the following:

<div class="row">

  // First Column
  <div class="col-xs-2">
     <!-- select list -->
  <div>

  // Second Column
  <div class="col-xs-10">

      <div class="row">

          <!-- 4 to divide the grid into 3 equal parts -->
          <div class="col-xs-4">
          </div>

          <div class="col-xs-4">
          </div>

          <div class="col-xs-4">
          </div>

      </div>

      <div class="row">
         <div class="col-xs-12">
            <!-- Your text here -->
         </div>
      </div>

      <div class="row">
         <div class="col-xs-12">
            <!-- Your other list box here -->
         </div>
      </div>

  </div>
</div>