FrontEnd Programming (Pertemuan 2)

Pengenalan Grid System Pada Bootstrap Pengenalan Grid System Pada Bootstrap
Rizki Mufrizal

Rizki Mufrizal Technical Solution Architect Software Engineer https://rizkimufrizal.github.io

Pengertian Grid System Grid System adalah sistem yang digunakan Bootstrap
untuk mengatur tata letak (layout). Sistem ini terdiri dari 12 kolom dan 6 breakpoint.

Grid System

Pengertian Column Dan Row Row dan col merupakan class untuk
membuat baris dan kolom. Kedua class ini lah yang kita gunakan untuk membuat grid. Class row berfungsi untuk membuat baris, namun breakpoint tidak berlaku untuk class ini. Class col berfungsi untuk membuat kolom. Class ini harus dibungkus oleh class row agar menjadi grid. Class col memiliki ukuran dan breakpoint. Ukuran paling panjang adalah 12, dan ukuran paling pendek adalah 1.

Membuat Column Dan Row <!DOCTYPE html> <html lang="en"> <head> <meta
charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" /> </head> <body> <div class="row"> <div class="col">  </div> <div class="col">  </div> </div> <div class="row"> <div class="col-md-12">  </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" ></script> </body> </html>

Latihan Membuat Layout <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap demo</title>
<link href="bootstrap.min.css" rel="stylesheet" /> </head> <body> <header class="container bg-primary text-white"> <div class="row"> <div class="col-12 py-4 text-center"> <h1 class="display-1">Tutorial Bootstrap</h1> <p class="lead">Belajar</p> </div> </div> </header> <main class="container border"> <div class="row"> <div class="col-12 py-5"> <h1>Membuat Layout Satu Kolom</h1> <p>Lorem</p> </div> </div> </main> <footer class="container bg-light"> <div class="row"> <div class="col-12 py-4">© 2024 Tutorial Bootstrap</div> </div> </footer> <script src="bootstrap.bundle.min.js"></script> </body> </html>

Terima Kasih

FrontEnd Programming (Pertemuan 2)

FrontEnd Programming (Pertemuan 2)

rizki mufrizal

More Decks by rizki mufrizal

Other Decks in Programming

Featured

Transcript

Pengenalan Grid System Pada Bootstrap Pengenalan Grid System Pada Bootstrap

Rizki Mufrizal Technical Solution Architect Software Engineer https://rizkimufrizal.github.io

Pengertian Grid System Grid System adalah sistem yang digunakan Bootstrap

Grid System

Pengertian Column Dan Row Row dan col merupakan class untuk

Membuat Column Dan Row <!DOCTYPE html> <html lang="en"> <head> <meta

Latihan Membuat Layout <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap demo</title>

Terima Kasih