બુટસ્ટ્રેપ ગ્રીડ ઉદાહરણો

બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમમાં બિલ્ડીંગ સાથે તમને પરિચિત કરાવવા માટે મૂળભૂત ગ્રીડ લેઆઉટ.

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

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

.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 (મોટા ડેસ્કટોપ્સ). તમે વધુ ગતિશીલ અને લવચીક લેઆઉટ બનાવવા માટે આ વર્ગોના લગભગ કોઈપણ સંયોજનનો ઉપયોગ કરી શકો છો.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify 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

Mixed: mobile, tablet, and desktop

.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

Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

.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