#Bootstrap

Bootstrap Part 16 : Mengenal Grid System Bootstrap

By Diki Alfarabi Hadi
8 January 2016
Bootstrap

Mengenal Grid System Bootstrap

Grid System pada bootstrap merupakan pengaturan ukuran yang di tampilkan pada monitor. grid system berfungsi untuk membuat pengaturan untuk lebar dari masing-masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan halaman website yang kita buat dengan bootstrap. bootstrap memiliki 12 grid. yang nantinya kita akan dapat menggunakan class berikut ini untuk mengatur keresponsive an halaman website dengan mengaturnya menggunakan 12 grid bootstrap. bootstrap memiliki beberapa class grid yang masing-masing nya memiliki kegunaannya masing-masing. Mengenal Grid System Bootstrap

col-lg-*
digunakan untuk mengatur grid pada monitor komputer yang berukuran besar.
col-md-*
digunakan untuk mengatur grid pada layar monitor komputer yang berukuran sedang.
col-sm-*
digunakan untuk mengatur grid pada monitor yang berukuran tablet.
col-xs-*
digunakan untuk mengatur grid untuk ukuran handphone.

Silahkan perhatikan gambar berikut ini untuk memahami grid system pada bootstrap.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title>

div{

background: #2ea3f2;

text-align: center;

border: 1px solid #fff;

padding: 10px;

color: #fff;

}

</style>

</head>

<body>

<center><h1>Mengenal Grid System Bootstrap | www.malasngoding.com</h1></center>

<br/>

</body>

</html>

dan perhatikan hasil dari grid system bootstrap berikut.

mengenal grid system bootstrap

See the Pen pgPPjW by Malas Ngoding (@malasngoding) on CodePen.0

jadi dapat di simpulkan bootstrap membagi halaman website menjadi 12 grid. dan kita bebar ingin menggunakan berapa grid untuk menentukan lebar sebuah element yang ingin kita buat. ukuran col-md-1 adalah ukuran yang paling kecil seperti yang dapat di lihat pada gambar di atas. penggunaan col-md untuk mengatur ukuran lebar pada ukuran monitor yang sedang, dan col-lg untuk ukuran monitor yang besar, begitu juga untuk col-xs dan col-sm seperti yang sudah di jelaskan pada penjelasan tentang class grid bootstrap di atas. Mengenal Grid System Bootstrap

contoh sederhananya jika misalnya anda memiliki dua buah kotak. dan pada ukuran laptop biasa anda ingin menampilkan kotak tersebut dengan bersampingan. maka anda bisa memberikan col-md-6 pada masing-masing kotak. dan jika di buka melalui smartphone misalnya anda ingin masing-masing kotak tersebut di tampilkan dengan lebar penuh maka anda bisa menambahkan lagi col-xs-12 pada masing-masing element kotak. contohnya

pengertian grid bootstrap

cara menggunakan grid system bootstrap

contoh penggunaan grid system bootstrap lainnya.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title>

div{

background: #2ea3f2;

text-align: center;

border: 1px solid #fff;

padding: 10px;

color: #fff;

}

.konten{

height: 300px;

}

.sidebar{

height: 300px;

}

</style>

</head>

<body>

<center><h1>Mengenal Grid System Bootstrap | www.malasngoding.com</h1></center>

<br/>

<div class="col-md-12 col-xs-12">Ini header</div>

<div class="col-md-9 col-xs-12 konten">Ini konten</div>

<div class="col-md-3 col-xs-12 sidebar">Ini sidebar</div>

<div class="col-md-12 col-xs-12">Ini footer</div>

</body>

</html>

contoh grid system bootstrap

membuat grid bootstrap

Setelah membaca penjelasan dari mengenal grid system bootstrap dan melihat beberapa contoh penggunaan dari grid system bootstrap di harapkan dapat memberikan pemahaman yang jelas tentang penggunaan dan kegunan dari grid bootstrap. sekian tutorial bootstrap part 16 : Mengenal grid system bootstrap.

Tutorial Bootstrap Dasar Lainnya

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.