Apply the bootstrap class with css in angularjs

I need to use bootstrap for the div element with css changes. i tried with col-xs-* and col-md-* for the div but it not working. I need a help regarding when the browser resize it resize to the page. pls help me.

Html page

<div class="col-xs-6 col-md-3 pull-right metrics-section ng-scope">

                              <div class="row">
                                 <div id="metrics-header" class="col-xs-6 col-md-3 metrics-header-section">
                                          <!-- ngRepeat: section in pageMeta.form.sections | filter : { parentKey : 'metrics'} --><div id="metrics-text" class="col-xs-6 col-md-3 ng-scope" ng-repeat="section in pageMeta.form.sections | filter : { parentKey : 'metrics'}">
                                                <div style="font-size:13px;color:#3D6186;">25</div>

                                            <div class="metrics-title" style="font-size:9px;">
                                                <p style="font-size:9px;color:#3D6186;" class="ng-binding">COMPLETED</p>
                                            </div>
                                            <!-- ngIf: section.key !== 'accordAvailable' --><div class="metrics-divider ng-scope" ng-if="section.key !== 'accordAvailable'">
                                                </div><!-- end ngIf: section.key !== 'accordAvailable' -->
                                           </div><!-- end ngRepeat: section in pageMeta.form.sections | filter : { parentKey : 'metrics'} --><div id="metrics-text" class="col-xs-6 col-md-3 ng-scope" ng-repeat="section in pageMeta.form.sections | filter : { parentKey : 'metrics'}">
                                                <div style="font-size:13px;color:#3D6186;">25</div>

                                            <div class="metrics-title" style="font-size:9px;">
                                                <p style="font-size:9px;color:#3D6186;" class="ng-binding">EXCEEDING</p>
                                            </div>
                                            <!-- ngIf: section.key !== 'accordAvailable' --><div class="metrics-divider ng-scope" ng-if="section.key !== 'accordAvailable'">
                                                </div><!-- end ngIf: section.key !== 'accordAvailable' -->
                                           </div><!-- end ngRepeat: section in pageMeta.form.sections | filter : { parentKey : 'metrics'} --><div id="metrics-text" class="col-xs-6 col-md-3 ng-scope" ng-repeat="section in pageMeta.form.sections | filter : { parentKey : 'metrics'}">
                                                <div style="font-size:13px;color:#3D6186;">25</div>

                                            <div class="metrics-title" style="font-size:9px;">
                                                <p style="font-size:9px;color:#3D6186;" class="ng-binding">APPROACHING</p>
                                            </div>
                                            <!-- ngIf: section.key !== 'accordAvailable' --><div class="metrics-divider ng-scope" ng-if="section.key !== 'accordAvailable'">
                                                </div><!-- end ngIf: section.key !== 'accordAvailable' -->
                                           </div><!-- end ngRepeat: section in pageMeta.form.sections | filter : { parentKey : 'metrics'} --><div id="metrics-text" class="col-xs-6 col-md-3 ng-scope" ng-repeat="section in pageMeta.form.sections | filter : { parentKey : 'metrics'}">
                                                <div style="font-size:13px;color:#3D6186;">25</div>

                                            <div class="metrics-title" style="font-size:9px;">
                                                <p style="font-size:9px;color:#3D6186;" class="ng-binding">AVAILABLE</p>
                                            </div>
                                            <!-- ngIf: section.key !== 'accordAvailable' -->
                                           </div><!-- end ngRepeat: section in pageMeta.form.sections | filter : { parentKey : 'metrics'} -->
                                  </div>
                             </div>

                             </div>

css chages

.metrics-section {

    position: absolute;
  /* left: 400px;
  top: 20px; */
  /* width: 675px; */
  left: 350px;
  top: 23px;
  height: 30px;
  font-size: 15px;
  color: #8FABC8;
  text-align: left;
  border-radius: 3px;
  background: rgb(207, 201, 201);
/*


  background-color: rgb(182, 181, 181);
  border-radius: 1px;
  height: 31px;
  padding-top: 2px;
  margin-top: -7px;
  width: 800px;
  padding-right: 5px;
  margin-right: 104px; */
}



#metrics-header {
position: absolute;
width: 650px;
/* left: 360px;
top: 23px; */
text-align: center;
}
.metrics-header-section {
font-family: 'Arial Regular', 'Arial';
font-weight: 400;
font-style: normal;
font-size: 13px;
color: #333333;
text-align: left;
line-height: normal;
}

#metrics-text {
position: relative;
left: 0px;
top: 0px;
width: 150px;
white-space: nowrap;
}


.metrics-divider
{
  position: relative;
  bottom: 33px;
  background-image: url(./img/header_bg.png);
  height: 20px !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  /* border: 1px solid #3D6186; */
}