Tumpukan
Pembantu singkatan yang dibangun di atas utilitas flexbox kami untuk membuat tata letak komponen lebih cepat dan lebih mudah dari sebelumnya.
Tumpukan menawarkan pintasan untuk menerapkan sejumlah properti flexbox untuk membuat tata letak dengan cepat dan mudah di Bootstrap. Semua kredit untuk konsep dan implementasi diberikan kepada proyek Pylon open source .
Vertikal
Gunakan .vstack
untuk membuat tata letak vertikal. Item yang ditumpuk memiliki lebar penuh secara default. Gunakan .gap-*
utilitas untuk menambahkan ruang antar item.
<div class="vstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border">Second item</div>
<div class="bg-light border">Third item</div>
</div>
Horisontal
Gunakan .hstack
untuk tata letak horizontal. Item yang ditumpuk dipusatkan secara vertikal secara default dan hanya mengambil lebar yang diperlukan. Gunakan .gap-*
utilitas untuk menambahkan ruang antar item.
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border">Second item</div>
<div class="bg-light border">Third item</div>
</div>
Menggunakan utilitas margin horizontal seperti .ms-auto
sebagai spacer:
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border ms-auto">Second item</div>
<div class="bg-light border">Third item</div>
</div>
Dan dengan aturan vertikal :
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border ms-auto">Second item</div>
<div class="vr"></div>
<div class="bg-light border">Third item</div>
</div>
Contoh
Gunakan .vstack
untuk menumpuk tombol dan elemen lainnya:
<div class="vstack gap-2 col-md-5 mx-auto">
<button type="button" class="btn btn-secondary">Save changes</button>
<button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>
Buat formulir sebaris dengan .hstack
:
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
<button type="button" class="btn btn-secondary">Submit</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Reset</button>
</div>
Kelancangan
.hstack {
display: flex;
flex-direction: row;
align-items: center;
align-self: stretch;
}
.vstack {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-self: stretch;
}