લેઆઉટ માટે ઉપયોગિતાઓ

બદલાતીdisplay

પ્રોપર્ટીના સામાન્ય મૂલ્યોને પ્રતિભાવપૂર્વક ટૉગલ કરવા માટે અમારી ડિસ્પ્લે યુટિલિટીનો ઉપયોગ કરો. displayચોક્કસ વ્યુપોર્ટ પર બતાવવા અથવા છુપાવવા માટે તેને અમારી ગ્રીડ સિસ્ટમ, સામગ્રી અથવા ઘટકો સાથે મિક્સ કરો.

ફ્લેક્સબોક્સ વિકલ્પો

બુટસ્ટ્રેપ ફ્લેક્સબોક્સ સાથે બનેલ છે, પરંતુ દરેક ઘટકને displayબદલવામાં આવ્યું નથી display: flexકારણ કે આ ઘણા બિનજરૂરી ઓવરરાઇડ્સ ઉમેરશે અને અણધારી રીતે કી બ્રાઉઝર વર્તણૂકોને બદલશે. અમારા મોટાભાગના ઘટકો ફ્લેક્સબોક્સ સક્ષમ સાથે બનેલ છે.

display: flexજો તમારે કોઈ ઘટકમાં ઉમેરવાની જરૂર હોય , તો .d-flexતે પ્રતિભાવશીલ પ્રકારો (દા.ત., .d-sm-flex)માંથી એક સાથે કરો. કદ, સંરેખણ, અંતર અને વધુ માટે અમારી વધારાની ફ્લેક્સબોક્સ ઉપયોગિતાઓનોdisplay ઉપયોગ કરવાની મંજૂરી આપવા માટે તમને આ વર્ગ અથવા મૂલ્યની જરૂર પડશે .

માર્જિન અને ગાદી

તત્વો અને ઘટકો કેવી રીતે અંતર અને કદના છે તે નિયંત્રિત કરવા માટે marginઅને padding અંતર ઉપયોગિતાઓનો ઉપયોગ કરો . 1remબુટસ્ટ્રેપમાં વેલ્યુ ડિફોલ્ટ $spacerવેરીએબલ પર આધારિત, અંતર ઉપયોગિતાઓ માટે છ-સ્તરના સ્કેલનો સમાવેશ થાય છે . બધા વ્યુપોર્ટ્સ માટે મૂલ્યો પસંદ કરો (દા.ત., LTR માં .me-3માટે ), અથવા ચોક્કસ વ્યૂપોર્ટ્સને લક્ષ્ય બનાવવા માટે margin-right: 1remપ્રતિભાવશીલ વેરિઅન્ટ્સ પસંદ કરો (દા.ત., — LTR માં — બ્રેકપોઈન્ટથી શરૂ કરીને )..me-md-3margin-right: 1remmd

ટૉગલ કરોvisibility

જ્યારે ટૉગલ કરવાની જરૂર ન હોય, ત્યારે તમે અમારી વિઝિબિલિટી યુટિલિટીઝ સાથે એલિમેન્ટને displayટૉગલ કરી શકો છો . અદ્રશ્ય તત્વો હજી પણ પૃષ્ઠના લેઆઉટને અસર કરશે, પરંતુ મુલાકાતીઓથી દૃષ્ટિની રીતે છુપાયેલા છે.visibility