Eżempji tal-grilja Bootstrap

Taqsim bażiku tal-grilja biex jiffamiljarizzak mal-bini fi ħdan is-sistema tal-grilja Bootstrap.

F'dawn l-eżempji l- .themed-grid-colklassi hija miżjuda mal-kolonni biex iżżid xi tema. Din mhix klassi li hija disponibbli f'Bootstrap awtomatikament.

Ħames gradi tal-grilja

Hemm ħames saffi għas-sistema tal-grilja Bootstrap, waħda għal kull firxa ta 'apparati li nappoġġjaw. Kull saff jibda f'daqs minimu ta' viewport u awtomatikament japplika għall-apparati akbar sakemm ma jingħelbux.

.kol-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tliet kolonni ugwali

Ikseb tliet kolonni ta 'wisa' ugwali li jibdew minn desktops u skala għal desktops kbar . Fuq apparat mobbli, pilloli u taħt, il-kolonni awtomatikament jinstammu.

.col-md-4

Tliet kolonni ugwali alternattiva

By using the .row-cols-* classes, you can easily create a grid with equal columns.

.col child of .row-cols-md-3

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

.col-md-3

.col-md-6

.col-md-3

Two columns

Get two columns starting at desktops and scaling to large desktops.

.col-md-8

.col-md-4

Full width, single column

No grid classes are necessary for full-width elements.

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

.col-md-8

.col-md-6

.col-md-4

Mixed: mobile and desktop

The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.

.col-md-8

.col-6 .col-md-4

.col-6

Imħallat: mobbli, tablet, u desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Canali

Bil .gx-*-klassijiet, il-kanali orizzontali jistgħu jiġu aġġustati.

.colbil- .gx-4kanali

Uża l- .gy-*klassijiet biex tikkontrolla l-kanali vertikali.

.colbil- .gy-4kanali

Bil .g-*-klassijiet, il-kanali fiż-żewġ direzzjonijiet jistgħu jiġu aġġustati.

.colbil- .g-3kanali

Kontenituri

Klassijiet addizzjonali miżjuda f'Bootstrap v4.4 jippermettu kontenituri li huma wiesgħa 100% sa breakpoint partikolari. v5 iżid xxlbreakpoint ġdid.

.kontenitur

.kontenitur-sm

.container-md

.kontenitur-lg

.kontenitur-xl

.kontenitur-xxl

.kontenitur-fluwidu