Why doesn't my bootstrap height increase to fit columns and rows inside?

Question

I hunted high and low, and I am 90% convinced that my problem is with floating elements and that the answer to my problem is the correct use of clear .

Unfortunately, I'm not good enough in CSS to know where to apply the fix and crack it, it doesn't seem to attract me, can anyone help?

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

I have the following HTML in 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 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 is that you are not including the row element to hold all col div .

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

Same:

 <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 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 Bootply for you to visualize.

Now, since row can hold up to 12 columns, you can no longer add col inside row , since 1 + 10 + 1 = 12 ... you will have to create another row , unless, of course, you reduce the current current col .

Hope this helps!