Containers Pada Bootstrap 4 – Teman-teman berada di tutorial bootstrap 4 bagian ketiga, dalam seri tutorial bootstrap 4 terlengkap dari dasar hingga mahir berbahasa indonesia. Show Pada tutorial bootstrap 4 ketiga ini akan di bahas tentang container pada bootstrap. apa itu container ? bagaimana cara menggunakannya ? dan apa kegunaan container pada bootstrap ? Akan kita bahas tuntas pada tutorial Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4 ini. Bagi teman-teman yang belum mengikuti tutorial sebelumnya, silahkan baca Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4 terlebih dulu. Containers Pada Bootstrap 4Containers adalah element layout yang paling dasar pada bootstrap. kita wajib menggunakan containers jika ingin menggunakan sistem grid bootstrap. Apa itu sistem grid bootstrap ? grid sistem bootstrap akan kita pelajari pada tutorial selanjutnya. yang penting pada tutorial ini, teman-teman harus paham dulu tentang pengertian dan cara menggunakan containers saja dulu. Supaya lebih paham ketika masuk ke materi sistem grid bootstrap di tutorial selanjutnya. Ada 2 jenis containers pada bootstrap, yaitu container dan container-fluid. ContainerContainer bisa kita anggap sebagai wadah yang menampung semua element grid sistem atau element lain nya dari bootstrap. Jika teman-teman pernah melihat website yang ukuran lebar layoutnya tidak penuh, berarti website tersebut menggunakan container untuk lebar layoutnya, sebaliknya jika menggunakan container-fluid, tampilan layout websitenya akan berukuran penuh.  container 1 2 3 <div class="container"> konten nya di sini </div> Sekarang kita akan membuat contoh untuk penggunaan container. buka file belajar_bootstrap.html yang sudah dibuat pada tutorial sebelumnya. dan ketik coding berikut. belajar_bootstrap/belajar_bootstrap.html 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 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Containers Bootstrap 4 - www.malasngoding.com</title> </head> <body>
<div class="container">
<div class="bg-primary text-white text-center"> <br/> <h4>Contoh container</h4> <br/> </div> <a href="https://www.malasngoding.com">www.malasngoding.com</a>
</div>
<script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> Perhatikan pada contoh penggunaan container di atas, untuk menggunakan container kita tinggal menambahkan class container pada element paling luar. untuk membungkus element-element lainnya. Adapun element yang dibungkus oleh container ini kita buat contoh dengan element div yang menggunakan class bg-primary, text-white, dan text-center. Kemudian di dalamnya ada heading h4, dan element hyperlink. NOTE : class bg-primary adalah class yang disediakan oleh bootstrap 4 untuk membuat background warna bitu. Sekarang kita lihat hasilnya. Jalankan file belajar_bootstrap.html contoh container Seperti yang terlihat pada gambar di atas, element container berukuran tidak penuh lebarnya. dan letaknya di tengah. Selanjutnya kita lihat contoh container-fluid. Container-fluidJika container berukuran tidak penuh, dan letaknya di tengah, maka container-fluid adalah kebalikannya, container-fluid memiliki lebar penuh. Perhatikan gambar dan coding berikut. container-fluid 1 2 3 <div class="container-fluid"> konten nya di sini </div> Selanjutnya kita buat contoh untuk penggunaan container-fluid. Perhatikan coding berikut. belajar_bootstrap/belajar_bootstrap.html 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 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Containers Bootstrap 4 - www.malasngoding.com</title> </head> <body>
<div class="container-fluid">
<div class="bg-primary text-white text-center"> <br/> <h4>Contoh container-fluid</h4> <br/> </div> <a href="https://www.malasngoding.com">www.malasngoding.com</a>
</div>
<script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> dan kita lihat hasilnya contoh container-fluid Seperti yang terlihat pada gambar di atas, class container-fluid memiliki ukuran yang lebar penuh. Untuk penggunaan masing-masing dari container dan container-fluid tinggal teman-teman sesuaikan saja sesuai kebutuhan desain tampilan website yang ingin teman-teman buat. Oke sekian Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4. pada tutorial selanjutnya kita akan masuk ke materi sistem grid pada bootstrap untuk membuat element website yang responsive. Download Source Code
Incoming search terms:
Diki Alfarabi Hadi Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Tags: belajar bootstrap grid, bootstrap card, bootstrap grid template, bootstrap layout template, bootstrap thumbnail, container, container bootstrap 4, container bootstrap 4 w3schools, container-fluid, container-fluid bootstrap 4, grid system css, pengertian container dalam bootstrap Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYABorder Bootstrap 4 -Setelah sebelumnya dari tutorial bootstrap 4 bagian 1 sampai bagian 34, sudah dijelaskan tentang dasar-dasar dari bootstrap. Mulai dari pengenalan apa itu ... Diki Alfarabi Hadi Tooltips Bootstrap 4 – Selamat datang kembali di tutorial lengkap bootstrap 4 step by step untuk pemula sampai mahir di www.malasngoding.com. Setelah pada tutorial sebelumnya ... Diki Alfarabi Hadi Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu ... Diki Alfarabi Hadi Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ... |
Cara menggunakan bootstrap center center content
Pos Terkait
Copyright © 2024 kemunculan Inc.
