Tartalomjegyzék

< Bootsrap 4

Konténerek

A konténerek

A konténerek a bennük lévő tartalmat veszik körbe. Kétféle konténer van:

A fix szélességű konténer

A fix szélességű konténerekhez használjuk a .container osztályt.

Ezek a fix szélességek a képernyő méretének változásával változnak, a max-width értékkel megadva.

Extra small Small Medium Large Extra Large
<576px >=576px >=768px >=992px >=1200px
max-width 100% 540px 720px 960px 1140px
<div class="container">
    <h1>Bootsrap weblap</h1>
    <p class="text-justify">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </p>
</div>

Próbáljuk ki a fix szélességű weblapot. Változtassuk meg a beépített weblap méretét. A méret a beépített weblap jobb alsó sarokban, egér húzással állítható.

Megnyithatjuk új böngészőlapon:

Folyékony konténererek

A folyékony konténerek létrehozására használjuk a .container-fluid osztályt.

<div class="container-fluid">
    <h1>Bootsrap weblap</h1>
    <p class="text-justify">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </p>
</div>

Megnyithatjuk új böngészőlapon:

Konténerek helykitöltése

Az alapértelmezett konténer helykitöltése (belső margó /padding/) jobbról és balról 15px. Alul és felül azonban nincs helykitöltés, ezért állíthatunk, például a pt-4 jelölővel felső helykitöltést:

<div class="container pt-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

A következő osztályok használhatók:

Konténerek szegélye és színe

<div class="container p-3 my-3 border">
<div class="container bg-primary text-white p-3 my-3 border">

Szöveg színezése:

Lehetséges beállítások:

Rugalmas konténerek

A rugalmas konténerek minimális szélessége a .container-sm|md|lg|xl beállításokkal állíthatók be. Az alábbi táblázat bemutatja, milyen beállításnál, milyen minimális szélesség, szélességhatárok vannak:

Extra small Small Medium Large Extra Large
<576px >=576px >=768px >=992px >=1200px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-lg 100% 100% 100% 100% 1140px