why doesn't my bootstrap well height increase to accommodate the columns and rows inside?

Question

I have hunted high and low and I am 90% convinced my problem stems from floating elements and that the answer to my problem is the proper application of clear.

Unfortunately I am not well versed enough in CSS to know where to apply the fix and hacking at it doesn't seem to be getting me there, can someone help?

I want the well to expand to encompass my BootStrap column elements and their children.

I have the following HTML in a CodePen if you want to take a look at it live:

<div class="container-fluid">
    <div class="well">
        <div class="col-md-1">
            <button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
            <button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
        </div>
        <div class="col-md-10">
            <label> Sample title field</label>
            <div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
            desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        </div>
        <div class="col-md-1" style="text-align: center;">
            <div>Score</div>
            <span class="badge" style="font-size: 42px !important;">42</span>
        </div>
    </div>
</div>

Answer 1

The problem here is that you do not include a row element to hold all of the col div's.

So all you need to do is add the class row to the same div that your class well is in.

Like so:

<div class="container-fluid">
<div class="well row">
    <div class="col-md-1">
        <button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
        <button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
    </div>
    <div class="col-md-10">
        <label> Sample title field</label>
        <div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
    <div class="col-md-1" style="text-align: center;">
        <div>Score</div>
        <span class="badge" style="font-size: 42px !important;">42</span>
    </div>
</div>

Here is a Bootply to give you a visual.

Now since a row can only hold up to 12 columns.. you won't be able to add any more col inside that row since 1 + 10 + 1 = 12... you will have to create another row unless of course you make your current col's smaller.

Hope this helps!