Jarak

Bootstrap mencakup berbagai margin responsif singkatan dan kelas utilitas padding untuk memodifikasi tampilan elemen.

Bagaimana itu bekerja

Tetapkan nilai marginatau ramah-responsif paddingke elemen atau subset sisinya dengan kelas singkatan. Termasuk dukungan untuk properti individu, semua properti, dan properti vertikal dan horizontal. Kelas dibangun dari peta Sass default mulai .25remdari 3rem.

Notasi

Utilitas spasi yang berlaku untuk semua breakpoint, dari xssampai xl, tidak memiliki singkatan breakpoint di dalamnya. Ini karena kelas tersebut diterapkan dari min-width: 0dan ke atas, dan dengan demikian tidak terikat oleh kueri media. Breakpoints yang tersisa, bagaimanapun, termasuk singkatan breakpoint.

Kelas diberi nama menggunakan format {property}{sides}-{size}untuk xsdan {property}{sides}-{breakpoint}-{size}untuk sm, md, lg, dan xl.

Dimana properti adalah salah satu dari:

• m- untuk kelas yang ditetapkanmargin
• p- untuk kelas yang ditetapkanpadding

Dimana sisi adalah salah satu dari:

• t- untuk kelas yang mengatur margin-topataupadding-top
• b- untuk kelas yang mengatur margin-bottomataupadding-bottom
• l- untuk kelas yang mengatur margin-leftataupadding-left
• r- untuk kelas yang mengatur margin-rightataupadding-right
• x- untuk kelas yang mengatur keduanya *-leftdan*-right
• y- untuk kelas yang mengatur keduanya *-topdan*-bottom
• kosong - untuk kelas yang menetapkan a marginatau paddingdi keempat sisi elemen

Dimana ukuran adalah salah satu dari:

• 0- untuk kelas yang menghilangkan marginatau paddingdengan menyetelnya ke0
• 1- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer * .25
• 2- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer * .5
• 3- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer
• 4- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer * 1.5
• 5- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer * 3
• auto- untuk kelas yang menyetel marginke otomatis

(Anda dapat menambahkan lebih banyak ukuran dengan menambahkan entri ke $spacersvariabel peta Sass.)

Contoh

Berikut adalah beberapa contoh representatif dari kelas-kelas ini:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Pemusatan horizontal

Selain itu, Bootstrap juga menyertakan .mx-autokelas untuk konten level blok lebar tetap yang terpusat secara horizontal—yaitu, konten yang memiliki display: blockdan satu widthset—dengan menyetel margin horizontal ke auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>