<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background - Padding - Margin - Alerts</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- text colors - background colors -->
<div class="bg-dark text-light">Content</div>
<div class="bg-light text-dark">Content</div>
<div class="bg-primary text-light">Content</div>
<div class="bg-warning text-light">Content</div>
<div class="bg-info text-light">Content</div>
<div class="bg-danger text-light">Content</div>
<div class="bg-secondary text-light">Content</div>
<br/>
<!-- padding -->
<div class="bg-warning p-5 text-light">Content</div> <!-- her taraftan 5şer birim padding -->
<div class="bg-info text-light pl-4">Content</div> <!-- paddingleft: sol taraftan n birim padding -->
<div class="text-light pr-8 bg-danger">Content</div> <!-- padding right -->
<div class="bg-secondary px-4 text-light">Content</div> <!-- padding x: x ekseninde iki taraftan n'er birim -->
<div class="bg-primary py-3 text-light">Content</div> <!-- padding y: y ekseninde iki taraftan n'er birim -->
<div class="bg-dark py-3 text-light">Content</div> <!-- padding y: y ekseninde iki taraftan n'er birim -->
<!-- margin -->
<div class="bg-warning m-5 text-light">Content</div> <!-- her taraftan 5şer birim margin -->
<div class="bg-info text-light ml-4">Content</div> <!-- marginleft: sol taraftan n birim margin -->
<div class="text-light mr-8 bg-danger">Content</div> <!-- margin right -->
<div class="bg-secondary mx-4 text-light">Content</div> <!-- margin x: x ekseninde iki taraftan n'er birim -->
<div class="bg-primary my-3 text-light">Content</div> <!-- margin y: y ekseninde iki taraftan n'er birim -->
<div class="bg-dark my-3 text-light">Content</div> <!-- margin y: y ekseninde iki taraftan n'er birim -->
<!-- alerts -->
<div class="alert alert-success">İşlem başarıyla tamamlandı</div>
<div class="alert alert-danger">İşlem tamamlanamadı</div>
<div class="alert alert-secondary">İşlem beklemede</div>
<!-- buttons -->
<a href="#" class="btn btn-primary">Buton</a>
<a href="#" class="btn btn-secondary">Buton</a>
<a href="#" class="btn btn-dark btn-sm">Buton</a> <!-- small button -->
<a href="#" class="btn btn-info btn-lg">Buton</a> <!-- large button -->
<!-- Buton inline bir element içeriği kadar yer kaplar. Tüm sayfa genişliği kadar yer kaplasın diyorsak block'a çevirebiliriz -->
<a href="#" class="btn btn-warning btn-block">Buton</a>
</body>
</html>
Mehmet İçme 
Yorum bırakın