Konténerek

Szerző: Sallai András
Copyright © Sallai András, 2021
Licenc: 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ó.

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

Érzékeny konténerek

<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>

Folyékony tartály

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