Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Crafting the Skills Section | Creating a Portfolio Website with Bootstrap
Bootstrap Essentials for Modern Websites

bookCrafting the Skills Section

1. Create the Skills Section

Design a section to provide details about your technical skills and tools.

<section id="skills" class="skills-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h2 class="text-primary mb-4">Technical Skills</h2>
        <ul class="list-unstyled">
          <li class="text-danger me-2">HTML5</li>
          <li class="text-danger me-2">CSS3</li>
          <li class="text-danger me-2">JavaScript</li>
          <!-- Add more skills here -->
        </ul>
      </div>
      <div class="col-6">
        <h2 class="text-primary mb-4">Tools</h2>
        <ul class="list-unstyled">
          <li class="text-danger me-2">Bootstrap</li>
          <li class="text-danger me-2">jQuery</li>
          <li class="text-danger me-2">Git</li>
          <!-- Add more tools here -->
        </ul>
      </div>
    </div>
  </div>
</section>

2. Add Technical Skills and Tools

Within each column, add technical skills and tools using Bootstrap's typography and list styling classes. Customize the content with your specific skills and tools, adding new items as needed.

Result

index.html

index.html

copy
Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 5. ChapterΒ 6

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 3.23

bookCrafting the Skills Section

Swipe to show menu

1. Create the Skills Section

Design a section to provide details about your technical skills and tools.

<section id="skills" class="skills-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h2 class="text-primary mb-4">Technical Skills</h2>
        <ul class="list-unstyled">
          <li class="text-danger me-2">HTML5</li>
          <li class="text-danger me-2">CSS3</li>
          <li class="text-danger me-2">JavaScript</li>
          <!-- Add more skills here -->
        </ul>
      </div>
      <div class="col-6">
        <h2 class="text-primary mb-4">Tools</h2>
        <ul class="list-unstyled">
          <li class="text-danger me-2">Bootstrap</li>
          <li class="text-danger me-2">jQuery</li>
          <li class="text-danger me-2">Git</li>
          <!-- Add more tools here -->
        </ul>
      </div>
    </div>
  </div>
</section>

2. Add Technical Skills and Tools

Within each column, add technical skills and tools using Bootstrap's typography and list styling classes. Customize the content with your specific skills and tools, adding new items as needed.

Result

index.html

index.html

copy
Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 5. ChapterΒ 6
some-alt