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

book
Crafting the Skills Section

1. Create the Skills Section

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

html
<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

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Build Header Navigation -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Portfolio</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience">Experience</a>

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 6

Spør AI

expand
ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

We use cookies to make your experience better!
some-alt