Web geliştirmenin dünyaya açılan kapılarından biri olan Bootstrap, sıfırdan CSS ve JavaScript yazmadan profesyonel görünümlü, tamamen responsive web siteleri ve arayüzler oluşturmanızı sağlayan açık kaynaklı bir frontend framework’tür. 2013’teki ilk kararlı sürümünden bu yana dünya genelindeki web projelerinin yaklaşık %20’sinde kullanılmakta olan Bootstrap, 2026’da hâlâ en popüler CSS çerçevelerinden biri olmayı sürdürmektedir.
Bu kapsamlı rehberde Bootstrap’ın ne olduğunu, nasıl kurulduğunu, grid sisteminin nasıl çalıştığını, hangi bileşenleri sunduğunu ve gerçek projeler için nasıl kullanılması gerektiğini kod örnekleriyle birlikte ele alacağız.
Bootstrap Nedir?
Bootstrap; Twitter mühendisleri Mark Otto ve Jacob Thornton tarafından 2010’da geliştirilen, günümüzde ise tamamen açık kaynaklı bir topluluk projesi olarak sürdürülen HTML, CSS ve JavaScript bileşen kütüphanesidir.
Bootstrap’ın temel sunduğu değer üç başlıkta özetlenebilir:
1. Hazır Bileşen Seti: Butonlar, formlar, kartlar, navigasyon çubukları, modaller, tablolar, uyarı kutuları ve onlarca başka UI bileşeni önceden stillendirilmiş hâlde gelir. Sıfırdan CSS yazmak yerine sınıf adlarını HTML’e eklersiniz.
2. Grid Sistemi: 12 sütunlu ızgara sistemi, sayfa düzenlerini hem masaüstünde hem de mobil ekranlarda kolayca yapılandırmanızı sağlar.
3. Responsive Tasarım: Bootstrap, farklı ekran boyutlarına göre otomatik uyum sağlayan breakpoint sistemiyle mobil uyumlu web siteleri yazmayı büyük ölçüde kolaylaştırır.
Profesyonel web tasarım projelerinde Bootstrap, özellikle prototipleme ve hızlı geliştirme aşamalarında yaygın tercih edilen bir araçtır.
Bootstrap Sürümleri: Bootstrap 5 Ne Getirdi?
2021’de yayınlanan Bootstrap 5, birçok kritik değişiklik getirdi:
- jQuery bağımlılığı kaldırıldı: Bootstrap 5, tamamen saf JavaScript ile çalışır. jQuery eklemeniz gerekmez.
- Yeni utility API: Yardımcı sınıfları artık çok daha esnek biçimde özelleştirilebilir.
- Geliştirilmiş grid: Yatay eksende yeni
xxlbreakpoint eklendi (≥1400px). - RTL desteği: Arapça, Farsça gibi sağdan sola yazılan diller için yerleşik destek.
- Yeni bileşenler: Offcanvas, floating labels, enhanced accordion.
- CSS custom properties: Renk ve boyut değişkenleri CSS değişkenleri olarak kullanılabilir.
Bu rehber boyunca Bootstrap 5 kullanacağız. Güncel ve bakım altındaki sürüm olduğundan yeni projelerde 5’i tercih etmeniz önerilir.
Bootstrap Nasıl Kurulur?
Bootstrap’ı projenize eklemenin üç yolu vardır.
Yöntem 1: CDN ile Kullanım (En Hızlı Başlangıç)
Herhangi bir kurulum gerektirmez. HTML dosyanızın <head> bölümüne CSS linkini, <body> kapanmadan önce ise JS bundle linkini ekleyin:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap ile Sayfa</title>
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<h1 class="text-center text-primary mt-5">Merhaba Bootstrap!</h1>
<!-- Bootstrap 5 JS Bundle (Popper dahil) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
CDN yöntemi; prototipleme, hızlı test ve küçük projeler için idealdir. Ancak üretim ortamında özelleştirme yapmak istiyorsanız npm yöntemi daha uygundur.
Yöntem 2: npm ile Kurulum (Önerilen — Üretim Projeleri)
npm install bootstrap
Daha sonra JavaScript dosyanızda import edin:
// Tüm Bootstrap JS
import 'bootstrap';
// Yalnızca ihtiyaç duyulan bileşenler
import { Modal, Dropdown } from 'bootstrap';
CSS için SASS kullananlar için:
// bootstrap.scss veya main.scss içinde
@import "node_modules/bootstrap/scss/bootstrap";
Yalnızca belirli modülleri almak:
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/buttons";
@import "node_modules/bootstrap/scss/navbar";
Bu yaklaşım nihai bundle boyutunu önemli ölçüde düşürür.
Yöntem 3: Dosya İndirme
Bootstrap resmi sitesinden derlenmiş CSS ve JS dosyalarını indirip projenize ekleyebilirsiniz. Küçük ve bağımsız projeler için uygun bir yöntemdir.
Bootstrap Grid Sistemi
Bootstrap’ın en güçlü özelliği grid (ızgara) sistemidir. 12 sütunlu bu sistem; container, row ve col sınıflarının kombinasyonuyla çalışır.
Container (Kapsayıcı)
Her grid yapısı bir container içine yerleştirilir:
<!-- Ortalanmış sabit genişlikli container -->
<div class="container">...</div>
<!-- Her zaman tam genişlik -->
<div class="container-fluid">...</div>
<!-- Belirli bir breakpoint'e kadar tam genişlik, sonra sabit -->
<div class="container-lg">...</div>
Row ve Sütunlar
<div class="container">
<div class="row">
<!-- 12 sütunun 6'sını kaplar = %50 genişlik -->
<div class="col-6">Sol Alan</div>
<div class="col-6">Sağ Alan</div>
</div>
</div>
Responsive Breakpoint’ler
Bootstrap 5’in breakpoint sistemi:
| Breakpoint | Sınıf öneki | Başlangıç genişliği |
|---|---|---|
| Extra small | col- | < 576px |
| Small | col-sm- | ≥ 576px |
| Medium | col-md- | ≥ 768px |
| Large | col-lg- | ≥ 992px |
| X-Large | col-xl- | ≥ 1200px |
| XX-Large | col-xxl- | ≥ 1400px |
Gerçek dünya örneği — mobilde tek sütun, tablette iki, masaüstünde dört:
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">Kart 1</div>
<div class="col-12 col-sm-6 col-lg-3">Kart 2</div>
<div class="col-12 col-sm-6 col-lg-3">Kart 3</div>
<div class="col-12 col-sm-6 col-lg-3">Kart 4</div>
</div>
</div>
g-4 sınıfı; satır ve sütunlar arasındaki boşluğu (gutter) ayarlar. g-0’dan g-5’e kadar değer alır.
Otomatik Genişlik Sütunlar
<div class="row">
<!-- Eşit genişlikte 3 sütun otomatik bölünür -->
<div class="col">Sütun 1</div>
<div class="col">Sütun 2</div>
<div class="col">Sütun 3</div>
</div>
Ofset Kullanımı
<div class="row">
<!-- 3 sütun boşluk bırak, 6 sütun kapla -->
<div class="col-md-6 offset-md-3">Ortada İçerik</div>
</div>
Bootstrap Tipografi
Bootstrap, HTML’in varsayılan stillerini normalize ederek tutarlı bir tipografi temeli oluşturur.
<h1>Başlık 1 — 2.5rem</h1>
<h2>Başlık 2 — 2rem</h2>
<h3>Başlık 3 — 1.75rem</h3>
<!-- Display başlıklar — daha büyük ve ince -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>
<!-- Öne çıkan metin -->
<p class="lead">Giriş paragrafı için lead sınıfı daha büyük font-size verir.</p>
<!-- Metin hizalama -->
<p class="text-start">Sola hizalı</p>
<p class="text-center">Ortada hizalı</p>
<p class="text-end">Sağa hizalı</p>
<!-- Metin renkleri -->
<p class="text-primary">Birincil renk</p>
<p class="text-success">Başarı (yeşil)</p>
<p class="text-danger">Tehlike (kırmızı)</p>
<p class="text-warning">Uyarı (sarı)</p>
<p class="text-muted">Soluk metin</p>
Bootstrap Renk Sistemi
Bootstrap, semantic renk değişkenleri kullanır:
<!-- Arka plan renkleri -->
<div class="bg-primary text-white p-3">Primary</div>
<div class="bg-secondary text-white p-3">Secondary</div>
<div class="bg-success text-white p-3">Success</div>
<div class="bg-danger text-white p-3">Danger</div>
<div class="bg-warning text-dark p-3">Warning</div>
<div class="bg-info text-dark p-3">Info</div>
<div class="bg-light text-dark p-3">Light</div>
<div class="bg-dark text-white p-3">Dark</div>
CSS değişkenleriyle özelleştirme:
:root {
--bs-primary: #d4f73c; /* Kendi marka renginiz */
--bs-primary-rgb: 212, 247, 60;
}
Bootstrap Butonlar
<!-- Temel buton stilleri -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Başarı</button>
<button class="btn btn-danger">Tehlike</button>
<button class="btn btn-outline-primary">Outline Primary</button>
<!-- Boyutlar -->
<button class="btn btn-primary btn-lg">Büyük Buton</button>
<button class="btn btn-primary btn-sm">Küçük Buton</button>
<!-- Tam genişlik buton -->
<button class="btn btn-primary w-100">Tam Genişlik</button>
<!-- Devre dışı -->
<button class="btn btn-primary" disabled>Devre Dışı</button>
<!-- Link gibi görünen buton -->
<a href="/iletisim" class="btn btn-primary" role="button">
Teklif Al
</a>
Landing page tasarımı projelerinde CTA butonları dönüşümün en kritik ögesidir — Bootstrap’ın btn bileşenleri bu kullanım için oldukça esnektir.
Bootstrap Navbar (Navigasyon Çubuğu)
Navbar, web sitelerinin olmazsa olmaz bileşenidir. Bootstrap’ın hazır navbar’ı responsive, erişilebilir ve özelleştirilebilirdir:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- Marka / Logo -->
<a class="navbar-brand" href="/">Şirket Adı</a>
<!-- Hamburger butonu (mobilde görünür) -->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menü linkleri -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="/">Anasayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/hizmetler">Hizmetler</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/hakkimda">Hakkımda</a>
</li>
<li class="nav-item">
<a class="btn btn-primary ms-2" href="/iletisim">İletişim</a>
</li>
</ul>
</div>
</div>
</nav>
navbar-expand-lg sınıfı; büyük ekranlarda tam menüyü, lg breakpoint’in altında hamburger menüyü gösterir. ms-auto ise linkleri sağa hizalar.
Kurumsal web tasarım projelerinde üst navigasyon yapısı kullanıcı deneyimini doğrudan etkileyen kritik bir tasarım öğesidir.
Bootstrap Card (Kart) Bileşeni
Kartlar; içerik gruplamak, portföy göstermek ve hizmet listelemek için en sık kullanılan bileşenlerden biridir:
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<img src="/images/hizmet.jpg" class="card-img-top" alt="Hizmet görseli" />
<div class="card-body d-flex flex-column">
<h5 class="card-title">Web Tasarım</h5>
<p class="card-text text-muted flex-grow-1">
Modern, hızlı ve mobil uyumlu web siteleri tasarlıyoruz.
</p>
<a href="/hizmetler/web-tasarim" class="btn btn-outline-primary mt-3">
Detaylı Bilgi
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<span class="badge bg-primary mb-2 align-self-start">Popüler</span>
<h5 class="card-title">WordPress Web Tasarım</h5>
<p class="card-text text-muted flex-grow-1">
Yönetimi kolay WordPress tabanlı kurumsal siteler.
</p>
<a href="/hizmetler/wordpress-web-tasarim" class="btn btn-primary mt-3">
Teklif Al
</a>
</div>
</div>
</div>
</div>
h-100 tüm kartları eşit yüksekliğe getirir; d-flex flex-column ve flex-grow-1 ise butonu her zaman kartın altına yapıştırır.
Bootstrap Formlar
Bootstrap form bileşenleri erişilebilir, stillendirilmiş ve validasyon için hazır gelir:
<form>
<!-- Metin girişi -->
<div class="mb-3">
<label for="adSoyad" class="form-label">Ad Soyad</label>
<input
type="text"
class="form-control"
id="adSoyad"
placeholder="Adınızı girin"
/>
</div>
<!-- E-posta -->
<div class="mb-3">
<label for="email" class="form-label">E-posta Adresi</label>
<input
type="email"
class="form-control"
id="email"
placeholder="[email protected]"
/>
<div class="form-text">Bilgileriniz üçüncü taraflarla paylaşılmaz.</div>
</div>
<!-- Select (Dropdown) -->
<div class="mb-3">
<label for="hizmet" class="form-label">İlgilendiğiniz Hizmet</label>
<select class="form-select" id="hizmet">
<option value="">Seçiniz...</option>
<option value="web">Web Tasarım</option>
<option value="seo">SEO Danışmanlığı</option>
<option value="reklam">Reklam Yönetimi</option>
</select>
</div>
<!-- Textarea -->
<div class="mb-3">
<label for="mesaj" class="form-label">Mesajınız</label>
<textarea class="form-control" id="mesaj" rows="4"></textarea>
</div>
<!-- Checkbox -->
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="kvkk" />
<label class="form-check-label" for="kvkk">
KVKK aydınlatma metnini okudum ve onaylıyorum.
</label>
</div>
<button type="submit" class="btn btn-primary w-100">Gönder</button>
</form>
Floating Labels (Bootstrap 5 yeniliği):
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatEmail" placeholder="E-posta" />
<label for="floatEmail">E-posta Adresi</label>
</div>
Bootstrap Modal (Diyalog Penceresi)
Modal’lar; teklif formları, ürün detayları veya uyarı mesajları için kullanılır:
<!-- Tetikleyici buton -->
<button
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#teklifModal"
>
Teklif İste
</button>
<!-- Modal yapısı -->
<div class="modal fade" id="teklifModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Ücretsiz Teklif İste</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Adınız" />
</div>
<div class="mb-3">
<input type="tel" class="form-control" placeholder="Telefon" />
</div>
<div class="mb-0">
<select class="form-select">
<option>Web Tasarım</option>
<option>SEO</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
<button class="btn btn-primary">Gönder</button>
</div>
</div>
</div>
</div>
Tek sayfa web tasarımı (one-page site) projelerinde modal’lar iletişim formunu ve teklif sistemini ayrı sayfa açmadan sunmak için sıkça kullanılır.
Bootstrap Alert (Uyarı Mesajları)
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Başarılı!</strong> Formunuz başarıyla gönderildi.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<div class="alert alert-danger" role="alert">
Bir hata oluştu. Lütfen tekrar deneyin.
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13..."/>
</svg>
Dikkat: Bu alanı doldurmanız zorunludur.
</div>
Bootstrap Accordion (Akordeon)
SSS bölümü veya içerik grupları için idealdir:
<div class="accordion" id="sssAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="sss1">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sss1Icerik"
>
Bootstrap öğrenmek ne kadar sürer?
</button>
</h2>
<div id="sss1Icerik" class="accordion-collapse collapse show"
data-bs-parent="#sssAccordion">
<div class="accordion-body">
Temel HTML ve CSS bilgisiyle Bootstrap'ı 1–2 haftada öğrenebilirsiniz.
Grid sistemi ve hazır bileşenler ilk günden üretken olmanızı sağlar.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="sss2">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sss2Icerik"
>
Bootstrap ücretsiz mi?
</button>
</h2>
<div id="sss2Icerik" class="accordion-collapse collapse"
data-bs-parent="#sssAccordion">
<div class="accordion-body">
Evet, Bootstrap MIT lisansıyla tamamen ücretsiz ve açık kaynaklıdır.
Ticari projelerde de serbestçe kullanılabilir.
</div>
</div>
</div>
</div>
Bootstrap Carousel (Görsel Slayt)
<div id="anaSlider" class="carousel slide" data-bs-ride="carousel">
<!-- İndikatörler -->
<div class="carousel-indicators">
<button data-bs-target="#anaSlider" data-bs-slide-to="0" class="active"></button>
<button data-bs-target="#anaSlider" data-bs-slide-to="1"></button>
<button data-bs-target="#anaSlider" data-bs-slide-to="2"></button>
</div>
<!-- Slaytlar -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/slide-1.jpg" class="d-block w-100" alt="Slayt 1" />
<div class="carousel-caption d-none d-md-block">
<h5>Profesyonel Web Tasarım</h5>
<p>Modern, hızlı ve dönüşüm odaklı siteler.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/slide-2.jpg" class="d-block w-100" alt="Slayt 2" />
</div>
<div class="carousel-item">
<img src="/images/slide-3.jpg" class="d-block w-100" alt="Slayt 3" />
</div>
</div>
<!-- Kontroller -->
<button class="carousel-control-prev" data-bs-target="#anaSlider" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#anaSlider" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Bootstrap Offcanvas (Kenar Çekmecesi)
Bootstrap 5 ile gelen Offcanvas, mobil menüler ve filtre panelleri için mükemmeldir:
<!-- Tetikleyici -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu">
Menüyü Aç
</button>
<!-- Offcanvas Yapısı -->
<div class="offcanvas offcanvas-start" id="mobileMenu">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Menü</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<nav class="nav flex-column">
<a class="nav-link" href="/">Anasayfa</a>
<a class="nav-link" href="/hizmetler/web-tasarim">Web Tasarım</a>
<a class="nav-link" href="/hizmetler/seo">SEO</a>
<a class="nav-link" href="/iletisim">İletişim</a>
</nav>
</div>
</div>
Bootstrap Utility (Yardımcı) Sınıfları
Bootstrap’ın utility sınıfları, CSS yazmadan doğrudan HTML’de hızlı stil uygulamanızı sağlar.
Spacing (Boşluk)
<!-- m = margin, p = padding -->
<!-- t = top, b = bottom, s = start(left), e = end(right), x = yatay, y = dikey -->
<!-- 0–5 arası değer (5 = 3rem) -->
<div class="mt-4">Üstten 1.5rem margin</div>
<div class="px-3">Yatay 1rem padding</div>
<div class="mb-0">Alt margin sıfır</div>
<div class="p-5">Her yönden 3rem padding</div>
Display
<div class="d-none">Gizli</div>
<div class="d-block">Block</div>
<div class="d-flex">Flex</div>
<div class="d-grid">Grid</div>
<!-- Responsive display -->
<div class="d-none d-md-block">Sadece orta+ ekranlarda görünür</div>
<div class="d-md-none">Sadece mobilde görünür</div>
Flexbox Yardımcıları
<div class="d-flex justify-content-between align-items-center">
<span>Sol</span>
<span>Sağ</span>
</div>
<div class="d-flex gap-3 flex-wrap">
<div>Öğe 1</div>
<div>Öğe 2</div>
<div>Öğe 3</div>
</div>
Boyut Yardımcıları
<div class="w-100">Tam genişlik</div>
<div class="w-50">Yarım genişlik</div>
<div class="h-100">Tam yükseklik</div>
<img class="img-fluid" src="..." alt="..." /> <!-- Responsive görsel -->
Border ve Shadow
<div class="border border-primary rounded">Kenarlık</div>
<div class="rounded-pill">Hap şekli</div>
<div class="shadow">Gölge</div>
<div class="shadow-lg">Büyük gölge</div>
<div class="shadow-none">Gölge yok</div>
Bootstrap ile Tam Sayfa Örneği
Yukarıdakileri birleştiren gerçekçi bir sayfa iskelet yapısı:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Profesyonel Web Tasarım Hizmeti</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.hero { background: linear-gradient(135deg, #0d0d0d, #1a1a2e); color: #fff; padding: 100px 0; }
.section { padding: 80px 0; }
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand fw-bold" href="/">Onur Öztürk</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav ms-auto gap-2">
<li class="nav-item"><a class="nav-link" href="/">Anasayfa</a></li>
<li class="nav-item"><a class="nav-link" href="/hizmetler">Hizmetler</a></li>
<li class="nav-item">
<a class="btn btn-primary btn-sm" href="/iletisim">Teklif Al</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="container text-center">
<span class="badge bg-primary mb-3">Profesyonel Web Tasarım</span>
<h1 class="display-4 fw-bold mb-4">
İşletmeniz İçin<br />Güçlü Bir Dijital Varlık
</h1>
<p class="lead text-white-50 mb-5 mx-auto" style="max-width:600px;">
Modern, hızlı ve dönüşüm odaklı web siteleri. SEO uyumlu altyapı. 7–14 günde teslim.
</p>
<div class="d-flex gap-3 justify-content-center flex-wrap">
<a href="/iletisim" class="btn btn-primary btn-lg">Ücretsiz Teklif Al</a>
<a href="/hizmetler/web-tasarim" class="btn btn-outline-light btn-lg">
Portföyü İncele
</a>
</div>
</div>
</section>
<!-- HİZMETLER -->
<section class="section bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold">Hizmetlerimiz</h2>
<p class="text-muted">Her sektör için özelleştirilmiş web tasarım çözümleri</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<h5 class="card-title">Kurumsal Web Tasarım</h5>
<p class="card-text text-muted">
Marka değerinizi yansıtan kurumsal dijital kimlik.
</p>
<a href="/hizmetler/kurumsal-web-tasarim"
class="btn btn-outline-primary btn-sm">
İncele →
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<h5 class="card-title">WordPress Web Tasarım</h5>
<p class="card-text text-muted">
Yönetimi kolay, SEO uyumlu WordPress siteleri.
</p>
<a href="/hizmetler/wordpress-web-tasarim"
class="btn btn-outline-primary btn-sm">
İncele →
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<h5 class="card-title">Landing Page Tasarımı</h5>
<p class="card-text text-muted">
Dönüşüm oranını maksimize eden tek sayfalık yapılar.
</p>
<a href="/hizmetler/landing-page-tasarim"
class="btn btn-outline-primary btn-sm">
İncele →
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-dark text-white py-5">
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<h6 class="fw-bold mb-3">Onur Öztürk</h6>
<p class="text-white-50 small">
SEO uzmanı ve web tasarımcı. 15+ yıllık deneyimle.
</p>
</div>
<div class="col-md-4">
<h6 class="fw-bold mb-3">Hizmetler</h6>
<ul class="list-unstyled small text-white-50">
<li><a href="/hizmetler/web-tasarim" class="text-white-50 text-decoration-none">Web Tasarım</a></li>
<li><a href="/hizmetler/seo" class="text-white-50 text-decoration-none">SEO</a></li>
</ul>
</div>
<div class="col-md-4">
<h6 class="fw-bold mb-3">İletişim</h6>
<a href="/iletisim" class="btn btn-primary btn-sm">Bize Ulaşın</a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Bootstrap’ı SASS ile Özelleştirme
Bootstrap’ın en güçlü özelliği, SASS değişkenleriyle derinlemesine özelleştirilebilmesidir:
// custom.scss — Bootstrap'ı import etmeden ÖNCE değişkenleri tanımlayın
// Marka renklerinizi tanımlayın
$primary: #d4f73c;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
// Tipografi
$font-family-sans-serif: 'Inter', sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.7;
// Border radius
$border-radius: 8px;
$border-radius-lg: 12px;
// Grid ayarları
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
// Şimdi Bootstrap'ı import edin
@import "node_modules/bootstrap/scss/bootstrap";
// Kendi özel stilleriniz aşağıda
.hero-section {
background: linear-gradient(135deg, $primary, darken($primary, 20%));
}
Bu yaklaşım; tüm Bootstrap bileşenlerini kendi marka renklerinizle otomatik günceller ve gereksiz CSS üretmez.
Bootstrap JavaScript API
Bootstrap bileşenlerini JavaScript ile de kontrol edebilirsiniz:
// Modal'ı JavaScript ile açma/kapatma
const modal = new bootstrap.Modal(document.getElementById('teklifModal'));
modal.show();
modal.hide();
// Toast gösterme
const toastEl = document.getElementById('successToast');
const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
toast.show();
// Tooltip başlatma (tüm tooltip'ler için)
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(
el => new bootstrap.Tooltip(el)
);
// Carousel'i JavaScript ile yönetme
const carousel = bootstrap.Carousel.getInstance('#anaSlider');
carousel.next();
carousel.pause();
Bootstrap Ne Zaman Kullanılmalı, Ne Zaman Kullanılmamalı?
Kullanın Eğer:
- Hızlı prototipleme yapıyorsanız: Bootstrap ile saatler içinde görsel olarak tamamlanmış bir sayfa elde edersiniz.
- Küçük-orta ölçekli projeler için: İçerik sitesi, portföy, kurumsal tanıtım sayfası, landing page.
- Ekip çalışmasında: Herkesin aynı framework’ü bildiği durumlarda kod tutarlılığı sağlanır.
- Backend geliştiriciler için: Tasarım bilgisi sınırlıyken görsel olarak kabul edilebilir arayüzler oluşturmak.
Kullanmayı Düşünün Eğer:
- Çok özgün tasarımlar: Bootstrap’ın opinionated stilleri özgün tasarımları uygulamayı zorlaştırabilir. Tailwind CSS gibi utility-first yaklaşımlar daha esnektir.
- Maksimum performans öncelikliyse: Bootstrap’ın tam paketi ~30KB CSS + ~16KB JS gerektirir. Yalnızca utility class’lara ihtiyacınız varsa Tailwind daha küçük çıktı üretir.
- Büyük SPA (Single Page Application) projeleri: React, Vue veya Angular projeleri için Bootstrap yerine bileşen kütüphaneleri (Shadcn, Radix UI, Chakra UI) daha bütünleşik deneyim sunar.
Webflow ile web tasarım gibi no-code/low-code platformlar, Bootstrap’a alternatif olarak görsel geliştirme ortamı sunar — kod yazmadan da profesyonel düzeyde sonuç alınabilir.
Bootstrap vs Tailwind CSS
En sık sorulan soru: Bootstrap mi Tailwind mi?
| Özellik | Bootstrap | Tailwind CSS |
|---|---|---|
| Hazır bileşenler | Var (Navbar, Modal, Card…) | Yok (bileşen kütüphanesi ayrı) |
| Öğrenme eğrisi | Düşük | Orta |
| Özelleştirme | SASS değişkenleri | Yapılandırma dosyası |
| CSS çıktı boyutu | ~30KB (minified) | Purge ile çok küçük |
| Tasarım özgürlüğü | Orta | Çok yüksek |
| jQuery bağımlılığı | Bootstrap 5’te yok | Hiç yok |
| Ekosistem | Çok büyük | Hızla büyüyen |
Öneri: Hızlı başlamak, hazır bileşenlerden yararlanmak ve küçük-orta projeler için Bootstrap; özgün tasarım sistemi kurmak ve büyük projeler için Tailwind daha uygun.
Bootstrap ve SEO
Bootstrap’ın SEO üzerindeki etkisi ikincildir — framework’ün kendisi sıralamayı etkilemez. Ancak Bootstrap kullanımının dolaylı SEO etkileri vardır:
Olumlu Etkiler:
- Mobil uyumlu responsive yapı → Google Mobile-First Indexing için kritik
- Temiz, semantik HTML yapısını destekler
- Grid sistemi ile sayfa yapısı hızlı kurulur, erişilebilir navigasyon kolay uygulanır
Dikkat Edilmesi Gerekenler:
- Bootstrap’ın tüm CSS’ini yüklemek sayfa ağırlığını artırır; kullanılmayan CSS’i tree-shaking ile ayıklayın
- JavaScript bundle’ı
deferveyaasyncile yükleyin - Görselleri
img-fluidile responsive yapın vealtattribute’larını ihmal etmeyin
Doktorlar için web tasarımı veya klinikler için web tasarımı gibi YMYL kategorisindeki projelerde sayfa hızı ve erişilebilirlik standartları çok daha kritiktir — bu projelerde Bootstrap kullanıyorsanız kullanılmayan bileşenleri mutlaka ayıklayın.
Sektöre Göre Bootstrap Kullanım Örnekleri
Sağlık ve Klinik Siteleri
Sağlık turizmi web tasarımı projelerinde Bootstrap grid sistemi ile çok dilli sayfa yapısı hızla kurulabilir. Randevu formu bileşenleri, uzman kartları ve hizmet accordion’ları doğrudan hazır bileşenlerle uygulanır.
<!-- Doktor profil kartı örneği -->
<div class="card border-0 text-center shadow-sm">
<img src="/images/doktor.jpg" class="card-img-top rounded-top" alt="Doktor adı" />
<div class="card-body">
<h5 class="card-title mb-1">Dr. Ahmet Yılmaz</h5>
<p class="text-muted small mb-3">Ortopedi ve Travmatoloji Uzmanı</p>
<a href="/randevu" class="btn btn-primary btn-sm w-100">Randevu Al</a>
</div>
</div>
Hukuk Bürosu Siteleri
Avukatlar için web tasarımı projelerinde güven inşası ön plandadır. Bootstrap’ın card ve accordion bileşenleri uzmanlık alanlarını ve SSS bölümlerini yapılandırmak için ideal araçlar sunar.
Otel ve Konaklama Siteleri
Oteller için web tasarımı projelerinde Bootstrap carousel ile oda galerisi, grid ile oda karşılaştırma tablosu ve modal ile rezervasyon formu kombine biçimde kullanılabilir.
Dernek ve Vakıf Siteleri
Dernek ve vakıf web tasarımı projelerinde etkinlik takvimi, bağış formu ve duyuru listesi gibi yapılar Bootstrap’ın hazır bileşenleriyle hızla kurulur.
Vaka Kurgusu: Bootstrap ile Hızlı Lansman Senaryosu
Bootstrap’ın gerçek dünyada nasıl bir zaman kazandırdığını göstermek için kurgusal bir senaryo üzerinden ilerleyelim. Aşağıdaki örnek, belirli bir müşteriye ait gerçek veri içermez; tipik bir sürecin nasıl işleyebileceğini göstermek amacıyla oluşturulmuştur.
Durum: Yeni kurulan bir danışmanlık firması, bir hafta sonra düzenlenecek bir networking etkinliğine yetişecek şekilde kurumsal bir tanıtım sitesine ihtiyaç duyuyor. Bütçe sınırlı, özel bir tasarım sistemine yatırım yapacak zaman yok.
Karar süreci: Ekip, sıfırdan CSS yazmak yerine Bootstrap 5’i CDN üzerinden projeye dahil etmeye karar veriyor. Amaç, görsel olarak tutarlı ve mobil uyumlu bir site iskeletini en kısa sürede ayağa kaldırmak.
Uygulama adımları:
- Gün 1: Navbar, hero bölümü ve hizmetler grid’i Bootstrap’ın hazır sınıflarıyla kuruldu. Sıfırdan CSS yazılmadı; yalnızca marka renkleri için birkaç utility class özelleştirildi.
- Gün 2: Card bileşenleriyle hizmet listeleme, accordion ile SSS bölümü ve form bileşenleriyle iletişim formu eklendi.
- Gün 3: Responsive testler yapıldı — mobil, tablet ve masaüstü görünümleri breakpoint sınıflarıyla ince ayar edildi.
- Gün 4-5: İçerik girişi, görsel optimizasyonu ve temel SEO meta etiketleri tamamlandı.
- Gün 6: Son testler, form validasyonu kontrolü ve yayına alma.
Sonuç: Site, hedeflenen tarihten önce yayına girdi. Sıfırdan bir tasarım sistemi kurulmuş olsaydı, aynı kapsamın muhtemelen iki katı süreye ihtiyaç duyacağı değerlendirildi — çünkü grid sistemi, form stilleri ve responsive davranış gibi temel unsurların her biri sıfırdan yazılmak yerine hazır sınıflarla çözüldü.
(Vaka temsilidir. Yukarıdaki senaryo ve süre tahminleri, Bootstrap kullanımının tipik faydalarını göstermek amacıyla kurgulanmıştır; belirli bir projeye ait ölçülmüş veri değildir.)
Sık Yapılan Hatalar
Bootstrap kullanırken yeni başlayanların ve hatta deneyimli geliştiricilerin tekrar tekrar düştüğü hatalar aşağıda listelenmiştir.
- Container/row/col hiyerarşisini atlamak. Bir
col-*sınıfını doğrudanrowolmadan kullanmak, grid sisteminin beklenmedik biçimde bozulmasına yol açar. Her sütun mutlaka birrowiçinde, herrowda bircontaineriçinde olmalıdır. - Bootstrap’ın tamamını yüklemek, yalnızca birkaç bileşeni kullanmak. CDN üzerinden tüm CSS ve JS dosyasını yükleyip yalnızca birkaç buton ve grid sınıfı kullanmak, gereksiz sayfa ağırlığına yol açar. SASS ile modüler import büyük projelerde tercih edilmelidir.
- jQuery’yi Bootstrap 5 ile birlikte gereksiz yere eklemek. Bootstrap 5, jQuery’ye ihtiyaç duymaz. Eski alışkanlıkla jQuery eklemeye devam etmek, gereksiz bir bağımlılık ve performans yükü yaratır.
- Breakpoint sınıflarını yanlış sırayla kullanmak.
col-lg-6 col-4gibi bir sıralama beklenmeyen sonuçlar doğurabilir; Bootstrap’ın mobile-first mantığında küçük ekrandan büyük ekrana doğru (col-,col-sm-,col-md-…) sınıflandırma yapılmalıdır. - Marka renklerini
!importantile ezmeye çalışmak. Bootstrap’ın varsayılan renklerini CSS içinde!importantkullanarak değiştirmek yerine SASS değişkenlerini ($primary,$secondary) baştan tanımlamak, hem daha temiz hem de daha sürdürülebilir bir yaklaşımdır. - Data attribute’larını (
data-bs-*) unutmak. Modal, dropdown, accordion gibi JS bağımlı bileşenler doğrudata-bs-togglevedata-bs-targetdeğerleri olmadan çalışmaz. Bu, en sık karşılaşılan “bileşen çalışmıyor” şikayetinin kaynağıdır. - Erişilebilirliği göz ardı etmek. Bootstrap bileşenleri erişilebilir olacak şekilde tasarlanmıştır ama
altmetinleri,aria-labeletiketleri ve klavye navigasyonu geliştirici tarafından tamamlanmalıdır. Bu detaylar atlandığında bileşenler görsel olarak çalışsa da ekran okuyucularla uyumsuz kalabilir. - Bootstrap sürümlerini karıştırmak. Bootstrap 4 ve Bootstrap 5 sınıf adlandırmaları arasında farklar vardır (
ml-*/mr-*yerinems-*/me-*gibi). Farklı sürümlerden kopyalanan kod parçalarını birbirine karıştırmak, stillerin bozulmasına yol açar.
Sıkça Sorulan Sorular
Sonuç: Bootstrap Hâlâ Değerli mi?
2026’da Bootstrap, frontend geliştirme dünyasında hâlâ güçlü ve geçerliliğini koruyan bir araçtır. Tailwind CSS’in yükselişine karşın Bootstrap’ın hazır bileşen ekosistemi, geniş topluluk desteği ve düşük öğrenme eğrisi onu vazgeçilmez kılar.
Hızlı bir şekilde profesyonel görünümlü, mobil uyumlu ve erişilebilir web arayüzleri oluşturmak isteyenler için Bootstrap ilk öğrenilmesi gereken frontend araçlarından biri olmayı sürdürmektedir.
Öğrendiklerinizi gerçek bir projeye dönüştürmek için profesyonel web tasarım hizmetimizi inceleyebilir veya doğrudan iletişime geçebilirsiniz.