Bootstrap Skill 2 Section

How to use this Bootstrap snippet

Skills

Our UX and UI design proficiency ensures seamless interactions in the digital realm.

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 2 Section

Place the code in the <body> for Interface 
          
<!-- Skill 2 - Bootstrap Brain Component -->
<section class="bsb-skill-2 py-3 py-md-5 py-xl-8">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-10 col-lg-8">
        <h3 class="fs-5 mb-2 text-secondary text-uppercase">Skills</h3>
        <h2 class="display-5 mb-4">Our UX and UI design proficiency ensures seamless interactions in the digital realm.</h2>
        <button type="button" class="btn btn-lg btn-primary mb-3 mb-md-4 mb-xl-5">Explore Us</button>
      </div>
    </div>
  </div>

  <div class="container overflow-hidden">
    <div class="row gy-3 gy-lg-4">
      <div class="col-12 col-lg-6">
        <div class="card">
          <div class="card-body p-4 p-xxl-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-7 skill-title">
                <h3 class="fw-bold mb-2">Bootstrap</h3>
                <p class="text-secondary fst-italic mb-4 mb-md-0">Bootstrap is a front-end framework that makes it easy to create responsive and mobile-friendly websites.</p>
              </div>
              <div class="col-12 col-md-5 skill-progress">
                <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>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="card">
          <div class="card-body p-4 p-xxl-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-7 skill-title">
                <h3 class="fw-bold mb-2">React</h3>
                <p class="text-secondary fst-italic mb-4 mb-md-0">React is a JavaScript library for building user interfaces. It is known for its speed, performance, and scalability.</p>
              </div>
              <div class="col-12 col-md-5 skill-progress">
                <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>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="card">
          <div class="card-body p-4 p-xxl-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-7 skill-title">
                <h3 class="fw-bold mb-2">Vue</h3>
                <p class="text-secondary fst-italic mb-4 mb-md-0">Vue is a progressive JavaScript framework for building user interfaces. It is known for its simplicity and flexibility.</p>
              </div>
              <div class="col-12 col-md-5 skill-progress">
                <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>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="card">
          <div class="card-body p-4 p-xxl-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-7 skill-title">
                <h3 class="fw-bold mb-2">WordPress</h3>
                <p class="text-secondary fst-italic mb-4 mb-md-0">WordPress is a content management system (CMS) that is used to create and manage websites.</p>
              </div>
              <div class="col-12 col-md-5 skill-progress">
                <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>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/skills/skill-2/assets/css/skill-2.css">

This Bootstrap Progress Bar section has a minimal and refined design. This Bootstrap Progress Bar snippet is immaculate for showcasing skills in development, design, and many others. This skill bar has an animated progress bar of the Bootstrap 5 framework. This free Bootstrap Progress Bar is uncomplicated to blend into the Bootstrap templates. This Bootstrap Progress Bar component has a responsive layout and will look incredible on different arrays.