Container kullanımı bootstrap'ta en yaygın kullanılan sayfa düzeni elemanlarındandır. Sabit bir genişlikte ortalı olarak kullanılır ve her bir alt öğeyi destekler. Container kullanmak sayfada alt alta yatay bloklar oluşturmanızı sağlar. container 576 pikselden önce 100% genişliğinde sonraki ekran boyutlarında aşağıdaki tabloya göre değişen ölçülerdedir.
Bootstrap container-fluid ekrandaki tüm genişliği kullanan etikettir. container-fluid her boyutta 100% genişliğinde sahiptir.
<div class="container">
<!-- İçerik -->
</div>
<div class="container-fluid">
<!-- İçerik -->
</div>
min-width
// genişlikği en az 576px ve yukarı olan cihazlarda css kodlarını buraya yazabilirsiniz
@media (min-width: 576px) { ... }
// genişlikği en az768px(tablet ve üstü)
@media (min-width: 768px) { ... }
// genişlikği en az 992px
@media (min-width: 992px) { ... }
// genişlikği en az 1200px
@media (min-width: 1200px) { ... }
max-width
// genişlikği en fazla 576px ve aşağı olan cihazlarda css kodlarını buraya yazabilirsiniz
@media (max-width: 575.98px) { ... }
/ genişlikği en fazla 768px
@media (max-width: 767.98px) { ... }
/ genişlikği en fazla 992px
@media (max-width: 991.98px) { ... }
/ genişlikği en fazla 1200px
@media (max-width: 1199.98px) { ... }| Ekstra küçük <576 px | Küçük ≥576px | Orta ≥768px | Büyük ≥992px | Ekstra büyük ≥1200px | |
| .container | 100% | 540 px | 720 px | 960px | 1140 px |
| .container-sm | 100% | 540 px | 720 px | 960px | 1140 px |
| .container-md | 100% | 100% | 720 px | 960px | 1140 px |
| .container-lg | 100% | 100% | 100% | 960px | 1140 px |
| .container-xl | 100% | 100% | 100% | 100% | 1140 px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% |
// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
Web Tasarım Ajansı