ત્રણ સમાન કૉલમ

ડેસ્કટૉપથી શરૂ થતી ત્રણ સમાન-પહોળાઈની કૉલમ મેળવો અને મોટા ડેસ્કટૉપ પર સ્કેલિંગ કરો . મોબાઇલ ઉપકરણો, ટેબ્લેટ અને નીચે, કૉલમ્સ આપમેળે સ્ટેક થશે.

.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-xs-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