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}
avatar maszgalang
@maszgalang

297 Kontribusi 80 Poin

Diperbarui 5 tahun yang lalu

3 Jawaban:

gak ada yg bisa bantu ?

avatar maszgalang
@maszgalang

297 Kontribusi 80 Poin

Dipost 5 tahun yang lalu

Jawaban Terpilih

close udah fix

avatar maszgalang
@maszgalang

297 Kontribusi 80 Poin

Dipost 5 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 5 tahun yang lalu

Login untuk ikut Jawaban