In my website i am designing i have a require header file that allows the user to login and logout aswell as being the navbar. This as its own CSS shown in style.css , which is conflicting with the form i have as content on the page styled with bootstrap.
I have tried to isolate the bootstrap by using the <div class="bootstrap-iso"> tag and also using !important on the header css. None which i have got to the work.
style.css
* {
margin: 0;
padding: 0;
text-decoration: none;
}
button {
cursor: pointer;
}
body {
background-color: #F3F3F3;
}
.wrapper-main {
width: 900px;
margin: 0 auto;
}
header {
width: calc(100% - 30px);
height: 60px;
padding: 0 15px;
background-color: #FFF;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav-header-main {
height: 80%;
display: flex;
flex-direction: row;
}
.header-logo {
width: 48px;
padding-right: 20px;
}
.nav-header-main img {
height: 100%;
}
.nav-header-main ul {
height: 100%;
}
.nav-header-main ul li {
list-style: none;
float: left;
height: 100%;
}
.nav-header-main ul li a {
display: block;
height: 100%;
padding: 0 10px;
border-radius: 6px;
line-height: 48px;
font-family: arial;
font-size: 16px;
color: #111;
}
.header-login {
height: 60%;
display: flex;
flex-direction: row;
}
.header-login form {
height: 100%;
}
.header-login form input {
height: 100%;
width: 160px;
padding: 0 15px;
border: none;
border-radius: 4px;
background-color: #F6F6F6;
float: left !important;
margin-left: 8px;
font-family: arial;
}
.header-login form button {
height: 100%;
padding: 0 10px;
border: none;
border-radius: 4px;
background-color: #333;
margin-left: 8px;
font-family: arial;
font-size: 13px;
color: #FFF;
text-transform: uppercase;
text-align: center;
}
.header-signup {
height: 100%;
width: 70px;
padding: 0 6px;
border: none;
border-radius: 4px;
margin-left: 8px;
font-family: arial;
font-size: 13px;
line-height: 36px;
color: #111;
text-transform: uppercase;
text-align: center;
}
main {
padding-top: 20px;
}
.section-default {
width: 100%;
padding: 20px;
border-radius: 6px;
background-color: #FFF;
}
.login-status {
text-align: center;
font-size: 26px;
font-family: arial;
color: #111;
}
h1 {
text-align: center;
font-size: 26px;
font-family: arial;
color: #111;
}
/* signup.php */
.form-signup {
margin: 0 auto;
padding-top: 20px;
width: 200px;
}
.form-signup input {
width: calc(100% - 30px);
height: 30px;
padding: 0 15px;
margin-bottom: 6px;
border: 1px solid #CCC;
border-radius: 4px;
background-color: #F6F6F6;
float: left !important;;
font-family: arial;
}
.form-signup button {
display: block;
height: 40px;
padding: 0 10px;
margin: 0 auto;
border: none;
border-radius: 4px;
background-color: #333;
font-family: arial;
font-size: 13px;
color: #FFF;
text-transform: uppercase;
text-align: center;
}
.signuperror {
padding-top: 14px;
font-family: arial;
font-size: 16px;
color: red;
text-align: center;
}
.signupsuccess {
padding-top: 14px;
font-family: arial;
font-size: 16px;
color: green;
text-align: center;
}
bookappointment.php
<?php
include_once 'includes/dbh.inc.php';
require "s_header.php";
?>
<html>
<body>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bookappointment.css">
<div class="subnav" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="bookappointment.php">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewappointment.php">View</a>
</li>
</ul>
</div>
</div>
</div>
<div class="BookingForm" style="margin-top:30px">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form action="includes/book.php" method="post" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
<h2 class="w3-center">Book Appointment</h2>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="fname" type="text" placeholder="First Name">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="lname" type="text" placeholder="Last Name">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="email" type="text" placeholder="Email">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-phone"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="phone" type="text" placeholder="Phone">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-calendar"></i></div>
<div class="w3-rest">
<input type="date" name="date" value="" required></input>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-clock-o"></i></div>
<div class="w3-rest">
<input type="time" name="time" value="" required></input>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="message" type="text" placeholder="Message">
</div>
</div>
<p class="w3-center">
<button type ="submit "class="w3-button w3-section w3-blue w3-ripple"> Book </button>
</p>
</form>
</body>
</html>
