Bootstrap \u00fc\u00e7 farkl\u0131 kapsay\u0131c\u0131yla birlikte gelir:<\/p>\n\n\n\n
- .container, max-width her duyarl\u0131 kesme noktas\u0131nda bir<\/li>
- .container-fluid, width: 100% t\u00fcm kesme noktalar\u0131nda<\/li>
- .container-{breakpoint}, width: 100% belirtilen kesme noktas\u0131na kadar<\/li><\/ul>\n\n\n\n
A\u015fa\u011f\u0131daki tablo, her bir kab\u0131n\u00a0max-width orijinal
\u00a0.container <\/code>ile\u00a0kar\u015f\u0131la\u015ft\u0131rmas\u0131n\u0131\u00a0ve\u00a0.container-fluid her bir kesme noktas\u0131 boyunca\u00a0nas\u0131l oldu\u011funu g\u00f6stermektedir.<\/p>\n\n\n\nCodepen Bootstrap Containers(kapsay\u0131c\u0131lar) \u00f6rne\u011fi i\u00e7in t\u0131kla:<\/a><\/strong><\/p>\n\n\n\n
Bootstrap 5 Grid \u00f6rnekleri i\u00e7in t\u0131klay\u0131n<\/a><\/p>\n\n\n\n
<\/td> Ekstra k\u00fc\u00e7\u00fck
<576 piksel<\/th>K\u00fc\u00e7\u00fck
\u2265576px<\/th>Orta
\u2265768px<\/th>B\u00fcy\u00fck
\u2265992 piksel<\/th>X-Large
\u22651200px<\/th>XX-B\u00fcy\u00fck
\u22651400 piksel<\/th><\/tr><\/thead>.container<\/th> 100%<\/td> 540 piksel<\/td> 720 piksel<\/td> 960px<\/td> 1140 piksel<\/td> 1320px<\/td><\/tr> .container-sm<\/th> 100%<\/td> 540 piksel<\/td> 720 piksel<\/td> 960px<\/td> 1140 piksel<\/td> 1320px<\/td><\/tr> .container-md<\/th> 100%<\/td> 100%<\/td> 720 piksel<\/td> 960px<\/td> 1140 piksel<\/td> 1320px<\/td><\/tr> .container-lg<\/th> 100%<\/td> 100%<\/td> 100%<\/td> 960px<\/td> 1140 piksel<\/td> 1320px<\/td><\/tr> .container-xl<\/th> 100%<\/td> 100%<\/td> 100%<\/td> 100%<\/td> 1140 piksel<\/td> 1320px<\/td><\/tr> .container-xxl<\/th> 100%<\/td> 100%<\/td> 100%<\/td> 100%<\/td> 100%<\/td> 1320px<\/td><\/tr> .container-fluid<\/th> 100%<\/td> 100%<\/td> 100%<\/td> 100%<\/td> 100%<\/td> 100%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Default container – Varsay\u0131lan kapsay\u0131c\u0131<\/h2>\n\n\n\n
Varsay\u0131lan .container s\u0131n\u0131f\u0131m\u0131z duyarl\u0131, sabit geni\u015flikte bir kapt\u0131r, yani
max-width<\/code> her kesme noktas\u0131ndaki de\u011fi\u015fiklikleri ifade eder.<\/p>\n\n\n\n<div class=\"container\">\n <!-- Content here -->\n<\/div>\n<\/code><\/pre>\n\n\n\nResponsive Containers – Duyarl\u0131 konteynerler<\/h2>\n\n\n\n
Duyarl\u0131 kapsay\u0131c\u0131lar, belirtilen kesme noktas\u0131na ula\u015f\u0131lana kadar
%100<\/code> geni\u015flikte bir s\u0131n\u0131f belirlemenize olanak tan\u0131r, ard\u0131ndanmax-width<\/code> daha y\u00fcksek kesme noktalar\u0131n\u0131n her biri i\u00e7in URL’leri uygular\u0131z . \u00d6rne\u011fin, .container-sm kadar geni\u015f %100 ba\u015flamakt\u0131rsm<\/code> kesme noktas\u0131 onunla b\u00fcy\u00fctmek nerede, ula\u015f\u0131ld\u0131\u011f\u0131ndamd<\/code>,lg<\/code>,xl<\/code>, vexxl<\/code>. <\/p>\n\n\n\n<div class=\"container-sm\">100% wide until small breakpoint<\/div>\n<div class=\"container-md\">100% wide until medium breakpoint<\/div>\n<div class=\"container-lg\">100% wide until large breakpoint<\/div>\n<div class=\"container-xl\">100% wide until extra large breakpoint<\/div>\n<div class=\"container-xxl\">100% wide until extra extra large breakpoint<\/div><\/code><\/pre>\n\n\n\nFluid containers – S\u0131v\u0131, Ak\u0131\u015fkan Kaplar<\/h2>\n\n\n\n
.container-fluid<\/code> G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n t\u00fcm geni\u015fli\u011fini kapsayan, tam geni\u015flikte bir kap i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n<div class=\"container-fluid\">\n ...\n<\/div><\/code><\/pre>\n\n\n\nContainers Examples: Kapsay\u0131c\u0131 \u00d6rnekleri<\/h2>\n\n\n\n
![\"bootstrap5-containers\"](\"https:\/\/www.kampuskod.com\/wp-content\/uploads\/2020\/12\/bootstrap5-containers-1024x515.jpg\")
bootstrap5-containers<\/figcaption><\/figure>\n\n\n\n <!doctype html>\n<html lang=\"en\"> \n<head>\n <!-- Required meta tags -->\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> \n <!-- Web Site Title -->\n <title>Containers<\/title>\n <!-- Bootstrap CSS -->\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"\n integrity=\"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1\" crossorigin=\"anonymous\">\n <!-- Internal CSS-->\n <style>\n .themed-container {\n padding: .75rem;\n margin-bottom: 1.5rem;\n background-color: rgba(0, 123, 255, .15);\n border: 1px solid rgba(0, 123, 255, .2);\n }\n <\/style>\n<\/head>\n\n<body> \n\n <main>\n <div class=\"container\">\n <hr class=\"my-4\"> \n <h2 class=\"mt-4\">Containers<\/h2>\n <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.\n v5 adds a new <code>xxl<\/code> breakpoint.<\/p>\n <\/div>\n\n <div class=\"container themed-container\">.container<\/div>\n <div class=\"container-sm themed-container\">.container-sm<\/div>\n <div class=\"container-md themed-container\">.container-md<\/div>\n <div class=\"container-lg themed-container\">.container-lg<\/div>\n <div class=\"container-xl themed-container\">.container-xl<\/div>\n <div class=\"container-xxl themed-container\">.container-xxl<\/div>\n <div class=\"container-fluid themed-container\">.container-fluid<\/div>\n <\/main>\n \n <!-- Optional JavaScript; choose one of the two! --> \n <!-- Option 1: Bootstrap Bundle with Popper -->\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta1\/dist\/js\/bootstrap.bundle.min.js\"\n integrity=\"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7\/t7LECLbyPA2x65Kgf80OJFdroafW\"\n crossorigin=\"anonymous\"><\/script> \n <!-- Option 2: Separate Popper and Bootstrap JS -->\n <!--\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.5.4\/dist\/umd\/popper.min.js\" integrity=\"sha384-q2kxQ16AaE6UbzuKqyBE9\/u\/KzioAlnx2maXQHiDX9d4\/zp8Ok3f+M7DPm+Ib6IU\" crossorigin=\"anonymous\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta1\/dist\/js\/bootstrap.min.js\" integrity=\"sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj\" crossorigin=\"anonymous\"><\/script>\n -->\n<\/body> \n<\/html><\/code><\/pre>\n\n\n\nCodepen Bootstrap Containers Example:<\/h2>\n\n\n\n
\n See the Pen \n Bootstrap5 Containers<\/a> by Cihan Ko\u00e7 (@chnkc41<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\n