Basic and Simple Examples of Skills with CSS

Today we will see a very basic example of understanding Skills with CSS. Read More: What is Bootstrap Container and How to use in HTML How to create bootstrap buttons

Bootstrap Skill How to

Sample Code to show basic Skill bar

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;

.skills {
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;

.html {width: 90%; background-color: #04AA6D;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}

<h1>My Skills</h1>

<div class="container">
  <div class="skills html">90%</div>

<div class="container">
  <div class="skills css">80%</div>

<div class="container">
  <div class="skills js">65%</div>

<div class="container">
  <div class="skills php">60%</div>


Leave a Reply