<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div role="tabpanel" class=" tab-pane" id="skill" > <div class="skill-section"> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow=" 45" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="skill-name"><strong>Html5</strong></span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-2 text-left">80%</div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow=" 45" aria-valuemin="0" aria-valuemax="100" style="width: 70%"> <span class="skill-name"><strong>Css3</strong></span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-2 text-left">70%</div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow=" 45" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> <span class="skill-name"><strong>Bootstrap 3</strong></span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-2 text-left">90%</div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow=" 45" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> <span class="skill-name"><strong>JavaScript</strong></span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-2 text-left">50%</div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow=" 45" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="skill-name"><strong>jQuery</strong></span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-2 text-left">60%</div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow=" 45" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="skill-name"><strong>Angular 4</strong></span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-2 text-left">20%</div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow=" 45" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="skill-name"><strong>Node.js</strong></span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-2 text-left">40%</div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow=" 45" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="skill-name"><strong>Express</strong></span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-2 text-left">40%</div> </div> </div> </div> </div> </div> </div> </div> </section>

.progress{ border-radius: 20px; height: 25px; } .skill-name{ text-transform: uppercase; margin-left: 10px; padding-left:10px; padding-top: 2.5px; float:left; font-family: 'Raleway', sans-serif; font-size: 1.1em; } .progress .progress-bar, .progress .progress-bar.progress-bar-default { background-color: #46a546 ; } .progress .progress-bar{ animation-name: animateBar; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1.0s; } @keyframes animateBar { 0% {transform: translateX(-100%);} 100% {transform: translateX(0);} } /*media Queries*/ @media (min-width: 768px) and (max-width: 991px){ #about-section h1{font-size: 2.0em;} .nav-pills li a{font-size: 1.3em !important;} } @media (max-width: 767px){ #about-section h1{ margin-top: 90px !important; font-size: 1.5em;} .nav-pills li a{font-size: 1.3em !important;} .about-me-text{font-size: 1.0em;} .btn-tab .btn-overide{font-size: 0.8em; width: 200px; } #about-section{ height: 750px; } #about-section h1{ margin-top: 50px; } } @media (max-width: 456px){ #about-section{ height: 730px; } .nav-pills li a{font-size: 0.9em !important;} } @media(max-width: 648px){ #about-section{ height: 800px; } } @media (min-width: 481px) and (max-width: 553px){ #about-section{ height: 900px; } } @media (max-width: 479px){ .btn-hire{ margin-top: 20px!important; } .btn-contact{ margin-top: 10px !important; } #about-section{ height: 950px; } } @media (max-width: 442px){ #about-section{ height: 980px; } } @media (max-width: 411px){ #about-section{ height: 1020px; } } @media (max-width: 373px){ #about-section{ height: 1050px; } }