WEB GELİŞTİRİCİLER İÇİN BOOTSTRAP EĞİTİMİ

Bootstrap 5 ile hızlı ve responsive arayüzler

Grid sistemi, bileşenler, formlar, JavaScript eklentileri ve Sass ile özelleştirme

Web Geliştiriciler için Bootstrap Eğitimi, en yaygın CSS çatısı Bootstrap 5 ile hızlı, responsive ve tutarlı arayüzler geliştirmeyi öğretir.

4 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Grid ve yardımcı sınıflardan bileşenlere ve Sass ile tema özelleştirmeye Bootstrap 5

Web Geliştiriciler için Bootstrap Eğitimi, dünyanın en yaygın CSS çatısı Bootstrap 5 ile hızlı, responsive ve tutarlı arayüzler geliştirmeyi öğretir. Katılımcılar grid sistemi, kırılma noktaları ve yardımcı (utility) sınıfları öğrenir; button, card, navbar, modal gibi bileşenleri ve form kontrollerini uygular. JavaScript eklentileriyle etkileşim eklenir ve Sass değişkenleri ile tema özelleştirilir. Program responsive bir dashboard projesiyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; kısa anlatımların ardından responsive bir arayüz Bootstrap bileşenleriyle adım adım geliştirilir.

Seviye

Orta Seviye — Bootstrap 5 ile hızlı, responsive ve tutarlı web arayüzleri geliştirme programı

Öğrenme Metodu

Her modülde bir Bootstrap bileşeni örnek arayüze eklenir; dört gün boyunca responsive bir dashboard projesi birlikte kurulur.

Neden Bu Eğitim?

⚡Hızlı geliştirme

Hazır grid ve bileşenlerle arayüzleri sıfırdan CSS yazmadan çok daha hızlı kurar, geliştirme süresini ciddi biçimde kısaltırsınız.

📐Tutarlı tasarım

Standart boşluk, renk ve bileşen sistemiyle ekip içinde tutarlı, bakımı kolay ve profesyonel görünümlü arayüzler üretirsiniz.

🎨Özelleştirilebilir

Sass değişkenleri ve utility API ile Bootstrap'i kurumsal markaya uyarlayarak kendi tasarım sisteminizi kurabilirsiniz.

Anahtar Konular

bootstrap eğitimibootstrap 5 kursuresponsive tasarım eğitimicss framework kursubootstrap grid eğitimiön yüz geliştirme eğitimibootstrap bileşenlerisass özelleştirme eğitimiweb arayüz geliştirme kursubootstrap dashboard eğitimi
“Bootstrap, iyi tasarımı herkes için erişilebilir kılar; onu özelleştirmeyi öğrenmek sizi gerçek bir ön yüz ustası yapar.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak ön bilgi ve ortam gereksinimleri

1
HTML bilgisi

Etiketler, form yapısı ve semantik düzeni rahat kullanabilmek, bileşenleri doğru işaretlemek için gerekir.

2
Temel CSS

Seçiciler, box model ve temel düzen kavramlarına aşinalık, Bootstrap sınıflarını anlamayı kolaylaştırır.

3
Tarayıcı araçları

Geliştirici araçlarını (DevTools) açıp öğe inceleyebilmek, sınıfların etkisini görmek için faydalıdır.

4
Geliştirme ortamı

VS Code gibi bir editör ve güncel bir tarayıcı yeterlidir; Sass için Node.js kurulumu önerilir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Bootstrap'i projeye ekler, container ve grid sistemini kullanır, kırılma noktalarıyla responsive sütunlar kurar ve spacing yardımcılarını uygular.
Modül 1
Bootstrap Kurulumu ve Yapısı
  • CDN ve npm ile Bootstrap 5 ekleme
  • CSS ve JavaScript bundle ayrımı
  • Popper bağımlılığı ve eklentiler
  • Mobil öncelikli tasarım felsefesi
  • Dokümantasyon ve sınıf arama yöntemi
  • Proje iskeletinin hazırlanması
Modül 2
Grid Sistemi ve Container
  • container ve container-fluid farkı
  • row ve col ile 12 sütunlu düzen
  • Otomatik ve belirli genişlikli sütunlar
  • offset sınıfıyla sütun kaydırma
  • Sütun iç içe yerleştirme (nesting)
  • g-* ile grid boşluk (gutter) yönetimi
Modül 3
Breakpoint ve Responsive Sütunlar
  • sm, md, lg, xl ve xxl kırılma noktaları
  • col-md-6 gibi duyarlı sütun sınıfları
  • Ekrana göre sütun sayısını değiştirme
  • order-* ile öğe sırasını değiştirme
  • Responsive gizleme ve gösterme
  • Mobil ve masaüstü düzen uyum testi
Modül 4
Spacing ve Display Yardımcıları
  • m-* ve p-* ile margin ve padding
  • Yön kısaltmaları: t, b, s, e, x, y
  • d-* sınıflarıyla display kontrolü
  • d-flex ve flex yardımcı sınıfları
  • justify-content ve align-items sınıfları
  • text ve align hizalama yardımcıları
Günün hedefiKatılımcı Bootstrap tipografi ve renk yardımcılarını kullanır; button, badge, alert, card, list group ve navbar bileşenlerini uygular.
Modül 1
Tipografi ve Renk Yardımcıları
  • Başlık, display ve lead sınıfları
  • text-* ile metin rengi ve hizalama
  • bg-* ile arka plan renk yardımcıları
  • Tema renkleri: primary, secondary, success
  • fw ve fst ile ağırlık ve italik
  • text-truncate ile uzun metin kırpma
Modül 2
Button, Badge ve Alert
  • btn ve btn-* ile renk varyantları
  • btn-outline ve btn-lg, btn-sm boyutları
  • btn-group ile buton grubu ve toolbar
  • badge ile sayı ve etiket gösterimi
  • alert bileşeni ve kapatma düğmesi
  • Durum renkleriyle geri bildirim
Modül 3
Card ve List Group
  • card, card-body ve card-title yapısı
  • card-img ve kart üst/alt bölümleri
  • Kart grupları ve yatay kartlar
  • list-group ile dikey öğe listeleri
  • Etkin ve devre dışı liste öğeleri
  • Badge ve bağlantılı liste öğeleri
Modül 4
Navbar ve Navigation
  • navbar ve navbar-expand kırılması
  • Marka, bağlantı ve açılır menü
  • navbar-toggler ile açılır mobil menü
  • nav ve nav-tabs sekme navigasyonu
  • nav-pills ile dikey navigasyon menüsü
  • breadcrumb ve pagination bileşenleri
Günün hedefiKatılımcı Bootstrap form kontrolleri ile düzenli formlar kurar, doğrulama ekler ve modal, offcanvas, dropdown, tooltip gibi etkileşimli bileşenleri kullanır.
Modül 1
Form Kontrolleri
  • form-control ile metin girdileri
  • form-select ile açılır liste kutusu
  • form-check ile checkbox ve radio
  • form-switch ile açma kapama anahtarı
  • form-range ile kaydırıcı girdi
  • floating label ile yüzen etiket
Modül 2
Input Group ve Form Düzeni
  • input-group ile ikon ve metin ekleme
  • Grid sistemiyle form alanı yerleşimi
  • form-label ve form-text yardımcı metni
  • Satır içi ve dikey form düzeni
  • disabled ve readonly durumları
  • Boyut sınıflarıyla girdi ölçeği
Modül 3
Form Doğrulama ve Geri Bildirim
  • HTML5 doğrulama ve :valid stilleri
  • was-validated ile görsel geri bildirim
  • is-valid ve is-invalid sınıfları
  • valid-feedback ve invalid-feedback
  • JavaScript ile özel form doğrulama
  • Form gönderimini engelleme ve uyarı
Modül 4
Modal, Dropdown ve İpuçları
  • modal yapısı ve data-bs öznitelikleri
  • Modal boyutları ve kaydırmalı içerik
  • offcanvas ile kayan yan panel kurma
  • dropdown menü ve tetikleyici buton
  • tooltip ile ipucu balonu gösterme
  • popover ile zengin içerikli ipucu
Günün hedefiKatılımcı carousel ve collapse gibi JavaScript bileşenlerini kullanır, Sass ve utility API ile Bootstrap'i özelleştirir ve responsive bir dashboard projesi geliştirir.
Modül 1
Carousel ve Collapse
  • carousel ile görsel slayt kaydırıcı
  • Gösterge, kontrol ve otomatik geçiş
  • collapse ile açılır kapanır içerik
  • accordion (akordeon) bileşeni kurulumu
  • scrollspy ile aktif bağlantı takibi
  • JavaScript API ile bileşen kontrolü
Modül 2
Sass ile Özelleştirme
  • Bootstrap kaynak Sass dosyaları
  • Değişken geçersiz kılma (override)
  • Kendi özel renk paletini tanımlama
  • functions, variables ve mixins sırası
  • Yalnızca gerekli bileşenleri içe aktarma
  • Derleme ile özel bootstrap.css üretme
Modül 3
Utility API ve Tema
  • Utility API ile yeni yardımcı sınıf
  • Spacing ve renk ölçeğini genişletme
  • CSS değişkenleriyle tema ayarı
  • Koyu mod ve data-bs-theme kullanımı
  • Kurumsal marka kimliğine uyarlama
  • Tutarlı bir tasarım sistemi kurma
Modül 4
Responsive Dashboard Projesi
  • Sidebar ve navbar ile panel iskeleti
  • Grid ile kart ve widget yerleşimi
  • Tablo ve liste ile veri gösterimi
  • Form ve modal ile veri giriş akışı
  • Responsive davranışın test edilmesi
  • Projenin derlenip yayına hazırlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Grid sistemi

Bootstrap'in 12 sütunlu grid sistemiyle her ekran boyutuna uyumlu, esnek ve düzenli sayfa düzenleri kurabilirsiniz.

✅
Yardımcı sınıflar

Spacing, display, flex ve renk yardımcı sınıflarıyla özel CSS yazmadan hızlı biçimde stil uygulayabilirsiniz.

✅
Hazır bileşenler

Button, card, navbar, modal ve dropdown gibi bileşenleri kullanarak profesyonel arayüzleri hızlıca oluşturursunuz.

✅
Formlar ve doğrulama

Bootstrap form kontrolleri ve doğrulama sınıflarıyla düzenli, kullanılabilir ve geri bildirimli formlar tasarlarsınız.

✅
JavaScript eklentileri

Carousel, collapse, tooltip ve scrollspy gibi JavaScript bileşenleriyle arayüze etkileşim ekleyebilirsiniz.

✅
Sass ile özelleştirme

Sass değişkenlerini geçersiz kılarak Bootstrap'i markaya uyarlar ve yalnızca gerekli bileşenleri derlersiniz.

✅
Tema ve utility API

Utility API ve CSS değişkenleriyle koyu mod dahil özel bir tasarım sistemi ve tema kurgulayabilirsiniz.

✅
Dashboard projesi

Grid, bileşen ve formları birleştirerek responsive bir yönetim paneli (dashboard) arayüzü geliştirebilirsiniz.

Kimler İçin Uygundur?

  • HTML ve CSS temeli olan
  • arayüzlerini hızlıca ve tutarlı biçimde kurmak isteyen web geliştiriciler
  • tasarımcılar
  • prototip ile yönetim paneli geliştiren ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
HTML ve CSS temeli olan, arayüzlerini hızlı ve tutarlı biçimde kurmak isteyen web geliştiriciler, tasarımcılar ve prototip ile yönetim paneli geliştiren ekipler için uygundur. Bootstrap deneyimi gerekmez; grid sisteminden başlanır.
Hangi Bootstrap sürümü işleniyor?
Eğitim güncel Bootstrap 5 sürümüne göre işlenir; jQuery bağımlılığı olmayan, CSS değişkenleri ve utility API ile gelen modern yapı esas alınır. Grid, bileşen ve Sass özelleştirme tamamen bu sürüm üzerinden anlatılır.
Sass bilmek gerekir mi?
Hayır, Sass ön koşul değildir; özelleştirme modülünde değişken geçersiz kılma ve derleme adım adım gösterilir. Sass'a hiç aşina olmayanlar da Bootstrap'i markaya uyarlamayı rahatça öğrenebilir; Node.js kurulumu önerilir.
Eğitimin süresi ve formatı nedir?
Eğitim dört gün sürer ve her gün dört modülden oluşur. Grid ve bileşenlerden başlayıp responsive bir dashboard projesine kadar uygulamalı ilerlenir. Yüz yüze veya online yapılabilir ve içerik kurumun projelerine göre uyarlanır.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen dashboard projesini belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Web Geliştiriciler için Bootstrap Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSWhole Page Controls & Extending Bootstrap Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Whole Page Controls & Extending Bootstrap Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Bootstrap ile tüm sayfa düzen kontrolleri, Sass değişkenleri, utility API, özel bileşen ve koyu mod ile çatıyı genişletme ve markaya uyarlama eğitimi.

Detayları Gör →
HTML ve CSSBootstrap Giriş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Bootstrap Giriş Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

Bootstrap 5 grid, bileşen ve yardımcı sınıflarıyla duyarlı arayüz geliştirme eğitimi. Navbar, kart, form, modal ve Sass özelleştirme uygulamalı.

Detayları Gör →
HTML ve CSSCSS Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Seçicilerden Flexbox, Grid, animasyon ve özel değişkenlere kadar modern CSS eğitimi. Duyarlı ve etkileşimli arayüz tasarımı uygulamalı.

Detayları Gör →
HTML ve CSSCSS Giriş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS Giriş Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

CSS seçicileri, kutu modeli, Flexbox ve medya sorgularıyla web biçimlendirme eğitimi. HTML bilenler için uygulamalı ve kurumsal CSS giriş programı.

Detayları Gör →
HTML ve CSSCSS ile Animasyon ve Geçişler Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS ile Animasyon ve Geçişler Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

CSS transition, transform, @keyframes ve performanslı animasyon eğitimi. Akıcı geçişler, 3B dönüşümler ve scroll animasyonlarıyla uygulamalı ve kurumsal.

Detayları Gör →
HTML ve CSSCSS İleri Seviye Teknikleri Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS İleri Seviye Teknikleri Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

CSS Grid, custom properties, container queries, :has ve ölçeklenebilir CSS mimarisi eğitimi. İleri seçiciler ve performansla uygulamalı ve kurumsal.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn