ਬੂਟਸਟਰੈਪ ਦੇ ਕਾਰਡ ਕਈ ਰੂਪਾਂ ਅਤੇ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਇੱਕ ਲਚਕਦਾਰ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਸਮੱਗਰੀ ਕੰਟੇਨਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
ਬਾਰੇ
ਇੱਕ ਕਾਰਡ ਇੱਕ ਲਚਕਦਾਰ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਸਮੱਗਰੀ ਵਾਲਾ ਕੰਟੇਨਰ ਹੈ। ਇਸ ਵਿੱਚ ਸਿਰਲੇਖਾਂ ਅਤੇ ਫੁੱਟਰਾਂ ਲਈ ਵਿਕਲਪ, ਸਮੱਗਰੀ ਦੀ ਇੱਕ ਵਿਸ਼ਾਲ ਕਿਸਮ, ਪ੍ਰਸੰਗਿਕ ਪਿਛੋਕੜ ਦੇ ਰੰਗ, ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਡਿਸਪਲੇ ਵਿਕਲਪ ਸ਼ਾਮਲ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ Bootstrap 3 ਤੋਂ ਜਾਣੂ ਹੋ, ਤਾਂ ਕਾਰਡ ਸਾਡੇ ਪੁਰਾਣੇ ਪੈਨਲਾਂ, ਖੂਹਾਂ ਅਤੇ ਥੰਬਨੇਲਾਂ ਨੂੰ ਬਦਲ ਦਿੰਦੇ ਹਨ। ਉਹਨਾਂ ਭਾਗਾਂ ਦੇ ਸਮਾਨ ਕਾਰਜਸ਼ੀਲਤਾ ਕਾਰਡਾਂ ਲਈ ਸੋਧਕ ਕਲਾਸਾਂ ਵਜੋਂ ਉਪਲਬਧ ਹੈ।
ਉਦਾਹਰਨ
ਕਾਰਡ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਥੋੜ੍ਹੇ ਜਿਹੇ ਮਾਰਕਅੱਪ ਅਤੇ ਸਟਾਈਲ ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ, ਪਰ ਫਿਰ ਵੀ ਬਹੁਤ ਸਾਰੇ ਨਿਯੰਤਰਣ ਅਤੇ ਅਨੁਕੂਲਤਾ ਪ੍ਰਦਾਨ ਕਰਨ ਦਾ ਪ੍ਰਬੰਧ ਕਰਦੇ ਹਨ। ਫਲੈਕਸਬਾਕਸ ਨਾਲ ਬਣਾਇਆ ਗਿਆ, ਉਹ ਆਸਾਨ ਅਲਾਈਨਮੈਂਟ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹਨ ਅਤੇ ਹੋਰ ਬੂਟਸਟਰੈਪ ਭਾਗਾਂ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਮਿਲਾਉਂਦੇ ਹਨ। ਉਹਨਾਂ ਕੋਲ margin
ਮੂਲ ਰੂਪ ਵਿੱਚ ਕੋਈ ਨਹੀਂ ਹੈ, ਇਸਲਈ ਲੋੜ ਅਨੁਸਾਰ ਸਪੇਸਿੰਗ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।
ਹੇਠਾਂ ਮਿਸ਼ਰਤ ਸਮੱਗਰੀ ਅਤੇ ਇੱਕ ਨਿਸ਼ਚਿਤ ਚੌੜਾਈ ਵਾਲੇ ਇੱਕ ਬੁਨਿਆਦੀ ਕਾਰਡ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ। ਕਾਰਡਾਂ ਦੀ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਕੋਈ ਨਿਸ਼ਚਿਤ ਚੌੜਾਈ ਨਹੀਂ ਹੈ, ਇਸਲਈ ਉਹ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਇਸਦੇ ਮੂਲ ਤੱਤ ਦੀ ਪੂਰੀ ਚੌੜਾਈ ਨੂੰ ਭਰ ਦੇਣਗੇ। ਇਹ ਸਾਡੇ ਵੱਖ-ਵੱਖ ਆਕਾਰ ਦੇ ਵਿਕਲਪਾਂ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਕਿਤੇ ਜਾਓ
ਸਮੱਗਰੀ ਦੀਆਂ ਕਿਸਮਾਂ
ਕਾਰਡ ਚਿੱਤਰਾਂ, ਟੈਕਸਟ, ਸੂਚੀ ਸਮੂਹਾਂ, ਲਿੰਕਾਂ, ਅਤੇ ਹੋਰਾਂ ਸਮੇਤ ਬਹੁਤ ਸਾਰੀਆਂ ਸਮੱਗਰੀਆਂ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ। ਹੇਠਾਂ ਉਹਨਾਂ ਦੀਆਂ ਉਦਾਹਰਨਾਂ ਹਨ ਜੋ ਸਮਰਥਿਤ ਹਨ।
ਸਰੀਰ
ਕਾਰਡ ਦਾ ਬਿਲਡਿੰਗ ਬਲਾਕ ਹੈ .card-body
। ਜਦੋਂ ਵੀ ਤੁਹਾਨੂੰ ਕਿਸੇ ਕਾਰਡ ਦੇ ਅੰਦਰ ਪੈਡ ਵਾਲੇ ਭਾਗ ਦੀ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇਸਨੂੰ ਵਰਤੋ।
ਇਹ ਇੱਕ ਕਾਰਡ ਬਾਡੀ ਦੇ ਅੰਦਰ ਕੁਝ ਟੈਕਸਟ ਹੈ।
ਸਿਰਲੇਖ, ਟੈਕਸਟ ਅਤੇ ਲਿੰਕ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖਾਂ ਦੀ ਵਰਤੋਂ ਟੈਗ ਵਿੱਚ ਜੋੜ ਕੇ ਕੀਤੀ ਜਾਂਦੀ ਹੈ .card-title
। ਇਸੇ ਤਰ੍ਹਾਂ, ਲਿੰਕ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇੱਕ ਟੈਗ <h*>
ਵਿੱਚ ਜੋੜ ਕੇ ਇੱਕ ਦੂਜੇ ਦੇ ਅੱਗੇ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ..card-link
<a>
.card-subtitle
ਉਪਸਿਰਲੇਖਾਂ ਨੂੰ ਇੱਕ <h*>
ਟੈਗ ਵਿੱਚ ਜੋੜ ਕੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ । ਜੇਕਰ .card-title
ਅਤੇ .card-subtitle
ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ .card-body
ਆਈਟਮ ਵਿੱਚ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਉਪਸਿਰਲੇਖ ਚੰਗੀ ਤਰ੍ਹਾਂ ਨਾਲ ਇਕਸਾਰ ਹੁੰਦੇ ਹਨ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਉਪਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਕਾਰਡ ਲਿੰਕ
ਇੱਕ ਹੋਰ ਲਿੰਕ
ਚਿੱਤਰ
.card-img-top
ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਕਾਰਡ ਦੇ ਸਿਖਰ 'ਤੇ ਰੱਖਦਾ ਹੈ। ਦੇ ਨਾਲ .card-text
, ਟੈਕਸਟ ਨੂੰ ਕਾਰਡ ਵਿੱਚ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਅੰਦਰਲੇ ਟੈਕਸਟ .card-text
ਨੂੰ ਸਟੈਂਡਰਡ HTML ਟੈਗਸ ਨਾਲ ਵੀ ਸਟਾਈਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਸਮੂਹਾਂ ਦੀ ਸੂਚੀ ਬਣਾਓ
ਇੱਕ ਫਲੱਸ਼ ਸੂਚੀ ਸਮੂਹ ਦੇ ਨਾਲ ਇੱਕ ਕਾਰਡ ਵਿੱਚ ਸਮੱਗਰੀ ਦੀਆਂ ਸੂਚੀਆਂ ਬਣਾਓ।
- Cras justo odio
- ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
- ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
- Cras justo odio
- ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
- ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
- Cras justo odio
- ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
- ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
ਰਸੋਈ ਸਿੰਕ
ਤੁਹਾਨੂੰ ਲੋੜੀਂਦਾ ਕਾਰਡ ਬਣਾਉਣ ਲਈ ਕਈ ਸਮੱਗਰੀ ਕਿਸਮਾਂ ਨੂੰ ਮਿਲਾਓ ਅਤੇ ਮੇਲ ਕਰੋ, ਜਾਂ ਸਭ ਕੁਝ ਉੱਥੇ ਸੁੱਟੋ। ਹੇਠਾਂ ਚਿੱਤਰ ਸਟਾਈਲ, ਬਲਾਕ, ਟੈਕਸਟ ਸਟਾਈਲ, ਅਤੇ ਇੱਕ ਸੂਚੀ ਸਮੂਹ ਦਿਖਾਏ ਗਏ ਹਨ-ਸਭ ਇੱਕ ਸਥਿਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਰਡ ਵਿੱਚ ਲਪੇਟੇ ਹੋਏ ਹਨ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
- Cras justo odio
- ਵਿਚ ਡੈਪੀਬਸ ਏਸੀ ਫੈਸਿਲਿਸਿਸ
- ਈਰੋਜ਼ ਤੇ ਵੈਸਟੀਬੁਲਮ
ਇੱਕ ਕਾਰਡ ਦੇ ਅੰਦਰ ਇੱਕ ਵਿਕਲਪਿਕ ਸਿਰਲੇਖ ਅਤੇ/ਜਾਂ ਫੁੱਟਰ ਸ਼ਾਮਲ ਕਰੋ।
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
.card-header
ਕਾਰਡ ਹੈਡਰ ਨੂੰ ਐਲੀਮੈਂਟਸ ਵਿੱਚ ਜੋੜ ਕੇ ਸਟਾਈਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ <h*>
।
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਆਕਾਰ
ਕਾਰਡ width
ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਕੋਈ ਖਾਸ ਨਹੀਂ ਮੰਨਦੇ ਹਨ, ਇਸਲਈ ਉਹ 100% ਚੌੜੇ ਹੋਣਗੇ ਜਦੋਂ ਤੱਕ ਹੋਰ ਨਹੀਂ ਦੱਸਿਆ ਜਾਂਦਾ। ਤੁਸੀਂ ਇਸ ਨੂੰ ਕਸਟਮ CSS, ਗਰਿੱਡ ਕਲਾਸਾਂ, ਗਰਿੱਡ ਸਾਸ ਮਿਕਸਿਨ, ਜਾਂ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਲੋੜ ਅਨੁਸਾਰ ਬਦਲ ਸਕਦੇ ਹੋ।
ਗਰਿੱਡ ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਗਰਿੱਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਲੋੜ ਅਨੁਸਾਰ ਕਾਰਡਾਂ ਨੂੰ ਕਾਲਮਾਂ ਅਤੇ ਕਤਾਰਾਂ ਵਿੱਚ ਲਪੇਟੋ।
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ
ਕਾਰਡ ਦੀ ਚੌੜਾਈ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਸੈੱਟ ਕਰਨ ਲਈ ਸਾਡੀਆਂ ਮੁੱਠੀ ਭਰ ਉਪਲਬਧ ਸਾਈਜ਼ਿੰਗ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਬਟਨ
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਬਟਨ
ਕਸਟਮ CSS ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਚੌੜਾਈ ਸੈਟ ਕਰਨ ਲਈ ਆਪਣੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਵਿੱਚ ਜਾਂ ਇਨਲਾਈਨ ਸਟਾਈਲ ਵਜੋਂ ਕਸਟਮ CSS ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ
ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਕਾਰਡ ਦੀ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਤੁਰੰਤ ਬਦਲ ਸਕਦੇ ਹੋ—ਇਸਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਾਂ ਖਾਸ ਹਿੱਸਿਆਂ ਵਿੱਚ—ਸਾਡੀਆਂ ਟੈਕਸਟ ਅਲਾਈਨ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ।
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਨੇਵੀਗੇਸ਼ਨ
Bootstrap ਦੇ nav ਭਾਗਾਂ ਦੇ ਨਾਲ ਇੱਕ ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ (ਜਾਂ ਬਲਾਕ) ਵਿੱਚ ਕੁਝ ਨੈਵੀਗੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ।
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਵਿਸ਼ੇਸ਼ ਸਿਰਲੇਖ ਇਲਾਜ
ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ।
ਕਿਤੇ ਜਾਓ
ਚਿੱਤਰ
ਕਾਰਡਾਂ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਕੁਝ ਵਿਕਲਪ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ। ਕਿਸੇ ਕਾਰਡ ਦੇ ਕਿਸੇ ਵੀ ਸਿਰੇ 'ਤੇ "ਚਿੱਤਰ ਕੈਪਸ" ਜੋੜਨ, ਕਾਰਡ ਸਮੱਗਰੀ ਨਾਲ ਚਿੱਤਰਾਂ ਨੂੰ ਓਵਰਲੇ ਕਰਨ, ਜਾਂ ਕਾਰਡ ਵਿੱਚ ਚਿੱਤਰ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਤੋਂ ਚੁਣੋ।
ਚਿੱਤਰ ਕੈਪਸ
ਸਿਰਲੇਖਾਂ ਅਤੇ ਫੁੱਟਰਾਂ ਦੇ ਸਮਾਨ, ਕਾਰਡਾਂ ਵਿੱਚ ਉੱਪਰ ਅਤੇ ਹੇਠਾਂ "ਚਿੱਤਰ ਕੈਪਸ" - ਇੱਕ ਕਾਰਡ ਦੇ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਚਿੱਤਰ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਚਿੱਤਰ ਓਵਰਲੇਅ
ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਇੱਕ ਕਾਰਡ ਬੈਕਗਰਾਊਂਡ ਵਿੱਚ ਬਦਲੋ ਅਤੇ ਆਪਣੇ ਕਾਰਡ ਦੇ ਟੈਕਸਟ ਨੂੰ ਓਵਰਲੇ ਕਰੋ। ਚਿੱਤਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਤੁਹਾਨੂੰ ਵਾਧੂ ਸ਼ੈਲੀਆਂ ਜਾਂ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ ਜਾਂ ਨਹੀਂ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਧਿਆਨ ਦਿਓ ਕਿ ਸਮੱਗਰੀ ਚਿੱਤਰ ਦੀ ਉਚਾਈ ਤੋਂ ਵੱਡੀ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ। ਜੇਕਰ ਸਮੱਗਰੀ ਚਿੱਤਰ ਤੋਂ ਵੱਡੀ ਹੈ ਤਾਂ ਸਮੱਗਰੀ ਚਿੱਤਰ ਤੋਂ ਬਾਹਰ ਦਿਖਾਈ ਜਾਵੇਗੀ।
ਹਰੀਜੱਟਲ
ਗਰਿੱਡ ਅਤੇ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਕਾਰਡਾਂ ਨੂੰ ਮੋਬਾਈਲ-ਅਨੁਕੂਲ ਅਤੇ ਜਵਾਬਦੇਹ ਤਰੀਕੇ ਨਾਲ ਹਰੀਜੱਟਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਕਾਰਡ ਨੂੰ ਹਰੀਜੱਟਲ ਬਣਾਉਣ ਲਈ ਗਰਿੱਡ ਗਟਰਾਂ ਨੂੰ ਹਟਾਉਂਦੇ ਹਾਂ .no-gutters
ਅਤੇ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਤੁਹਾਡੀ ਕਾਰਡ ਸਮੱਗਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਹੋਰ ਵਿਵਸਥਾਵਾਂ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।.col-md-*
md
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਕਾਰਡ ਸਟਾਈਲ
ਕਾਰਡਾਂ ਵਿੱਚ ਉਹਨਾਂ ਦੇ ਪਿਛੋਕੜ, ਬਾਰਡਰ ਅਤੇ ਰੰਗ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਕਈ ਵਿਕਲਪ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ।
ਪਿਛੋਕੜ ਅਤੇ ਰੰਗ
ਇੱਕ ਕਾਰਡ ਦੀ ਦਿੱਖ ਨੂੰ ਬਦਲਣ ਲਈ ਟੈਕਸਟ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਪ੍ਰਾਇਮਰੀ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਸੈਕੰਡਰੀ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਸਫਲਤਾ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਖ਼ਤਰੇ ਵਾਲੇ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਚੇਤਾਵਨੀ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਜਾਣਕਾਰੀ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਹਲਕਾ ਕਾਰਡ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਡਾਰਕ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਨਾ
ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਜਿਵੇਂ ਕਿ ਦਿਖਣਯੋਗ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ, ਜਿਵੇਂ ਕਿ .sr-only
ਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।
ਬਾਰਡਰ
ਸਿਰਫ਼ ਇੱਕ ਕਾਰਡ ਨੂੰ ਬਦਲਣ ਲਈ ਬਾਰਡਰ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ । border-color
ਨੋਟ ਕਰੋ ਕਿ ਤੁਸੀਂ .text-{color}
ਮਾਤਾ-ਪਿਤਾ 'ਤੇ ਕਲਾਸਾਂ ਲਗਾ ਸਕਦੇ ਹੋ .card
ਜਾਂ ਹੇਠਾਂ ਦਰਸਾਏ ਅਨੁਸਾਰ ਕਾਰਡ ਦੀ ਸਮੱਗਰੀ ਦਾ ਸਬਸੈੱਟ ਲਗਾ ਸਕਦੇ ਹੋ।
ਪ੍ਰਾਇਮਰੀ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਸੈਕੰਡਰੀ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਸਫਲਤਾ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਖ਼ਤਰੇ ਵਾਲੇ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਚੇਤਾਵਨੀ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਜਾਣਕਾਰੀ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਹਲਕਾ ਕਾਰਡ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਡਾਰਕ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਮਿਕਸਿਨ ਉਪਯੋਗਤਾਵਾਂ
ਤੁਸੀਂ ਲੋੜ ਅਨੁਸਾਰ ਕਾਰਡ ਸਿਰਲੇਖ ਅਤੇ ਫੁੱਟਰ 'ਤੇ ਬਾਰਡਰ ਵੀ ਬਦਲ ਸਕਦੇ ਹੋ, ਅਤੇ ਉਹਨਾਂ background-color
ਨੂੰ .bg-transparent
.
ਸਫਲਤਾ ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਕਾਰਡ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਬਣਾਉਣ ਅਤੇ ਕਾਰਡ ਦੀ ਸਮਗਰੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਤੇਜ਼ ਉਦਾਹਰਨ ਟੈਕਸਟ।
ਕਾਰਡ ਲੇਆਉਟ
ਕਾਰਡਾਂ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਤੋਂ ਇਲਾਵਾ, ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਾਰਡਾਂ ਦੀ ਲੜੀ ਬਣਾਉਣ ਲਈ ਕੁਝ ਵਿਕਲਪ ਸ਼ਾਮਲ ਹਨ। ਫਿਲਹਾਲ, ਇਹ ਲੇਆਉਟ ਵਿਕਲਪ ਅਜੇ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹਨ ।
ਕਾਰਡ ਸਮੂਹ
ਬਰਾਬਰ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਾਲੇ ਕਾਲਮਾਂ ਦੇ ਨਾਲ ਇੱਕ ਸਿੰਗਲ, ਜੁੜੇ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਕਾਰਡਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਕਾਰਡ ਸਮੂਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਕਾਰਡ ਸਮੂਹ ਸਟੈਕਡ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ ਅਤੇ ਬ੍ਰੇਕਪੁਆਇੰਟ display: flex;
ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਇਕਸਾਰ ਮਾਪਾਂ ਨਾਲ ਜੁੜੇ ਹੋਣ ਲਈ ਵਰਤਦੇ ਹਨ।sm
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਸ ਕਾਰਡ ਵਿੱਚ ਵਾਧੂ ਸਮਗਰੀ ਵਿੱਚ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਸ ਕਾਰਡ ਵਿੱਚ ਬਰਾਬਰ ਉਚਾਈ ਵਾਲੀ ਕਾਰਵਾਈ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਪਹਿਲੇ ਨਾਲੋਂ ਵੀ ਲੰਮੀ ਸਮੱਗਰੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਫੁੱਟਰ ਦੇ ਨਾਲ ਕਾਰਡ ਸਮੂਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਉਹਨਾਂ ਦੀ ਸਮਗਰੀ ਆਪਣੇ ਆਪ ਲਾਈਨ ਵਿੱਚ ਆ ਜਾਵੇਗੀ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਸ ਕਾਰਡ ਵਿੱਚ ਵਾਧੂ ਸਮਗਰੀ ਵਿੱਚ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਸ ਕਾਰਡ ਵਿੱਚ ਬਰਾਬਰ ਉਚਾਈ ਵਾਲੀ ਕਾਰਵਾਈ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਪਹਿਲੇ ਨਾਲੋਂ ਵੀ ਲੰਮੀ ਸਮੱਗਰੀ ਹੈ।
ਕਾਰਡ ਡੇਕ
ਬਰਾਬਰ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਾਲੇ ਕਾਰਡਾਂ ਦੇ ਇੱਕ ਸੈੱਟ ਦੀ ਲੋੜ ਹੈ ਜੋ ਇੱਕ ਦੂਜੇ ਨਾਲ ਜੁੜੇ ਨਹੀਂ ਹਨ? ਕਾਰਡ ਡੈੱਕ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਸ ਕਾਰਡ ਵਿੱਚ ਵਾਧੂ ਸਮਗਰੀ ਵਿੱਚ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਸ ਕਾਰਡ ਵਿੱਚ ਬਰਾਬਰ ਉਚਾਈ ਵਾਲੀ ਕਾਰਵਾਈ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਪਹਿਲੇ ਨਾਲੋਂ ਵੀ ਲੰਮੀ ਸਮੱਗਰੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਜਿਵੇਂ ਕਿ ਕਾਰਡ ਸਮੂਹਾਂ ਦੇ ਨਾਲ, ਡੈੱਕਾਂ ਵਿੱਚ ਕਾਰਡ ਫੁੱਟਰ ਆਪਣੇ ਆਪ ਲਾਈਨ ਵਿੱਚ ਆ ਜਾਣਗੇ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਸ ਕਾਰਡ ਵਿੱਚ ਵਾਧੂ ਸਮਗਰੀ ਵਿੱਚ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸ਼ਾਲ ਕਾਰਡ ਹੈ। ਇਸ ਕਾਰਡ ਵਿੱਚ ਬਰਾਬਰ ਉਚਾਈ ਵਾਲੀ ਕਾਰਵਾਈ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਪਹਿਲੇ ਨਾਲੋਂ ਵੀ ਲੰਮੀ ਸਮੱਗਰੀ ਹੈ।
ਗਰਿੱਡ ਕਾਰਡ
ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਅਤੇ ਇਸ .row-cols
ਦੀਆਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਇਹ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਕਰੋ ਕਿ ਤੁਸੀਂ ਪ੍ਰਤੀ ਕਤਾਰ ਕਿੰਨੇ ਗਰਿੱਡ ਕਾਲਮ (ਤੁਹਾਡੇ ਕਾਰਡਾਂ ਦੇ ਦੁਆਲੇ ਲਪੇਟੇ ਹੋਏ) ਦਿਖਾਉਂਦੇ ਹੋ। ਉਦਾਹਰਨ ਲਈ, ਇੱਥੇ .row-cols-1
ਇੱਕ ਕਾਲਮ 'ਤੇ ਕਾਰਡਾਂ ਨੂੰ ਵਿਛਾਉਣਾ, ਅਤੇ .row-cols-md-2
ਮੱਧਮ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੋਂ, ਕਈ ਕਤਾਰਾਂ ਵਿੱਚ ਬਰਾਬਰ ਚੌੜਾਈ ਵਿੱਚ ਚਾਰ ਕਾਰਡਾਂ ਨੂੰ ਵੰਡਣਾ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਇਸਨੂੰ ਵਿੱਚ ਬਦਲੋ .row-cols-3
ਅਤੇ ਤੁਸੀਂ ਚੌਥਾ ਕਾਰਡ ਰੈਪ ਦੇਖੋਗੇ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਜਦੋਂ ਤੁਹਾਨੂੰ ਬਰਾਬਰ ਉਚਾਈ ਦੀ ਲੋੜ ਹੋਵੇ, .h-100
ਤਾਂ ਕਾਰਡਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਮੂਲ ਰੂਪ ਵਿੱਚ ਬਰਾਬਰ ਉਚਾਈਆਂ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ $card-height: 100%
Sass ਵਿੱਚ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਇੱਕ ਛੋਟਾ ਕਾਰਡ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
ਕਾਰਡ ਕਾਲਮ
ਕਾਰਡਾਂ ਨੂੰ ਸਿਰਫ਼ CSS ਨਾਲ ਮੇਸਨਰੀ -ਵਰਗੇ ਕਾਲਮਾਂ ਵਿੱਚ ਲਪੇਟ ਕੇ ਸੰਗਠਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ .card-columns
। column
ਕਾਰਡਾਂ ਨੂੰ ਆਸਾਨ ਅਲਾਈਨਮੈਂਟ ਲਈ flexbox ਦੀ ਬਜਾਏ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਕਾਰਡ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਅਤੇ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕ੍ਰਮਬੱਧ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
ਸਿਰ! ਕਾਰਡ ਕਾਲਮਾਂ ਵਾਲਾ ਤੁਹਾਡਾ ਮਾਈਲੇਜ ਵੱਖ-ਵੱਖ ਹੋ ਸਕਦਾ ਹੈ। ਕਾਰਡਾਂ ਨੂੰ ਕਾਲਮਾਂ ਵਿੱਚ ਟੁੱਟਣ ਤੋਂ ਰੋਕਣ ਲਈ, ਸਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈੱਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ display: inline-block
ਜਿਵੇਂ column-break-inside: avoid
ਕਿ ਹਾਲੇ ਤੱਕ ਬੁਲੇਟਪਰੂਫ ਹੱਲ ਨਹੀਂ ਹੈ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ ਜੋ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ
ਇਹ ਵਾਧੂ ਸਮੱਗਰੀ ਲਈ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਕਾਰਡ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਥੋੜੀ ਲੰਬੀ ਹੈ।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਸ ਕਾਰਡ ਵਿੱਚ ਵਾਧੂ ਸਮਗਰੀ ਵਿੱਚ ਕੁਦਰਤੀ ਲੀਡ-ਇਨ ਦੇ ਤੌਰ 'ਤੇ ਹੇਠਾਂ ਸਹਾਇਕ ਟੈਕਸਟ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ posuere erat.
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਸ ਕਾਰਡ ਦੇ ਹੇਠਾਂ ਇੱਕ ਨਿਯਮਤ ਸਿਰਲੇਖ ਅਤੇ ਟੈਕਸਟ ਦਾ ਛੋਟਾ ਪੈਰਾਗ੍ਰਾਫੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।
ਕਾਰਡ ਦਾ ਸਿਰਲੇਖ
ਇਹ ਹੇਠਾਂ ਸਿਰਲੇਖ ਅਤੇ ਸਹਾਇਕ ਟੈਕਸਟ ਵਾਲਾ ਇੱਕ ਹੋਰ ਕਾਰਡ ਹੈ। ਇਸ ਕਾਰਡ ਨੂੰ ਸਮੁੱਚੇ ਤੌਰ 'ਤੇ ਥੋੜ੍ਹਾ ਉੱਚਾ ਬਣਾਉਣ ਲਈ ਕੁਝ ਵਾਧੂ ਸਮੱਗਰੀ ਹੈ।
ਆਖਰੀ ਵਾਰ 3 ਮਿੰਟ ਪਹਿਲਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ
ਕਾਰਡ ਕਾਲਮਾਂ ਨੂੰ ਕੁਝ ਵਾਧੂ ਕੋਡ ਨਾਲ ਵਧਾਇਆ ਅਤੇ ਅਨੁਕੂਲਿਤ ਵੀ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਹੇਠਾਂ ਉਹੀ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਲਾਸ ਦਾ ਇੱਕ ਐਕਸਟੈਂਸ਼ਨ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਜਿਸਦੀ .card-columns
ਵਰਤੋਂ ਅਸੀਂ ਕਰਦੇ ਹਾਂ—CSS ਕਾਲਮ— ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਬਦਲਣ ਲਈ ਜਵਾਬਦੇਹ ਪੱਧਰਾਂ ਦਾ ਇੱਕ ਸੈੱਟ ਤਿਆਰ ਕਰਨ ਲਈ।