conto grid Bootstrap

Tata perenah grid dasar pikeun ngajantenkeun anjeun wawuh sareng ngawangun dina sistem grid Bootstrap.

Lima tiers grid

Aya lima undakan kana sistem grid Bootstrap, hiji pikeun unggal rentang alat anu kami dukung. Unggal undakan dimimitian dina ukuran viewport minimum jeung otomatis dilarapkeun ka alat nu leuwih gede iwal overridden.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Tilu kolom sarua

Kéngingkeun tilu kolom lebar anu sami dimimitian dina desktop sareng skala kana desktop ageung . Dina alat sélulér, tablet sareng handap, kolom bakal otomatis tumpukan.

.col-md-4
.col-md-4
.col-md-4

Tilu kolom unequal

Kéngingkeun tilu kolom dimimitian dina desktop sareng skala kana desktop ageung tina rupa-rupa lebar. Inget, kolom grid kudu nambahan nepi ka dua belas pikeun blok horizontal tunggal. Leuwih ti éta, sarta kolom mimiti stacking euweuh urusan viewport nu.

.col-md-3
.col-md-6
.col-md-3

Dua kolom

Kéngingkeun dua kolom dimimitian dina desktop sareng skala kana desktop ageung .

.col-md-8
.col-md-4

Lebar pinuh, kolom tunggal

Taya kelas grid diperlukeun pikeun elemen full-lebar.

Dua kolom kalawan dua kolom nested

Per dokuméntasi, nyarang gampang - ngan nempatkeun barisan kolom dina kolom anu tos aya. Ieu masihan anjeun dua kolom dimimitian dina desktop sareng skala ka desktop ageung , sareng dua deui (lebar anu sami) dina kolom anu langkung ageung.

Dina ukuran alat mobile, tablet jeung handap, kolom ieu sareng kolom nested maranéhanana baris tumpukan.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Campuran: mobile sareng desktop

Sistem grid Bootstrap v4 ngagaduhan lima tingkatan kelas: xs (tambahan leutik), sm (leutik), md (sedeng), lg (ageung), sareng xl (tambahan ageung). Anjeun tiasa make ampir sagala kombinasi kelas ieu nyieun layouts leuwih dinamis sarta fléksibel.

Unggal undakan kelas skala up, hartina lamun rencana pikeun nyetel lebar sarua pikeun xs jeung sm, Anjeun ngan perlu nangtukeun xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Campuran: mobile, tablet, sareng desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4