<div class="row">
    <div class="col-md-6 text-center margin-bottom">
        <h4 class="uppercase">Bar Chart</h4>
        <br/>
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
    <!--end item-->
    <div class="col-md-6 text-center margin-bottom">
        <h4 class="uppercase">Line Chart</h4>
        <br/>
        <canvas id="myLineChart" width="400" height="400"></canvas>
    </div>
    <!--end item-->
    <div class="clearfix"></div>
    <div class="col-divider-margin-6"></div>
    <div class="divider-line solid light"></div>
    <div class="col-divider-margin-6"></div>
    <div class="col-md-6 text-center margin-bottom">
        <h4 class="uppercase">Radar Chart</h4>
        <br/>
        <canvas id="myRadarChart" width="400" height="400"></canvas>
    </div>
    <!--end item-->
    <div class="col-md-6 text-center margin-bottom">
        <h4 class="uppercase">Pie Chart</h4>
        <br/>
        <canvas id="myPieChart" width="400" height="400"></canvas>
    </div>
    <!--end item-->
</div>
<div class="clearfix margin-bottom-3"></div>
<div class="row">
    <div class="col-md-6 margin-bottom">
        <div class="barras less5 left">
            <h6 class="small-text font-weight-5 uppercase nomargin">Html</h6>
            <div class="barra">
                <div class="barra-nivel" data-nivel="90%" style="width: 90%;"><span class="valor-nivel">90%</span></div>
            </div>
            <h6 class="small-text font-weight-5 uppercase nomargin">Css</h6>
            <div class="barra">
                <div class="barra-nivel" data-nivel="95%" style="width: 95%;"><span class="valor-nivel">95%</span></div>
            </div>
            <h6 class="small-text font-weight-5 uppercase nomargin">JavaScript</h6>
            <div class="barra">
                <div class="barra-nivel" data-nivel="75%" style="width: 75%;"><span class="valor-nivel">75%</span></div>
            </div>
            <h6 class="small-text font-weight-5 uppercase nomargin">Wordpress</h6>
            <div class="barra">
                <div class="barra-nivel" data-nivel="85%" style="width: 85%;"><span class="valor-nivel">85%</span></div>
            </div>
            <h6 class="small-text font-weight-5 uppercase nomargin">Support</h6>
            <div class="barra">
                <div class="barra-nivel" data-nivel="100%" style="width: 100%;"><span class="valor-nivel">100%</span></div>
            </div>
        </div>
    </div>
    <!-- end col -->
    <div class="col-md-6">
        <div class="barWrapper">
            <span class="progressText"><strong>HTML5</strong></span>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                    <span class="popOver" data-toggle="tooltip" data-placement="top" title="85%"> </span>
                </div>
            </div>
        </div>
        <div class="barWrapper">
            <span class="progressText"><strong>CSS3</strong></span>
            <div class="progress ">
                <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="10" aria-valuemax="100" style="">
                    <span class="popOver" data-toggle="tooltip" data-placement="top" title="95%"> </span>
                </div>
            </div>
        </div>
        <div class="barWrapper">
            <span class="progressText"><strong>JQUERY</strong></span>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                    <span class="popOver" data-toggle="tooltip" data-placement="top" title="70%"> </span>
                </div>
            </div>
        </div>
        <div class="barWrapper">
            <span class="progressText"><strong>WORDPRESS</strong></span>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                    <span class="popOver" data-toggle="tooltip" data-placement="top" title="80%"> </span>
                </div>
            </div>
        </div>
    </div>
    <!-- end col -->
</div>