1
I want to put on my page a button that has bootstrap and its own css, this button is in the login.php file. But when I go to give the login.php include in my index.php file it generates a "conflict" in the styles of my main page which in this case is index.php. So how do I bring login.php to index.php without the latter having the style changed?
--no login button--
--with button, generating the css conflict--
index php.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">
<style>
h1{
font-family: 'Bahiana', cursive;
font-size: 100px;
}
li{
font-family: 'Bahiana', cursive;
font-size: 40px;
}
body{
background-color: #e3e9f2;
}
li{
list-style-type: none;
display: table;
margin: 0 auto;
margin-top: 10px;
padding: 10px;
border: 12px solid black;
}
a:hover{
list-style-type: none;
display: table;
margin: 0 auto;
margin-top: 10px;
padding: 10px;
border: 12px solid black;
color: purple;
background-color: grey;
}
a{
text-decoration: none;
color: black;
}
</style>
<body>
<?php
include 'login.php';
?>
<CENTER><h1>teste</h1></CENTER>
<ul>
<li><a href="http://localhost/whatsthis/"><a href='post.php?id=$post_id'>teste </a></a></li>
<li><a href="">> teste <</a></li>
<li><a href="">> teste <</a></li>
<li><a href="">> teste <</a></li>
</ul>
</body>
</html>
login.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
</html>