← Blog'a Dön
Bootstrap Nasıl Kullanılır? 2026'da Baştan Sona Kapsamlı Rehber
Web Tasarım 42 dk okuma Yayın: Güncelleme:

Bootstrap Nasıl Kullanılır? 2026'da Baştan Sona Kapsamlı Rehber

Bootstrap nasıl kurulur, grid sistemi nasıl çalışır, hangi bileşenler var? Kod örnekleriyle Bootstrap 5 rehberi. Responsive web tasarımda Bootstrap kullanımı.

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 xxl breakpoint 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:

BreakpointSınıf önekiBaşlangıç genişliği
Extra smallcol-< 576px
Smallcol-sm-≥ 576px
Mediumcol-md-≥ 768px
Largecol-lg-≥ 992px
X-Largecol-xl-≥ 1200px
XX-Largecol-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>

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

ÖzellikBootstrapTailwind CSS
Hazır bileşenlerVar (Navbar, Modal, Card…)Yok (bileşen kütüphanesi ayrı)
Öğrenme eğrisiDüşükOrta
ÖzelleştirmeSASS değişkenleriYapı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 yokHiç yok
EkosistemÇok büyükHı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’ı defer veya async ile yükleyin
  • Görselleri img-fluid ile responsive yapın ve alt attribute’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ı:

  1. 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.
  2. Gün 2: Card bileşenleriyle hizmet listeleme, accordion ile SSS bölümü ve form bileşenleriyle iletişim formu eklendi.
  3. Gün 3: Responsive testler yapıldı — mobil, tablet ve masaüstü görünümleri breakpoint sınıflarıyla ince ayar edildi.
  4. Gün 4-5: İçerik girişi, görsel optimizasyonu ve temel SEO meta etiketleri tamamlandı.
  5. 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.

  1. Container/row/col hiyerarşisini atlamak. Bir col-* sınıfını doğrudan row olmadan kullanmak, grid sisteminin beklenmedik biçimde bozulmasına yol açar. Her sütun mutlaka bir row içinde, her row da bir container içinde olmalıdır.
  2. 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.
  3. 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.
  4. Breakpoint sınıflarını yanlış sırayla kullanmak. col-lg-6 col-4 gibi 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.
  5. Marka renklerini !important ile ezmeye çalışmak. Bootstrap’ın varsayılan renklerini CSS içinde !important kullanarak 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.
  6. Data attribute’larını (data-bs-*) unutmak. Modal, dropdown, accordion gibi JS bağımlı bileşenler doğru data-bs-toggle ve data-bs-target değerleri olmadan çalışmaz. Bu, en sık karşılaşılan “bileşen çalışmıyor” şikayetinin kaynağıdır.
  7. Erişilebilirliği göz ardı etmek. Bootstrap bileşenleri erişilebilir olacak şekilde tasarlanmıştır ama alt metinleri, aria-label etiketleri 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.
  8. Bootstrap sürümlerini karıştırmak. Bootstrap 4 ve Bootstrap 5 sınıf adlandırmaları arasında farklar vardır (ml-*/mr-* yerine ms-*/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

Bootstrap öğrenmek için ne kadar süre gerekir?
Temel HTML ve CSS bilgisine sahip birinin Bootstrap’ı kullanabilir seviyeye gelmesi genellikle 1-2 hafta sürer. Grid sistemi ve temel bileşenler birkaç günde kavranır; SASS özelleştirmesi ve JavaScript API’si birkaç haftalık pratikle yerleşir. Zaten HTML/CSS bilmeyen biri için bu süre 3-4 haftaya uzayabilir çünkü önce temel web geliştirme kavramlarının oturması gerekir.
Bootstrap ücretsiz mi?
Evet. Bootstrap, MIT lisansıyla tamamen ücretsiz ve açık kaynaklıdır. Kişisel ve ticari her türlü projede serbestçe kullanılabilir, herhangi bir ücret veya lisans bedeli gerekmez. Kaynak kodu GitHub üzerinde herkese açıktır ve topluluk katkılarıyla geliştirilmeye devam etmektedir.
Bootstrap 5 ile jQuery kullanmak gerekiyor mu?
Hayır. Bootstrap 5, jQuery bağımlılığını tamamen kaldırdı. Tüm JavaScript işlevselliği saf (vanilla) JavaScript ile çalışır. Eski Bootstrap 3/4 projelerinde jQuery hâlâ gerekliydi ama Bootstrap 5’e geçişte jQuery’yi projeden tamamen çıkarabilirsiniz; bu da sayfa yükleme performansını olumlu etkiler.
Bootstrap mobil uyumlu siteler yapabilir mi?
Evet, bu Bootstrap’ın temel gücüdür. Mobil öncelikli (mobile-first) yaklaşımıyla tasarlanan grid sistemi, breakpoint sınıflarıyla farklı ekran boyutlarında otomatik düzen değişimi sağlar. Doğru kullanıldığında ek medya sorgusu (media query) yazmaya neredeyse hiç gerek kalmaz.
Bootstrap ile SEO uyumlu site yapılabilir mi?
Evet. Bootstrap semantik HTML kullanımını destekler ve SEO’ya doğrudan engel olmaz. Sayfa hızı için kullanılmayan CSS ve JS’yi ayıklama (tree-shaking/purge) önemlidir; aksi hâlde gereksiz kod yükü Core Web Vitals metriklerini olumsuz etkileyebilir. Grid ve responsive yapı, mobil uyumluluk açısından dolaylı bir SEO avantajı sağlar.
Bootstrap mu Tailwind CSS mi tercih etmeliyim?
Hızlı prototipleme ve hazır bileşen ihtiyacı için Bootstrap; özgün tasarım sistemi ve utility-first yaklaşım için Tailwind daha uygundur. İkisi birbirinin doğrudan rakibi değil, farklı ihtiyaçlara cevap veren araçlardır. Ekip deneyimi de belirleyicidir: ekip zaten Bootstrap biliyorsa, “daha modern” diye Tailwind’e geçmek her zaman doğru karar olmayabilir.
Bootstrap React veya Vue ile kullanılabilir mi?
Evet, ancak Bootstrap’ın JavaScript bileşenlerini doğrudan React/Vue ile kullanmak yerine React-Bootstrap veya Reactstrap gibi özel kütüphaneleri tercih etmek daha temiz bir yaklaşım sunar. Bunun nedeni, Bootstrap’ın DOM manipülasyonunun React/Vue’nun sanal DOM mantığıyla doğrudan çakışabilmesidir. CSS katmanını React/Vue projelerine eklemek ise sorunsuz çalışır.
Bootstrap dosyaları ne büyüklükte ve performansı nasıl etkiler?
Bootstrap 5’in minified hâli yaklaşık CSS 30KB ve JS Bundle 16KB, toplamda 46KB civarındadır. Yalnızca kullandığınız modülleri SASS üzerinden import ederek bu boyutu önemli ölçüde düşürebilirsiniz. Büyük ölçekli, performans kritik projelerde tam paket yerine modüler import yaklaşımı tercih edilmelidir.

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.

Onur Öztürk, SEO uzmanı
// yazar

Onur ÖZTÜRK

SEO Uzmanı & Dijital Pazarlama Danışmanı

15 yılı aşkın deneyimle sağlık turizmi, e-ticaret ve kurumsal markalar için SEO stratejisi geliştiriyorum. Google Partner ve Meta Business Partner olarak 150'den fazla işletmenin organik büyümesine katkı sağladım. SEO'nun yanında web tasarım, reklam yönetimi ve logo tasarımı hizmetlerini de ekibimle birlikte yürütüyorum.

// google arama

Bu içerikleri Google'da daha sık görün

onuroztr.com'u tercih edilen kaynak olarak ekleyin; yazılarımız arama sonuçlarında ve yapay zeka özetlerinde size daha sık gösterilsin.

WhatsApp'tan yazın Genellikle 1 saat içinde dönüyorum
WhatsApp Toplantı Planlayın