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.
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 4
Containers 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.
Container
Container 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="//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.
text-white adalah class yang disediakan oleh bootstrap 4 untuk membuat tulisan text menjadi warna putih.
dan class text-center adalah class untuk memindahkan letak text ke tengah.
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-fluid
Jika 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="//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:
- container language:id
- container pada html
- Container pada bootstrap
- Fungsi class container
- mengatur ukuran fluid container
- fungsi container pada boostrap
- contoh container di html
- Tutorial Bootstrap 4 #3 :
- //www malasngoding com/containers-pada-bootstrap-4/
- fungsi container pada html
- SHARE :
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.
- Author's profile
- All posts by Diki Alfarabi Hadi
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
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Border 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 HadiTutorial Bootstrap 4 #35 : Border Bootstrap 4
22 October 2019
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 HadiTutorial Bootstrap 4 #34 : Tooltips Bootstrap 4
13 September 2019
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 HadiTutorial Bootstrap 4 #33 : Toasts Bootstrap 4
9 September 2019
Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ...Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4
7 September 2019