ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਉਦਾਹਰਨਾਂ

ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਅੰਦਰ ਬਿਲਡਿੰਗ ਤੋਂ ਜਾਣੂ ਕਰਵਾਉਣ ਲਈ ਮੂਲ ਗਰਿੱਡ ਲੇਆਉਟ।

ਇਹਨਾਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ .themed-grid-colਕਲਾਸ ਨੂੰ ਕੁਝ ਥੀਮਿੰਗ ਜੋੜਨ ਲਈ ਕਾਲਮਾਂ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਇੱਕ ਕਲਾਸ ਨਹੀਂ ਹੈ ਜੋ ਮੂਲ ਰੂਪ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਉਪਲਬਧ ਹੈ।

ਪੰਜ ਗਰਿੱਡ ਪੱਧਰਾਂ

ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਪੰਜ ਪੱਧਰ ਹਨ, ਸਾਡੇ ਦੁਆਰਾ ਸਮਰਥਿਤ ਡਿਵਾਈਸਾਂ ਦੀ ਹਰੇਕ ਰੇਂਜ ਲਈ ਇੱਕ। ਹਰੇਕ ਟੀਅਰ ਘੱਟੋ-ਘੱਟ ਵਿਊਪੋਰਟ ਆਕਾਰ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਵੱਡੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਆਪਣੇ ਆਪ ਲਾਗੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

ਤਿੰਨ ਬਰਾਬਰ ਕਾਲਮ

ਡੈਸਕਟਾਪਾਂ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਅਤੇ ਵੱਡੇ ਡੈਸਕਟਾਪਾਂ ਤੱਕ ਸਕੇਲ ਕਰਨ ਵਾਲੇ ਤਿੰਨ ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮ ਪ੍ਰਾਪਤ ਕਰੋ । ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ, ਟੈਬਲੇਟਾਂ ਅਤੇ ਹੇਠਾਂ, ਕਾਲਮ ਆਪਣੇ ਆਪ ਸਟੈਕ ਹੋ ਜਾਣਗੇ।

.col-md-4
.col-md-4
.col-md-4

ਤਿੰਨ ਬਰਾਬਰ ਕਾਲਮ ਵਿਕਲਪ

ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ .row-cols-*, ਤੁਸੀਂ ਬਰਾਬਰ ਕਾਲਮਾਂ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਗਰਿੱਡ ਬਣਾ ਸਕਦੇ ਹੋ।

.colਦਾ ਬੱਚਾ .row-cols-md-3
.colਦਾ ਬੱਚਾ .row-cols-md-3
.colਦਾ ਬੱਚਾ .row-cols-md-3

ਤਿੰਨ ਅਸਮਾਨ ਕਾਲਮ

ਡੈਸਕਟਾਪਾਂ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਤਿੰਨ ਕਾਲਮ ਪ੍ਰਾਪਤ ਕਰੋ ਅਤੇ ਵੱਖ-ਵੱਖ ਚੌੜਾਈ ਵਾਲੇ ਵੱਡੇ ਡੈਸਕਟਾਪਾਂ ਤੱਕ ਸਕੇਲਿੰਗ ਕਰੋ। ਯਾਦ ਰੱਖੋ, ਇੱਕ ਸਿੰਗਲ ਹਰੀਜੱਟਲ ਬਲਾਕ ਲਈ ਗਰਿੱਡ ਕਾਲਮਾਂ ਨੂੰ ਬਾਰਾਂ ਤੱਕ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ। ਇਸ ਤੋਂ ਵੱਧ, ਅਤੇ ਕਾਲਮ ਸਟੈਕਿੰਗ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ ਭਾਵੇਂ ਕੋਈ ਵੀ ਵਿਊਪੋਰਟ ਹੋਵੇ.

.col-md-3
.col-md-6
.col-md-3

ਦੋ ਕਾਲਮ

ਡੈਸਕਟਾਪਾਂ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਦੋ ਕਾਲਮ ਪ੍ਰਾਪਤ ਕਰੋ ਅਤੇ ਵੱਡੇ ਡੈਸਕਟਾਪਾਂ ਤੱਕ ਸਕੇਲਿੰਗ ਕਰੋ ।

.col-md-8
.col-md-4

ਪੂਰੀ ਚੌੜਾਈ, ਸਿੰਗਲ ਕਾਲਮ

ਪੂਰੀ-ਚੌੜਾਈ ਵਾਲੇ ਤੱਤਾਂ ਲਈ ਕੋਈ ਗਰਿੱਡ ਕਲਾਸਾਂ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹਨ।

ਦੋ ਨੇਸਟਡ ਕਾਲਮਾਂ ਦੇ ਨਾਲ ਦੋ ਕਾਲਮ

ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਅਨੁਸਾਰ, ਆਲ੍ਹਣਾ ਬਣਾਉਣਾ ਆਸਾਨ ਹੈ-ਸਿਰਫ਼ ਇੱਕ ਮੌਜੂਦਾ ਕਾਲਮ ਦੇ ਅੰਦਰ ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਕਤਾਰ ਲਗਾਓ। ਇਹ ਤੁਹਾਨੂੰ ਡੈਸਕਟਾਪਾਂ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਦੋ ਕਾਲਮ ਦਿੰਦਾ ਹੈ ਅਤੇ ਵੱਡੇ ਡੈਸਕਟਾਪਾਂ ਤੱਕ ਸਕੇਲਿੰਗ ਕਰਦਾ ਹੈ, ਵੱਡੇ ਕਾਲਮ ਦੇ ਅੰਦਰ ਹੋਰ ਦੋ (ਬਰਾਬਰ ਚੌੜਾਈ) ਦੇ ਨਾਲ।

ਮੋਬਾਈਲ ਡਿਵਾਈਸ ਦੇ ਆਕਾਰ, ਟੈਬਲੇਟ ਅਤੇ ਹੇਠਾਂ, ਇਹ ਕਾਲਮ ਅਤੇ ਉਹਨਾਂ ਦੇ ਨੇਸਟਡ ਕਾਲਮ ਸਟੈਕ ਹੋਣਗੇ।

.col-md-8
.col-md-6
.col-md-6
.col-md-4

ਮਿਕਸਡ: ਮੋਬਾਈਲ ਅਤੇ ਡੈਸਕਟਾਪ

ਬੂਟਸਟਰੈਪ v4 ਗਰਿੱਡ ਸਿਸਟਮ ਵਿੱਚ ਕਲਾਸਾਂ ਦੇ ਪੰਜ ਪੱਧਰ ਹਨ: xs (ਵਾਧੂ ਛੋਟਾ, ਇਹ ਕਲਾਸ ਇਨਫਿਕਸ ਨਹੀਂ ਵਰਤਿਆ ਜਾਂਦਾ), sm (ਛੋਟਾ), md (ਮੱਧਮ), lg (ਵੱਡਾ), ਅਤੇ xl (ਵਾਧੂ ਵੱਡਾ)। ਤੁਸੀਂ ਵਧੇਰੇ ਗਤੀਸ਼ੀਲ ਅਤੇ ਲਚਕਦਾਰ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਇਹਨਾਂ ਕਲਾਸਾਂ ਦੇ ਲਗਭਗ ਕਿਸੇ ਵੀ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

ਕਲਾਸਾਂ ਦੇ ਹਰੇਕ ਪੱਧਰ ਨੂੰ ਸਕੇਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਭਾਵ ਜੇਕਰ ਤੁਸੀਂ md, lg ਅਤੇ xl ਲਈ ਇੱਕੋ ਚੌੜਾਈ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਯੋਜਨਾ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ md ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

ਮਿਕਸਡ: ਮੋਬਾਈਲ, ਟੈਬਲੇਟ, ਅਤੇ ਡੈਸਕਟਾਪ

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

ਗਟਰਸ

ਕਲਾਸਾਂ ਦੇ ਨਾਲ .gx-*, ਹਰੀਜੱਟਲ ਗਟਰਾਂ ਨੂੰ ਐਡਜਸਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ.

.col.gx-4ਗਟਰ ਦੇ ਨਾਲ
.col.gx-4ਗਟਰ ਦੇ ਨਾਲ
.col.gx-4ਗਟਰ ਦੇ ਨਾਲ
.col.gx-4ਗਟਰ ਦੇ ਨਾਲ
.col.gx-4ਗਟਰ ਦੇ ਨਾਲ
.col.gx-4ਗਟਰ ਦੇ ਨਾਲ

.gy-*ਵਰਟੀਕਲ ਗਟਰਾਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

.col.gy-4ਗਟਰ ਦੇ ਨਾਲ
.col.gy-4ਗਟਰ ਦੇ ਨਾਲ
.col.gy-4ਗਟਰ ਦੇ ਨਾਲ
.col.gy-4ਗਟਰ ਦੇ ਨਾਲ
.col.gy-4ਗਟਰ ਦੇ ਨਾਲ
.col.gy-4ਗਟਰ ਦੇ ਨਾਲ

ਕਲਾਸਾਂ ਦੇ ਨਾਲ .g-*, ਦੋਵੇਂ ਦਿਸ਼ਾਵਾਂ ਵਿੱਚ ਗਟਰਾਂ ਨੂੰ ਐਡਜਸਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ.

.col.g-3ਗਟਰ ਦੇ ਨਾਲ
.col.g-3ਗਟਰ ਦੇ ਨਾਲ
.col.g-3ਗਟਰ ਦੇ ਨਾਲ
.col.g-3ਗਟਰ ਦੇ ਨਾਲ
.col.g-3ਗਟਰ ਦੇ ਨਾਲ
.col.g-3ਗਟਰ ਦੇ ਨਾਲ

ਕੰਟੇਨਰ

Bootstrap v4.4 ਵਿੱਚ ਜੋੜੀਆਂ ਗਈਆਂ ਵਧੀਕ ਕਲਾਸਾਂ ਕਿਸੇ ਖਾਸ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੱਕ 100% ਚੌੜੇ ਕੰਟੇਨਰਾਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀਆਂ ਹਨ। v5 ਇੱਕ ਨਵਾਂ xxlਬ੍ਰੇਕਪੁਆਇੰਟ ਜੋੜਦਾ ਹੈ।

.ਕੰਟੇਨਰ
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
ਕੰਟੇਨਰ-ਤਰਲ