Skip to content

Commit 9e6ea62

Browse files
MuhammadIrfanAnwariMuhammadIrfanAnwari
authored
pertemuan 7
Bootstrap (resposive, grid, container)
1 parent 3344a75 commit 9e6ea62

File tree

2 files changed

+149
-0
lines changed

2 files changed

+149
-0
lines changed

‎pertemuan7/batik.jpg‎

25.5 KB
Loading

‎pertemuan7/bootstrap.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
10+
11+
<title>Hello, world!</title>
12+
13+
14+
</head>
15+
<body>
16+
<div class="container-sm" style="background: #ddd;">
17+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
18+
<a class="navbar-brand" href="#">
19+
<img src="batik.jpg" width="60px" height="60px">
20+
</a>
21+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
22+
<span class="navbar-toggler-icon"></span>
23+
</button>
24+
25+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
26+
<ul class="navbar-nav mr-auto">
27+
<li class="nav-item active">
28+
<a class="nav-link" href="#">Home</a>
29+
</li>
30+
31+
<li class="nav-item">
32+
<a href="" class="nav-link">About</a>
33+
</li>
34+
35+
<li class="nav-item">
36+
<a href="" class="nav-link">Contact</a>
37+
</li>
38+
39+
<li class="nav-item dropdown">
40+
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
41+
Dropdown
42+
</a>
43+
<div class="dropdown-menu">
44+
<a class="dropdown-item" href="#">List 1</a>
45+
<a class="dropdown-item" href="#">List 2</a>
46+
<div class="dropdown-divider"></div>
47+
<a class="dropdown-item" href="#">List 3</a>
48+
</div>
49+
</li>
50+
</ul>
51+
<form class="form-inline my-2 my-lg-0">
52+
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
53+
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
54+
</form>
55+
</div>
56+
</nav>
57+
58+
<!-- dalam row hanya bisa menampung 12 kolom. jika lebih maka jumlah yang berlebih akan diturunin/bikin baris baru -->
59+
<div class="row mt-3">
60+
<div class="col-1 border border-1 border-success">Kolom 1</div>
61+
<div class="col-2 border border-1 border-success">Kolom 2</div>
62+
<div class="col-2 border border-1 border-success">Kolom 3</div>
63+
<div class="col-7 border border-1 border-success">Kolom 4</div>
64+
</div>
65+
66+
<div class="row mt-3">
67+
<div class="col-1 border border-1 border-success">Kolom 1</div>
68+
<div class="col-2 border border-1 border-success">Kolom 2</div>
69+
<div class="col-2 border border-1 border-success">Kolom 3</div>
70+
<div class="col-8 border border-1 border-success">Kolom 4</div>
71+
</div>
72+
73+
<!-- posisi antar kolom bisa ditentuin seperti display flex -->
74+
<div class="row mt-3 justify-content-between">
75+
<div class="col-3 border border-1 border-success">Kolom 1</div>
76+
<div class="col-3 border border-1 border-success">Kolom 2</div>
77+
<div class="col-3 border border-1 border-success">Kolom 3</div>
78+
</div>
79+
80+
<div class="row mt-3 justify-content-around">
81+
<div class="col-3 border border-1 border-success">Kolom 1</div>
82+
<div class="col-3 border border-1 border-success">Kolom 2</div>
83+
<div class="col-3 border border-1 border-success">Kolom 3</div>
84+
</div>
85+
86+
<div class="row mt-3 justify-content-center">
87+
<div class="col-3 border border-1 border-success">Kolom 1</div>
88+
<div class="col-3 border border-1 border-success">Kolom 2</div>
89+
<div class="col-3 border border-1 border-success">Kolom 3</div>
90+
</div>
91+
92+
<div class="row mt-3 justify-content-start">
93+
<div class="col-3 border border-1 border-success">Kolom 1</div>
94+
<div class="col-3 border border-1 border-success">Kolom 2</div>
95+
<div class="col-3 border border-1 border-success">Kolom 3</div>
96+
</div>
97+
98+
<div class="row mt-3 justify-content-end">
99+
<div class="col-3 border border-1 border-success">Kolom 1</div>
100+
<div class="col-3 border border-1 border-success">Kolom 2</div>
101+
<div class="col-3 border border-1 border-success">Kolom 3</div>
102+
</div>
103+
104+
<div class="row mt-3">
105+
<div class="col-md-6 col-sm-12 col-lg-4 border border-1 border-success">Kolom 1</div>
106+
<div class="col-md-6 col-sm-12 col-lg-4 border border-1 border-success">Kolom 2</div>
107+
<div class="col-md-12 col-sm-12 col-lg-4 border border-1 border-success">Kolom 3</div>
108+
</div>
109+
110+
<div class="row mt-3 justify-content-end h-200 align-items-center">
111+
<div class="col-3 border border-1 border-success">Kolom 1</div>
112+
<div class="col-3 border border-1 border-success">Kolom 2</div>
113+
<div class="col-3 border border-1 border-success">Kolom 3</div>
114+
</div>
115+
116+
<div class="row mt-3 justify-content-end h-200 align-items-start">
117+
<div class="col-3 border border-1 border-success">Kolom 1</div>
118+
<div class="col-3 border border-1 border-success">Kolom 2</div>
119+
<div class="col-3 border border-1 border-success">Kolom 3</div>
120+
</div>
121+
122+
<div class="row mt-3 justify-content-end h-200 align-items-end">
123+
<div class="col-3 border border-1 border-success">Kolom 1</div>
124+
<div class="col-3 border border-1 border-success">Kolom 2</div>
125+
<div class="col-3 border border-1 border-success">Kolom 3</div>
126+
</div>
127+
128+
<style type="text/css">
129+
.h-200{
130+
height: 200px;
131+
border: 5px solid black;
132+
}
133+
</style>
134+
</div>
135+
136+
<!-- Optional JavaScript; choose one of the two! -->
137+
138+
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
139+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
140+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
141+
142+
<!-- Option 2: Separate Popper and Bootstrap JS -->
143+
<!--
144+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
145+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
146+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
147+
-->
148+
</body>
149+
</html>

0 commit comments

Comments
 (0)