Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja

skodev mascot typing keyboard

SKO.DEV

sekolah koding rasa baru

Postingan lainnya

Buku Ini Koding!

Baru!
foto buku programmer - ini koding

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

Kelas Premium!
Belajar bikin website dari nol sekarang

cover kelas HTML dan CSS

Gunakan kupon "lebihcepat" untuk diskon 25%!

Kelas Premium!
Belajar Javascript untuk website

cover kelas Javascript

Gunakan kupon "mulaijs" untuk diskon 75 ribu!

Modal Bootstrap Gak jalan

Mohon bantuanya modal bootstrap gak jalan -_- gmn yak pusing saya

 	<!DOCTYPE>
	<html>
	<head>
		<title>INDEX BUILDING</title>

		<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/style.css">
	</head>
	<body>

		<!-- HEADER START -->
		<header>
			<div class="col-md-12">
				<nav class="navbar navbar-expand-sm bg-primary navbar-primary fixed-top">
					<div class="brand">
						<a class="navbar-brand" href="#">
							<img src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
							Bootstrap
						</a>
					</div>
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
					</ul>
					<ul class="nav navbar-nav ml-auto">
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
					</ul>
					<!-- Small modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

					<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
						<div class="modal-dialog modal-sm">
							<div class="modal-content">
								...
							</div>
						</div>
					</div>
				</nav>
			</div>
		</header>
		<!-- Header END -->

		<!-- content -->
		<div class="container bg">
			<div class="row">
				<div class="col-md-4 thum">
					<div class="post-index">
						<h1>JUDUL TEXT</h1>
						<div class="img">
							<img src="assets/images/images3.jpg" class="img-thumbnail">
						</div>
						<div class="info-post">
							<div class="progress position-relative">
								<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
								<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
							</div>
							<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown" style="margin-bottom: 0rem;"></p></button>
						</div>
					</div>
				</div>
				<div class="col-md-4 thum">
					<div class="post-index">
						<h1>JUDUL TEXT</h1>
						<div class="img">
							<img src="assets/images/images3.jpg" class="img-thumbnail">
						</div>
						<div class="info-post">
							<div class="progress position-relative">
								<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
								<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
							</div>
							<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown2" style="margin-bottom: 0rem;"></p></button>
						</div>
					</div>
				</div>
				<div class="col-md-4 thum">
					<div class="post-index">
						<h1>JUDUL TEXT</h1>
						<div class="img">
							<img src="assets/images/images3.jpg" class="img-thumbnail">
						</div>
						<div class="info-post">
							<div class="progress position-relative">
								<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
								<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
							</div>
							<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown3" style="margin-bottom: 0rem;"></p></button>
						</div>
					</div>
				</div>
				<div class="col-md-4 thum">
					<div class="post-index">
						<h1>JUDUL TEXT</h1>
						<div class="img">
							<img src="assets/images/images3.jpg" class="img-thumbnail">
						</div>
						<div class="info-post">
							<div class="progress position-relative">
								<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
								<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
							</div>
							<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown" style="margin-bottom: 0rem;"></p></button>
						</div>
					</div>
				</div>
				<div class="col-md-4 thum">
					<div class="post-index">
						<h1>JUDUL TEXT</h1>
						<div class="img">
							<img src="assets/images/images3.jpg" class="img-thumbnail">
						</div>
						<div class="info-post">
							<div class="progress position-relative">
								<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
								<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
							</div>
							<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown2" style="margin-bottom: 0rem;"></p></button>
						</div>
					</div>
				</div>
				<div class="col-md-4 thum">
					<div class="post-index">
						<h1>JUDUL TEXT</h1>
						<div class="img">
							<img src="assets/images/images3.jpg" class="img-thumbnail">
						</div>
						<div class="info-post">
							<div class="progress position-relative">
								<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
								<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
							</div>
							<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown3" style="margin-bottom: 0rem;"></p></button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Content END -->

		<!-- Start Java Script Countdown -->
		<script>
			var countDownDate = new Date("08/20/2018").getTime();
			var x = setInterval(function() {

				var now = new Date().getTime();

				var distance = countDownDate - now;

				var days = Math.floor(distance / (1000 * 60 * 60 * 24));
				var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
				+ minutes + "m " + seconds + "s ";
				if (distance < 0) {
					clearInterval(x);
					document.getElementById("countdown").innerHTML = "EXPIRED";
				}
			}, 1000);
		</script>
		<script>
			var countDownDate = new Date("08/20/2018").getTime();
			var x = setInterval(function() {

				var now = new Date().getTime();

				var distance = countDownDate - now;

				var days = Math.floor(distance / (1000 * 60 * 60 * 24));
				var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				document.getElementById("countdown2").innerHTML = days + "d " + hours + "h "
				+ minutes + "m " + seconds + "s ";
				if (distance < 0) {
					clearInterval(x);
					document.getElementById("countdown2").innerHTML = "EXPIRED";
				}
			}, 1000);
		</script>
		<script>
			var countDownDate = new Date("08/20/2018").getTime();
			var x = setInterval(function() {

				var now = new Date().getTime();

				var distance = countDownDate - now;

				var days = Math.floor(distance / (1000 * 60 * 60 * 24));
				var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				document.getElementById("countdown3").innerHTML = days + "d " + hours + "h "
				+ minutes + "m " + seconds + "s ";
				if (distance < 0) {
					clearInterval(x);
					document.getElementById("countdown3").innerHTML = "EXPIRED";
				}
			}, 1000);
		</script>
		<!-- Java Script Countdown END -->

		<!-- START Footer  -->
		<footer></footer>
		<!-- End Footer -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	</body>
	</html>

Css Tambahan

 body{background: pink;}
.bg{background: white;margin-top: 55px;}
.img{margin: 3px;padding: 3px;}
.img img{width: 330px;height: 330px;}
.header-title{margin-top: 51px;text-align: center;}
.navbar-nav a{color: #fff;}
.navbar-nav a:hover{background: #fff;color: indigo;}
.brand a{color: #fff}
.brand a:hover{background: none;}
.thum{margin}
.post-index{border: 1px grey solid;margin:3px;}
.post-index h1{text-align:center;font-size: 20px; margin-bottom: 0px;}
.info-post{text-align: center;margin:10px}
css javascript html
avatar maszgalang
@maszgalang

297 Kontribusi 80 Poin

Diperbarui 6 tahun yang lalu

3 Jawaban:

gak ada yg bisa bantu ?

avatar maszgalang
@maszgalang

297 Kontribusi 80 Poin

Dipost 6 tahun yang lalu

Jawaban Terpilih

close udah fix

avatar maszgalang
@maszgalang

297 Kontribusi 80 Poin

Dipost 6 tahun yang lalu

ada beberapa sebab gan, bisa saja penempatan pada <script src="boostrap.min.js"></script> <script src="jquery.min.js"></script>

jadi si <script> jquery pling atas seblm boostrap min.js klo ngga id nya bertubrukan

avatar revi
@revi

7 Kontribusi 1 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban