40 Adet Bootstrap Örnek Ve Kodları

1. İçeriği ortalayan genişlik (container)

2. Sütunları içine alan satır yapısı (row)

3. Satırı ikiye bölen sütun (col-6)

4. Orta ekranlarda üçte bir sütun (col-md-4)

5. İçeriği yatayda ortalar (d-flex justify-content-center)

6. İçeriği dikeyde ortalar (align-items-center)

7. Tam genişlik kaplar (w-100)

8. Yüzde 50 genişlik kaplar (w-50)

9. Tüm ekran boyu yükseklik (vh-50)

10. Dışarıdan en büyük boşluk (m-5)

11. Mavi renkli yazı (text-primary)

12. Kırmızı renkli yazı (text-danger)

13. Yeşil renkli yazı (text-success)

14. Sarı yazı ve siyah arka plan (text-warning bg-dark)

15. Ortalanmış metin (text-center)

16. Sağa yaslanmış metin (text-end)

17. hepsi büyük harf yapıldı (text-uppercase)

18. Kalın yazı tipi (fw-bold)

19. Eğik / İtalik yazı (fst-italic)

20. Çok büyük ekran başlığı (display-1)

21. Silik gri yazı (text-muted)

22. Altı çizili metin (text-decoration-underline)

23. Üstten dış boşluk (mt-5)

24. Alttan dış boşluk (mb-4)

25. Sola otomatik boşluk verip sağa yaslar (ms-auto)

26. Her yönden en büyük iç boşluk (p-5)

27. Temel mavi buton tasarımı (btn btn-primary)

28. İçi boş, kenarı kırmızı buton (btn-outline-danger)

29. Hap şeklinde oval kutu (rounded-pill)

30. Yuvarlak (rounded-circle)

31. Belirgin gölge efekti (shadow)

32. Mavi renkli çerçeve (border border-primary)

33. Yeşil küçük rozet (badge bg-success)

34. Sarı renkli uyarı kutusu (alert alert-warning)

35. Liste elemanı tasarımı (list-group-item)

36. Gölgeli kart yapısı (card shadow-sm)

37. Form giriş alanı tasarımı (form-control)

38. Seçim kutusu stili (form-select)

39. Onay kutusu stili (form-check-input)

40. Yüzde 50 şeffaf görünüm (opacity-50)