<div class="container">
    <div class="row">
        <div class="col-md-6 animate-in" data-anim-type="fade-in-left" data-anim-delay="100"><img src="/sites/default/files/demo-images/site-img-44.jpg" alt="site-img-44.jpg" class="img-responsive"  /></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="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                        <span class="popOver" data-toggle="tooltip" data-placement="top" title="" data-original-title="90%" aria-describedby="tooltip897768"> </span>
                        <div class="tooltip fade top in" role="tooltip" id="tooltip897768" style="top: -46px; left: 21.5px; display: block;">
                            <div class="tooltip-arrow" style="left: 50%;"></div>
                            <div class="tooltip-inner">90%</div>
                        </div>
                    </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="width: 95%;">
                        <span class="popOver" data-toggle="tooltip" data-placement="top" title="" data-original-title="95%" aria-describedby="tooltip720588"> </span>
                        <div class="tooltip fade top in" role="tooltip" id="tooltip720588" style="top: -46px; left: 21.5px; display: block;">
                            <div class="tooltip-arrow" style="left: 50%;"></div>
                            <div class="tooltip-inner">95%</div>
                        </div>
                    </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" style="width: 70%;">
                        <span class="popOver" data-toggle="tooltip" data-placement="top" title="" data-original-title="70%" aria-describedby="tooltip44605"> </span>
                        <div class="tooltip fade top in" role="tooltip" id="tooltip44605" style="top: -46px; left: 21.5px; display: block;">
                            <div class="tooltip-arrow" style="left: 50%;"></div>
                            <div class="tooltip-inner">70%</div>
                        </div>
                    </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" style="width: 80%;">
                        <span class="popOver" data-toggle="tooltip" data-placement="top" title="" data-original-title="80%" aria-describedby="tooltip115251"> </span>
                        <div class="tooltip fade top in" role="tooltip" id="tooltip115251" style="top: -46px; left: 21.5px; display: block;">
                            <div class="tooltip-arrow" style="left: 50%;"></div>
                            <div class="tooltip-inner">80%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end col -->
</div>