Bootstrap 3 making nested rows

Question

When making nested columns with bootstrap in asp.net using webforms, how would you span the entire child?

Example:

<div class="row">
    <div class="col-md-3">
        <div class="row">Stuff</div>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-6">
                stuff
            </div>
            <div class="col-md-6">
                stuff
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                stuff
            </div>
        </div>
    </div>
</div>

Here is my exact code:

        <div class="row" style="margin-top: 5px">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon" id="">Destination City:</span>
                    <input type="text" class="form-control" id="DestinationCity" runat="server" placeholder="" aria-describedby="basic-addon1">
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon" id="">ETA:</span>
                    <input type="text" class="form-control" id="ETA2" runat="server" placeholder="" aria-describedby="basic-addon1">
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 5px">
            <div class="col-md-12">
                <div class="input-group">
                    <span class="input-group-addon" id="">B/L#:</span>
                    <input type="text" class="form-control" id="BL" runat="server" placeholder="" aria-describedby="basic-addon1">
                </div>
            </div>
        </div>

I am trying to make 2 columns of 6 with a column of 12 underneath it. The second column will not span the entire length of the two 6s.

I think I am missing something fundamental about Bootstrap3's gridding system.

Link to image: https://sutong-my.sharepoint.com/personal/joseph_sutongctr_com/_layouts/15/guestaccess.aspx?docid=1070ed3a0aabe43739b7cdda19e136793&authkey=AZFGucSF7ReMr4cvabz6fDQ

Goal here is to make two 6 width objects the same width a one 12 width object with minimum padding. Span = take up all the space. — TheJoe, Aug 18 '17 at 15:22
just don't use another row. Put your col-md-12 div inside the above row below the two 6 col div's.. — codingsoul, Aug 18 '17 at 15:26
Did not have any effect on the width of any of my objects. It just removed my top margin. — TheJoe, Aug 18 '17 at 15:34
May be explain what exactly you want with an image then I will be able to help you.. I'm good with bootstrap.. :) — codingsoul, Aug 18 '17 at 15:35

score 0 · Answer 1 · answered Aug 18 '17 at 18:52

You HTML work perfectly as to what you wanted... 2 column followed by 1 columns spanning the entire page. You need to check if another div is wrapping it causing it to behave differently. Try to comment your start and ending div, you'd be surprised how many of us get confused.

score 0 · Accepted Answer · answered Aug 21 '17 at 20:45

0

Problem turned out to be a limit Visual Studio puts in Site.css

    /* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

Answer found in Stack Question

answered Aug 21 '17 at 20:45

TheJoe

57
10

Bootstrap 3 making nested rows

2 Answers2