[[oktatas:web:front-end_framework:bootstrap 5|< Bootsrap 5]]

====== Konténerek ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bootstrap konténerek =====


A konténer alapvető elrendezési elem a Bootstrap-ben.

A Bootstrap három különböző konténert tartalmaz:

  * .container - minden töréspontnál beállít egy max-width értéket
  * .container-fluid - minden töréspontnál 100%
  * .container-{töréspont} - a max-width megadott töréspontig 100%


A következő táblázatban látható a .countainer és a .container-fluid-hoz
képest, hogyan viszonyulnak a töréspont beállítások.



| |  Extra small | Small | Medium | Large | Extra Large  | XX-Large |
| |  <576px  | >=576px  | >=768px  | >=992px  | >=1200px  | >=1400px |
| .container  | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm     | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md     | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg     | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl     | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl    | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid  | 100% | 100% | 100% | 100% | 100% | 100% |


===== Az alapértelmezett tároló =====

Az alapértelmezett tároló egy reszponzív, fix szélességű tároló. 

<code>
<div class="container">
  <!-- Ide jön a tartalom -->
</div>
</code>

===== Érzékeny konténerek =====

<code>
<div class="container-sm">100% a small töréspontig</div>
<div class="container-md">100% a medium töréspontig</div>
<div class="container-lg">100% a large töréspontig</div>
<div class="container-xl">100% az extra large töréspontig</div>
<div class="container-xxl">100% az extra extra large töréspontig</div>
</code>


===== Folyékony tartály =====

<code>
<div class="container-fluid">
  ...
</div>
</code>