Pada kesempatan kali ini saya akan menjelaskan cara mengatur tata letak flex bootstrap 4. Perlu teman-teman ketahui sebelumnya, perbedaan antara Bootstrap 3 dengan Bootstrap 4 adalah dimana Bootstrap 4 saat ini sudah menggunakan flexbox untuk menangani tata letak suatu element. Dari flexbox tersebut bisa mempermudah untuk merancang struktur tata letak suatu element yang fleksibel tanpa penentuan posisi.
Untuk mengatur tata letak suatu element flexbox di sebelah kiri, teman-teman bisa menggunakan class justify-content-start. Untuk mengatur tata letak suatu element flexbox berada disebelah kanan, teman-teman bisa menggunakan class Untuk mengatur tata letak suatu element flexbox di sebelah kiri, teman-teman bisa menggunakan class justify-content-end. Sedangkan Untuk mengatur tata letak suatu element flexbox berada ditengah-tengah layar, teman-teman bisa menggunakan class justify-content-center.
Berikut tahapannya :
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
- Jika sudah selanjutnya ketikan seperti kode berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="d-flex justify-content-start bg-secondary mt-3"> <div class="p-2 bg-success">Flex item left 1</div> <div class="p-2 bg-primary">Flex item left 2</div> <div class="p-2 bg-warning">Flex item left 3</div> <div class="p-2 bg-danger">Flex item left 4</div> </div> </div> <div class="container"> <div class="d-flex justify-content-center bg-secondary mt-3"> <div class="p-2 bg-success">Flex item center 1</div> <div class="p-2 bg-primary">Flex item center 2</div> <div class="p-2 bg-warning">Flex item center 3</div> <div class="p-2 bg-danger">Flex item center 4</div> </div> </div> <div class="container"> <div class="d-flex justify-content-end bg-secondary mt-3"> <div class="p-2 bg-success">Flex item right 1</div> <div class="p-2 bg-primary">Flex item right 2</div> <div class="p-2 bg-warning">Flex item right 3</div> <div class="p-2 bg-danger">Flex item right 4</div> </div> </div> </body> </html> |
Sampai disini penjelasan saya mengenai cara mengatur tata letak flex bootstrap 4, semoga bermanfaat.