belajar container
untuk membuat container
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css" />
// buat style seperti ini <style>
.bordered {
}
</style>
</head>
<body>
<div class="container-fluid bordered"> // lalu panggil seperti ini
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis in
rerum architecto quis inventore et, ratione, enim libero at placeat ipsam
nam corporis laudantium est doloremque nesciunt cupiditate quos non. Ipsum
itaque natus animi asperiores illum, laudantium iure! Maiores quaerat non
inventore esse vero harum dignissimos molestiae, quod aperiam beatae
ducimus consectetur deleniti doloremque minus exercitationem nulla velit
magni necessitatibus et. Officia, a molestias totam impedit, ullam
voluptatibus consequuntur repudiandae molestiae nemo praesentium
reprehenderit at quam laboriosam consectetur eius modi beatae ab quisquam
voluptate eos, alias itaque. Quia laudantium tempora quae tenetur? Quia,
atque officia! Assumenda mollitia accusantium numquam esse?
</div>
<script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid
ada beberapa pilihan
Belajar Grid
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css" />
<style>
.bordered {
border: solid;
}
.contoh {
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container bordered">
<div class="row">
<div class="col-1">
<div class="contoh">1</div>
</div>
<div class="col-1">
<div class="contoh">2</div>
</div>
<div class="col-1">
<div class="contoh">3</div>
</div>
<div class="col-1">
<div class="contoh">4</div>
</div>
<div class="col-1">
<div class="contoh">5</div>
</div>
<div class="col-1">
<div class="contoh">6</div>
</div>
<div class="col-1">
<div class="contoh">7</div>
</div>
<div class="col-1">
<div class="contoh">8</div>
</div>
<div class="col-1">
<div class="contoh">9</div>
</div>
<div class="col-1">
<div class="contoh">10</div>
</div>
<div class="col-1">
<div class="contoh">11</div>
</div>
<div class="col-1">
<div class="contoh">12</div>
</div>
<script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
cek untuk 12 kolom saja atau yang dimaksud col-12 . hasil yang benar di atas layar muncul 12 kolom , kalau ditambah 1 bakal turun di bawah, dibawah angka 1
cara membari 2 kolom secara otomatis. dengan cara
div class="col-6">
div class="col-6">
jadi totalnya 12
nah, bagaimana kalau kita ingin 2 kolom penuh 12 12.
<div class="col-12">
tinggal masukkan kode tersebut dan menambahkan style turun
.turun {
margin-top: 10px;
}
dengan cara memanggil
<div class="col-12 turun">
gambar akan nampak seperti diatas, coba lagi kode dibawah ini untuk membagi 2 diatas
<div class="col-12 col-sm-6 turun">
<div class="contoh">1</div>
</div>
untuk 3 kolom diatas bisa gunakan dibawah ini
<div class="container bordered">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 turun">
<div class="contoh">1</div>
</div>
<div class="col-12 col-sm-6 col-md-4 turun">
<div class="contoh ">2</div>
</div>
<div class="col-12 col-sm-6 col-md-4 turun">
<div class="contoh ">2</div>
</div>
ini untuk 4 kolom diatas bisa gunakan dibawah ini
<div class="container bordered">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 turun">
<div class="contoh">1</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 turun">
<div class="contoh ">2</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 turun">
<div class="contoh ">2</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 turun">
<div class="contoh ">2</div>
</div>
0 Comments:
Posting Komentar
Monggo sarannya