બુટસ્ટ્રેપના કાર્ડ્સ બહુવિધ પ્રકારો અને વિકલ્પો સાથે લવચીક અને એક્સ્ટેન્સિબલ સામગ્રી કન્ટેનર પ્રદાન કરે છે.
વિશે
કાર્ડ એ લવચીક અને એક્સ્ટેન્સિબલ કન્ટેન્ટ કન્ટેનર છે. તેમાં હેડરો અને ફૂટર્સ માટેના વિકલ્પો, સામગ્રીની વિશાળ વિવિધતા, સંદર્ભિત પૃષ્ઠભૂમિ રંગો અને શક્તિશાળી પ્રદર્શન વિકલ્પોનો સમાવેશ થાય છે. જો તમે બુટસ્ટ્રેપ 3 થી પરિચિત છો, તો કાર્ડ્સ અમારી જૂની પેનલ્સ, કૂવાઓ અને થંબનેલ્સને બદલે છે. તે ઘટકોની સમાન કાર્યક્ષમતા કાર્ડ્સ માટે મોડિફાયર વર્ગો તરીકે ઉપલબ્ધ છે.
ઉદાહરણ
કાર્ડ શક્ય તેટલા ઓછા માર્કઅપ અને શૈલીઓ સાથે બાંધવામાં આવે છે, પરંતુ તેમ છતાં પણ એક ટન નિયંત્રણ અને કસ્ટમાઇઝેશન આપવાનું મેનેજ કરે છે. ફ્લેક્સબોક્સ સાથે બનેલ, તેઓ સરળ સંરેખણ પ્રદાન કરે છે અને અન્ય બુટસ્ટ્રેપ ઘટકો સાથે સારી રીતે ભળી જાય છે. તેમની પાસે marginમૂળભૂત રીતે કોઈ નથી, તેથી જરૂરિયાત મુજબ અંતર ઉપયોગિતાઓનો ઉપયોગ કરો.
નીચે મિશ્ર સામગ્રી અને નિશ્ચિત પહોળાઈવાળા મૂળભૂત કાર્ડનું ઉદાહરણ છે. કાર્ડ્સમાં શરૂ કરવા માટે કોઈ નિશ્ચિત પહોળાઈ હોતી નથી, તેથી તેઓ કુદરતી રીતે તેના મૂળ તત્વની સંપૂર્ણ પહોળાઈ ભરી દેશે. આ અમારા વિવિધ કદના વિકલ્પો સાથે સરળતાથી કસ્ટમાઇઝ કરવામાં આવે છે .
કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
કાર્ડ્સ છબીઓ, ટેક્સ્ટ, સૂચિ જૂથો, લિંક્સ અને વધુ સહિત વિવિધ પ્રકારની સામગ્રીને સમર્થન આપે છે. નીચે શું સપોર્ટેડ છે તેના ઉદાહરણો છે.
શરીર
કાર્ડનો બિલ્ડીંગ બ્લોક છે .card-body. જ્યારે પણ તમને કાર્ડની અંદર ગાદીવાળા વિભાગની જરૂર હોય ત્યારે તેનો ઉપયોગ કરો.
આ કાર્ડ બોડીની અંદરની કેટલીક ટેક્સ્ટ છે.
શીર્ષકો, ટેક્સ્ટ અને લિંક્સ
કાર્ડ ટાઇટલનો ઉપયોગ ટેગમાં ઉમેરીને થાય .card-titleછે . એ જ રીતે, લિંક્સ ઉમેરવામાં આવે છે અને ટેગમાં <h*>ઉમેરીને એકબીજાની બાજુમાં મૂકવામાં આવે છે .card-link.<a>
ટૅગમાં .card-subtitlea ઉમેરીને સબટાઈટલનો ઉપયોગ કરવામાં આવે છે . <h*>જો આઇટમ .card-titleઅને .card-subtitleઆઇટમ્સ આઇટમમાં મૂકવામાં આવે છે .card-body, તો કાર્ડ શીર્ષક અને ઉપશીર્ષક સરસ રીતે ગોઠવાયેલ છે.
કાર્ડ શીર્ષક
કાર્ડ ઉપશીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
.card-img-topકાર્ડની ટોચ પર એક છબી મૂકે છે. સાથે .card-text, કાર્ડમાં ટેક્સ્ટ ઉમેરી શકાય છે. અંદરના ટેક્સ્ટને .card-textસ્ટાન્ડર્ડ HTML ટૅગ્સ સાથે પણ સ્ટાઇલ કરી શકાય છે.
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
જૂથોની સૂચિ બનાવો
ફ્લશ સૂચિ જૂથ સાથે કાર્ડમાં સામગ્રીની સૂચિ બનાવો.
Cras justo odio
માં ડેપીબસ એસી ફેસિલિસીસ
ઇરોસ પર વેસ્ટિબુલમ
ફીચર્ડ
Cras justo odio
માં ડેપીબસ એસી ફેસિલિસીસ
ઇરોસ પર વેસ્ટિબુલમ
રસોડામાં સિંક
તમને જરૂરી કાર્ડ બનાવવા માટે બહુવિધ સામગ્રી પ્રકારોને મિક્સ કરો અને મેચ કરો અથવા બધું ત્યાં ફેંકી દો. નીચે છબી શૈલીઓ, બ્લોક્સ, ટેક્સ્ટ શૈલીઓ અને સૂચિ જૂથ બતાવેલ છે - આ બધું એક નિશ્ચિત-પહોળાઈના કાર્ડમાં આવરિત છે.
કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
કાર્ડ્સ widthપ્રારંભ કરવા માટે કોઈ ચોક્કસ ધારે નહીં, તેથી જ્યાં સુધી અન્યથા જણાવવામાં ન આવે ત્યાં સુધી તે 100% પહોળા હશે. તમે કસ્ટમ CSS, ગ્રીડ વર્ગો, ગ્રીડ Sass મિક્સિન્સ અથવા ઉપયોગિતાઓ સાથે જરૂરિયાત મુજબ આને બદલી શકો છો.
ગ્રીડ માર્કઅપનો ઉપયોગ
ગ્રીડનો ઉપયોગ કરીને, કાર્ડને જરૂર મુજબ કૉલમ અને પંક્તિઓમાં લપેટો.
વિશેષ શીર્ષક સારવાર
વધારાની સામગ્રીમાં કુદરતી લીડ-ઇન તરીકે નીચે સહાયક ટેક્સ્ટ સાથે.
કાર્ડ્સમાં છબીઓ સાથે કામ કરવા માટેના થોડા વિકલ્પો શામેલ છે. કાર્ડના કાં તો છેડે "ઇમેજ કેપ્સ" ઉમેરવામાંથી, કાર્ડની સામગ્રી સાથે છબીઓને ઓવરલે કરવા અથવા કાર્ડમાં છબીને ફક્ત એમ્બેડ કરવાથી પસંદ કરો.
છબી કેપ્સ
હેડરો અને ફૂટર્સની જેમ, કાર્ડમાં ઉપર અને નીચેની "ઇમેજ કેપ્સ" - કાર્ડની ઉપર અથવા નીચેની છબીઓ શામેલ હોઈ શકે છે.
કાર્ડ શીર્ષક
વધારાની સામગ્રીમાં કુદરતી લીડ-ઇન તરીકે નીચે સહાયક ટેક્સ્ટ સાથેનું આ વિશાળ કાર્ડ છે. આ સામગ્રી થોડી લાંબી છે.
છેલ્લે 3 મિનિટ પહેલા અપડેટ કરવામાં આવ્યું
કાર્ડ શીર્ષક
વધારાની સામગ્રીમાં કુદરતી લીડ-ઇન તરીકે નીચે સહાયક ટેક્સ્ટ સાથેનું આ વિશાળ કાર્ડ છે. આ સામગ્રી થોડી લાંબી છે.
છેલ્લે 3 મિનિટ પહેલા અપડેટ કરવામાં આવ્યું
છબી ઓવરલે
છબીને કાર્ડ પૃષ્ઠભૂમિમાં ફેરવો અને તમારા કાર્ડના ટેક્સ્ટને ઓવરલે કરો. છબીના આધારે, તમને વધારાની શૈલીઓ અથવા ઉપયોગિતાઓની જરૂર પડી શકે છે અથવા ન પણ હોઈ શકે.
કાર્ડ શીર્ષક
વધારાની સામગ્રીમાં કુદરતી લીડ-ઇન તરીકે નીચે સહાયક ટેક્સ્ટ સાથેનું આ વિશાળ કાર્ડ છે. આ સામગ્રી થોડી લાંબી છે.
છેલ્લે 3 મિનિટ પહેલા અપડેટ કરવામાં આવ્યું
નોંધ કરો કે સામગ્રી છબીની ઊંચાઈ કરતાં મોટી હોવી જોઈએ નહીં. જો સામગ્રી છબી કરતા મોટી હોય તો સામગ્રી છબીની બહાર પ્રદર્શિત થશે.
આડી
ગ્રીડ અને યુટિલિટી ક્લાસના સંયોજનનો ઉપયોગ કરીને, કાર્ડ્સને મોબાઇલ-ફ્રેન્ડલી અને રિસ્પોન્સિવ રીતે આડા બનાવી શકાય છે. નીચેના ઉદાહરણમાં, અમે ગ્રીડ ગટરને દૂર કરીએ છીએ અને બ્રેકપોઇન્ટ પર કાર્ડને આડું બનાવવા માટે વર્ગોનો .no-guttersઉપયોગ કરીએ છીએ. તમારા કાર્ડની સામગ્રીના આધારે વધુ ગોઠવણોની જરૂર પડી શકે છે..col-md-*md
કાર્ડ શીર્ષક
વધારાની સામગ્રીમાં કુદરતી લીડ-ઇન તરીકે નીચે સહાયક ટેક્સ્ટ સાથેનું આ વિશાળ કાર્ડ છે. આ સામગ્રી થોડી લાંબી છે.
છેલ્લે 3 મિનિટ પહેલા અપડેટ કરવામાં આવ્યું
કાર્ડ શૈલીઓ
કાર્ડ્સમાં તેમની પૃષ્ઠભૂમિ, કિનારીઓ અને રંગને કસ્ટમાઇઝ કરવા માટેના વિવિધ વિકલ્પોનો સમાવેશ થાય છે.
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
માધ્યમિક કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
સફળતા કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
ડેન્જર કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
ચેતવણી કાર્ડનું શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
માહિતી કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
લાઇટ કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
ડાર્ક કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
સહાયક તકનીકોનો અર્થ પહોંચાડવો
અર્થ ઉમેરવા માટે રંગનો ઉપયોગ કરવાથી માત્ર એક વિઝ્યુઅલ સંકેત મળે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ સુધી પહોંચાડવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચવવામાં આવેલી માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (દા.ત. દૃશ્યમાન ટેક્સ્ટ), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ.
સરહદ
માત્ર કાર્ડ બદલવા માટે બોર્ડર યુટિલિટીઝનો ઉપયોગ કરો . border-colorનોંધ કરો કે તમે નીચે બતાવ્યા પ્રમાણે .text-{color}માતાપિતા .cardઅથવા કાર્ડની સામગ્રીના સબસેટ પર વર્ગો મૂકી શકો છો.
હેડર
પ્રાથમિક કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
માધ્યમિક કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
સફળતા કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
ડેન્જર કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
ચેતવણી કાર્ડનું શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
માહિતી કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
લાઇટ કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
હેડર
ડાર્ક કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
મિક્સન્સ યુટિલિટીઝ
તમે જરૂર મુજબ કાર્ડ હેડર અને ફૂટર પરની કિનારીઓ પણ બદલી શકો છો અને તેમની background-colorસાથે દૂર પણ કરી શકો છો .bg-transparent.
હેડર
સફળતા કાર્ડ શીર્ષક
કાર્ડના શીર્ષક પર બિલ્ડ કરવા અને કાર્ડની મોટાભાગની સામગ્રી બનાવવા માટે કેટલાક ઝડપી ઉદાહરણ ટેક્સ્ટ.
કાર્ડ લેઆઉટ
કાર્ડ્સમાં સામગ્રીને સ્ટાઇલ કરવા ઉપરાંત, બુટસ્ટ્રેપમાં કાર્ડ્સની શ્રેણી મૂકવા માટેના કેટલાક વિકલ્પોનો સમાવેશ થાય છે. હાલમાં , આ લેઆઉટ વિકલ્પો હજુ પ્રતિભાવશીલ નથી .
કાર્ડ જૂથો
સમાન પહોળાઈ અને ઊંચાઈના કૉલમ સાથે કાર્ડને એકલ, જોડાયેલ ઘટક તરીકે રેન્ડર કરવા માટે કાર્ડ જૂથોનો ઉપયોગ કરો. કાર્ડ જૂથો display: flex;તેમના સમાન કદને પ્રાપ્ત કરવા માટે ઉપયોગ કરે છે.
કાર્ડ શીર્ષક
વધારાની સામગ્રીમાં કુદરતી લીડ-ઇન તરીકે નીચે સહાયક ટેક્સ્ટ સાથેનું આ વિશાળ કાર્ડ છે. આ સામગ્રી થોડી લાંબી છે.
છેલ્લે 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કાર્ડ્સ સરળ સંરેખણ માટે ફ્લેક્સબોક્સને બદલે 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. પૂર્ણાંક પોઝ્યુરે erat.
કાર્ડ શીર્ષક
આ કાર્ડમાં નિયમિત શીર્ષક અને તેની નીચે ટેક્સ્ટનો ટૂંકો ફકરો છે.
છેલ્લે 3 મિનિટ પહેલા અપડેટ કરવામાં આવ્યું
Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.
કાર્ડ શીર્ષક
આ નીચે શીર્ષક અને સહાયક ટેક્સ્ટ સાથેનું બીજું કાર્ડ છે. આ કાર્ડને એકંદરે થોડું ઊંચું બનાવવા માટે કેટલીક વધારાની સામગ્રી છે.
છેલ્લે 3 મિનિટ પહેલા અપડેટ કરવામાં આવ્યું
કાર્ડ કૉલમને કેટલાક વધારાના કોડ સાથે વિસ્તૃત અને કસ્ટમાઇઝ પણ કરી શકાય છે. .card-columnsકૉલમની સંખ્યા બદલવા માટે પ્રતિભાવાત્મક સ્તરોનો સમૂહ જનરેટ કરવા માટે અમે જે CSS નો ઉપયોગ કરીએ છીએ તે જ CSS-CSS કૉલમ્સ-નો ઉપયોગ કરીને વર્ગનું એક્સ્ટેંશન નીચે બતાવેલ છે .