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

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

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

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

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

.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

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

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

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

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

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

ਕਾਲਮ ਕਲੀਅਰਿੰਗ

ਅਸਮਾਨ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਅਜੀਬ ਲਪੇਟਣ ਨੂੰ ਰੋਕਣ ਲਈ ਖਾਸ ਬਰੇਕਪੁਆਇੰਟਾਂ 'ਤੇ ਫਲੋਟਸ ਸਾਫ਼ ਕਰੋ।

.col-xs-6 .col-sm-3
ਆਪਣੇ ਵਿਊਪੋਰਟ ਦਾ ਆਕਾਰ ਬਦਲੋ ਜਾਂ ਉਦਾਹਰਨ ਲਈ ਆਪਣੇ ਫ਼ੋਨ 'ਤੇ ਇਸਨੂੰ ਦੇਖੋ।
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

ਆਫਸੈੱਟ, ਪੁਸ਼ ਅਤੇ ਪੁੱਲ ਰੀਸੈਟਸ

ਖਾਸ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਆਫਸੈੱਟ, ਪੁਸ਼ ਅਤੇ ਖਿੱਚ ਨੂੰ ਰੀਸੈਟ ਕਰੋ।

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0