Trouble with fitting bars in bootstrap col - html

Question

I've used bootstrap columns to setup the layout like a dashboard for a new business concept. I've got some progress bars that sit within a div, however trying order and fit the five bars is proving difficult without the fifth bar jumping out of the div. I'd like the bars stacked in the div with the labels sitting on top or next to the bars. Can you help please. Ps. the id's are just for changing the length of the progress bar.
The code for the bars is:
.container-for-bar{
border:1px solid gray;
height:12px;
width:100px;
padding:1px;
display: inline-block;
}
.bar{
background-color: purple;
width:50%; /*change this for progress*/
height: 100%;
}
.bar-text {
display:inline-block;
font-size: 12px;
}
.bar-text-top {
font-size: 12px;
}
.progress-bar-purple {
background-color: purple;
color: black;
}
/* Bootstrap progress bars*/
.progress-bar-text {
float: left; text-align: center;
padding-left: 2px;
}
.half-unit {
margin-bottom: 20px;
padding-bottom: 4px;
border: 1px solid #383737;
background-image:url('../img/sep-half.html');
background-color: #D8D8D8;
color:black;
height:130px;
padding: 5px;
}
.tipi {
}
.purple {
background-color: #5C005C;
color:white;
}
.half-unit:hover {
background-color: #4f4f4f;
-moz-box-shadow: 3px 3px 2px 0px #151515;
-webkit-box-shadow: 3px 3px 2px 0px #151515;
box-shadow: 3px 3px 2px 0px #151515;
}
.half-unit dtitle {
font-size:10px;
text-transform:uppercase;
color:#000000000000;
margin:0px;
padding:0px;
height:inherit
}
.half-unit hr {
border: 0;
border-top: 1px solid #151515;
border-top-style: dashed;
margin-top:0px;
}
.half-unit h1 {
font-family: 'Raleway', sans-serif;
font-weight:300;
font-size: 20px;
line-height: 1;
letter-spacing: 0px;
color: #000000000000;
padding-top:10px;
padding-left:5px;
margin-top:2px;
text-align:center;
}
.half-unit h4 {
padding-left:5px;
margin-top:2px;
font-size: 13px;
font-weight:lighter;
line-height: 1;
letter-spacing: 0px;
color: #000000;
}
.half-unit bold{
font-family: 'Open Sans', sans-serif;
font-size:26px;
font-weight:bold;
color:#000000;
vertical-align:middle;
}
.green {
background-color: 'green';
}
<div class="col-sm-3 col-lg-3">
<div class="half-unit tipi">
<dtitle>T.I.P.I</dtitle>
<hr>
<div class="col-sm-6">
<div class="bar-text-top"> Extroversion </div>
<div class="container-for-bar">
<div class="bar" id="Extroversion_bar"></div>
</div>
<div class="bar-text-top"> Conscientiousness </div>
<div class="container-for-bar">
<div class="bar" id="Conscientiousness_bar"></div>
</div>
</div>
<div class="col-sm-6">
<div class="bar-text"> Agreeableness </div>
<div class="container-for-bar">
<div class="bar" id="Agreeableness_bar"></div>
</div>
<div class="bar-text"> Calmness </div>
<div class="container-for-bar">
<div class="bar" id="Calmness_bar"></div>
</div>
<div class="bar-text"> Openess </div>
<div class="container-for-bar">
<div class="bar" id="Openess_bar"></div>
</div>
</div>
</div>

Answer 1

I split into rows and then columns, that seemed to work.