Why bootstrap modal is not working? (Solved)

m.s_shohan · May 1, 2017

Hi, I am going through bootstrap 4 alpha version. But when I tried to create a simple modal I found that it doesn't work in my browser. Can anyone find out what is wrong I am doing?

The problem is fixed. It was causing problem because of incorrect data-target attribute.

<!DOCTYPE html>
<html lang= "en-US">
	<head>
		<meta charset= "utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit= no"/>
		<title> . Bootstrap</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	</head>
	
	<body>
		
		<div class= "container">
			<div class= "row">
				<div class= "col-12">
					<h1 class= "alert-info">Live Demo</h1>
					<div class= "w-100"></div>
					
					<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#liveModal">
						Go Live
					</button>
					<div class= "modal fade" tabindex="-1" id= "liveModal" role= "dialog" aria-labelledby= "liveModalLabel">
						<div class= "modal-dialog" role="document">
							<div class= "modal-content">
								<div class= "modal-header">
									<h5 class= "modal-title">Modal Title</h5>
									<button class= "close" type="button" data-dismiss= "modal" aria-label= "Close">
										<span aria-hidden= "true">×</span>
									</button>
								</div>
								<div class= "modal-body">
									<p>
										Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
									</p>
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		
		<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
	</body>
</html>

Edited May 1, 2017 by m.s_shohan
Found the solution already

Sign In

Why bootstrap modal is not working? (Solved)

Recommended Posts

m.s_shohan

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity