Overlapping columns in bootstrap grid

Question

I'm trying to get the following grid in bootstrap:

Intended grid

I've been reading a lot about the nesting of the columns and rows, and I'm doing that, but for some reason, the column on the right is overlapping:

Result of my grid

Being the two squares together group buttons and the thing in the right a slider.

this is the code that gives me that result:

<div class="row margin-top-15">

    <div class="col-xs-9 divButton">

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <button type="button" onclick="getCHfm()" id="fm1" class="btn btn-default custom"><b>1</b></button>
            </div>

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

            <div class="col-xs-4 divButton">
                <button type="button" id="off1" class="btn btn-warning custom"><b>2</b></button>
            </div>

        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <button type="button" onclick="getCH1()" id="ch11" class="btn btn-default custom"><b>3</b></button>
            </div>

            <div class="col-xs-4 divButton">
                <button type="button" onclick="getCH2()" id="ch21" class="btn btn-default custom"><b>4</b></button>
            </div>

            <div class="col-xs-4 divButton">
                <button type="button" onclick="getCH3()" id="ch31" class="btn btn-default custom"><b>5</b></button>
            </div>
        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scanup1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>6</b></span></div>
                <button type="button" id="scandown1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="nextFolder" class="btn btn-default custom"><i class="icon wb-plus" aria-hidden="true"></i></button>
                <div class="text-center custom"><span><b>7</b></span></div>
                <button type="button" id="previousFolder" class="btn btn-default custom"><i class="icon wb-minus" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="nextSong" class="btn btn-default custom"><i class="icon wb-plus" aria-hidden="true"></i></button>
                <div class="text-center custom"><span><b>8</b></span></div>
                <button type="button" id="previousSong" class="btn btn-default custom"><i class="icon wb-minus" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

        <div class="row margin-top-15">

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

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr1up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>9</b></span></div>
                <button type="button" id="scr1down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

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

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr2up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>10</b></span></div>
                <button type="button" id="scr2down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

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

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr3up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>11</b></span></div>
                <button type="button" id="scr3down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

        </div>

    </div>

    <div class="col-xs-3 divButton">

        <div class="row margin-top-15">
            <div class="col-xs-12 divButton">
                <button type="button" id="on1" class="btn btn-danger custom"><b>12</b></button>
            </div>
        </div>

        <div class="row margin-top-15">
            <div class="col-xs-12 divButton">
                <input type="range" min="0" max="100" />
            </div>
        </div>
        <div class="row margin-top-15">
            <div class="col-xs-12 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr4up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>14</b></span></div>
                <button type="button" id="scr4down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

    </div>

    </div>

Is there something wrong with my code? Please, some guidance in this matter would be great!

Answer 1

I managed to get the HTML right this way:

<div class="container">

        <div class="row margin-top-15">

    <div class="col-xs-9">

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <button type="button" id="fm1" class="btn btn-default custom"><b></b></button>
            </div>

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

            <div class="col-xs-4 divButton">
                <button type="button" id="off1" class="btn btn-warning custom"><b></b></button>
            </div>

        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <button type="button" id="ch11" class="btn btn-default custom"><b></b></button>
            </div>

            <div class="col-xs-4 divButton">
                <button type="button" id="ch21" class="btn btn-default custom"><b></b></button>
            </div>

            <div class="col-xs-4 divButton">
                <button type="button" id="ch31" class="btn btn-default custom"><b></b></button>
            </div>
        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scanup1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scandown1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="nextFolder" class="btn btn-default custom"><i class="icon wb-plus" aria-hidden="true"></i></button>
                <div class="text-center custom"><span><b></b></span></div>
                <button type="button" id="previousFolder" class="btn btn-default custom"><i class="icon wb-minus" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="nextSong" class="btn btn-default custom"><i class="icon wb-plus" aria-hidden="true"></i></button>
                <div class="text-center custom"><span><b></b></span></div>
                <button type="button" id="previousSong" class="btn btn-default custom"><i class="icon wb-minus" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

        <div class="row margin-top-15">

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

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr1up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scr1down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

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

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr2up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scr2down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

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

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr3up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scr3down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

        </div>

    </div>

    <div class="col-xs-3">

        <div class="row margin-top-15 divRow">
            <div class="col-xs-12 divButton">
                <button type="button" id="on1" class="btn btn-danger custom"><b></b></button>
            </div>
        </div>

        <div class="row margin-top-15 divRow2">
            <div class="col-xs-12 divButton">
                <div class="col-xs-7 divButton">
                    <p id="result"></p>
                </div>
                <div class="col-xs-1 divButton">
                    <!--<div id="volSlider" class="asRange" data-plugin="asRange" data-namespace="rangeUi" data-step="1" data-min="2" data-max="12" data-value="7"></div>-->
                <input id="volSlider" class="asrange" type="range" min="0" max="30"/>

                </div>

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

                </div>
            </div>
        </div>
        <div class="row margin-top-15 divRow3" >
            <div class="col-xs-12 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr4up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scr4down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

    </div>

    </div>


        </div>

I did it a while ago, so I don't really remember what was wrong, but I had to play a lot with the grid system of bootstrap. And also a little tweaking with the CSS.

The grid looks like this now: Table