Bootstrap Skill 1 Section

How to use this Bootstrap snippet

Skills

Developers with skills in Bootstrap, React, Vue, and WordPress are in high demand in the tech industry. These technologies are used to build a wide range of websites and applications, from simple blogs to complex e-commerce platforms.

Bootstrap

Bootstrap is a front-end framework that makes it easy to create responsive and mobile-friendly websites.

85%

React

React is a JavaScript library for building user interfaces. It is known for its speed, performance, and scalability.

75%

Vue

Vue is a progressive JavaScript framework for building user interfaces. It is known for its simplicity and flexibility.

65%

WordPress

WordPress is a content management system (CMS) that is used to create and manage websites.

95%

How to use this Bootstrap Skill 1 Section

Place the code in the <body> for Interface 
          
<!-- Skill 1 - Bootstrap Brain Component -->
<section class="bsb-skill-1 bg-light py-3 py-md-5">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
        <h2 class="mb-4 display-5 text-center">Skills</h2>
        <p class="text-secondary mb-5 text-center lead fs-4">Developers with skills in Bootstrap, React, Vue, and WordPress are in high demand in the tech industry. These technologies are used to build a wide range of websites and applications, from simple blogs to complex e-commerce platforms.</p>
        <hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle">
      </div>
    </div>
  </div>

  <div class="container overflow-hidden">
    <div class="row justify-content-xl-center gy-3 gy-sm-4">
      <div class="col-12 col-sm-6 col-xl-5">
        <div class="bg-white rounded shadow-sm p-3 p-md-4 p-xxl-5">
          <h3 class="fw-bold mb-2">Bootstrap</h3>
          <p class="text-secondary fst-italic mb-4">Bootstrap is a front-end framework that makes it easy to create responsive and mobile-friendly websites.</p>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-width-1" role="progressbar" aria-label="Bootstrap" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-5">
        <div class="bg-white rounded shadow-sm p-3 p-md-4 p-xxl-5">
          <h3 class="fw-bold mb-2">React</h3>
          <p class="text-secondary fst-italic mb-4">React is a JavaScript library for building user interfaces. It is known for its speed, performance, and scalability.</p>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-width-2" role="progressbar" aria-label="React" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-5">
        <div class="bg-white rounded shadow-sm p-3 p-md-4 p-xxl-5">
          <h3 class="fw-bold mb-2">Vue</h3>
          <p class="text-secondary fst-italic mb-4">Vue is a progressive JavaScript framework for building user interfaces. It is known for its simplicity and flexibility.</p>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-width-3" role="progressbar" aria-label="Vue" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%</div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-5">
        <div class="bg-white rounded shadow-sm p-3 p-md-4 p-xxl-5">
          <h3 class="fw-bold mb-2">WordPress</h3>
          <p class="text-secondary fst-italic mb-4">WordPress is a content management system (CMS) that is used to create and manage websites.</p>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-width-4" role="progressbar" aria-label="WordPress" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/components/skills/skill-1/assets/css/skill-1.css">

We share this Bootstrap snippet to portray profile skills with a progress bar having a percentage. It is a practical example of a profile with data and abilities. This Bootstrap progress bar snippet is the most suitable fit for your projects. Expression of completion progress is comfortable with these skill bar ideas.