Pull bootstrap panels to column border

Question

I have two panels that I need to be placed at the left and right outermost location in the column they are in. Currently they look like this: https://i.sstatic.net/RU636.png

The first panel should be pulled to the left, so as to align with the text, while the other panel should be pulled in the other direction, again aligning with the text. I tried using the "pull-right" and "pull-left" classes, but that didn't work.

This is the HTML for the panels:

<div class="col-sm-6">
                                <div id="panelAddresse" class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Addresse</h3>
                                    </div>
                                    <div class="panel-body">
                                        <p><strong>Berberisvej 90, Hune</strong></p>
                                        <p><strong>9492 Blokhus</strong></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div id="panelLinks" class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Links</h3>
                                    </div>
                                    <div class="panel-body">
                                        <p><a href="https://www.krak.dk/scripts/ruteplan/krakdk_ruteplan_forside.asp">Kraks Ruteplan</a></p>
                                        <p><a href="http://www.visitjammerbugten.dk/jammerbugten/blokhus-hune">Turistbureau</a></p>
                                    </div>
                                </div>
                            </div>

The two columns are nested in another 6-width column.

Answer 1

So is your code something like this

<div class="row">
    <div class="col-sm-6">
        TEXT CONTENT
        <div class="col-sm-6">
            Panel
        </div>
        <div class="col-sm-6">
            Panel
        </div>
    </div>
</div>

If so, you should change it to this

<div class="row">
    <div class="col-sm-6">
        TEXT CONTENT
        <div class="row">
            <div class="col-sm-6">
                Panel
            </div>
            <div class="col-sm-6">
                Panel
            </div>
        </div>
    </div>
</div>

So there's the extra div.row to even the .col-sm-6 padding (15px - 15px). The structure should always be so that .col-sm-X are inside of a .row div. The column divs in Bootstrap have always 15px padding on left and right which in this case creates a "double padding" because there's column div right below column div.