The words or text below the logo in the navbar are not moving to the right of the logo (for reference link to the page -> http://127.0.0.1:5500/index.html).
Additionally the logo is not shifting to its left - it's happening in basically all the navbar codes. I'm trying to do this using CSS bootstrap. Any explanation would be very helpful since I have recently started learning bootstrap CSS.
body {
font-size: 16px;
color: #fff;
background-color: #F5EEE0;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #AE7F60;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/coffee-shop-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1{ /*Resturant name */
object-position: right;
font-family: 'Lora', sans-serif;
color: #B35840;
font-size: 1.5cm;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>coffee cafe</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visble-md visible-lg ">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navar-brand">
<h1>Coffee Place</h1>
</div>
</div>
</nav>
</header>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You need to add .d-flex in div.navbar-header.
also add a little margin in you h1 to make it vertically align with the logo or you can also you vertical-align property.
I've also closed the unclosed container div.
body {
font-size: 16px;
color: #fff;
background-color: #F5EEE0;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #AE7F60;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://www.svgrepo.com/show/15418/coffee-cup.svg') no-repeat;
width: 50px;
height: 50px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1 {
/*Resturant name */
object-position: right;
font-family: 'Lora', sans-serif;
color: #B35840;
font-size: 1.5cm;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="d-flex navbar-header">
<a href="index.html" class="pull-left visble-md visible-lg">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navar-brand">
<h1 class="mt-3">Coffee Place</h1>
</div>
</div>
</div>
</nav>
</header>
Got 2 problems with my index.html page and I will be thankfull to every person who will help me get rid of it. So, first my responsive nav doesn't work even if the js link is correctly written.
And, my media queries does not have any effect, I want to hide the aside for ipad and mobile users. THANK YOU
let toggle = document.querySelector('.toggle');
let body = document.querySelector('body');
toggle.addEventListener('click', function() {
body.classList.toggle('body');
});
body {
background-color: #C6EFE9;
}
.banner {
width: 100%;
background-image: url(../img/banner.jpg);
background-repeat: no-repeat;
margin-top: 75px;
height: 350px;
background-position: center;
background-attachment: scroll;
}
aside{
max-width: 50%;
float: right;
height: auto;
margin-right: 50%;
text-align: center;
margin: 50px;
padding: 50px;
font: serif;
}
aside li {
list-style: none;
text-align: left;
}
.apercus {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
max-width: 50%;
height: 250px;
margin: 50px;
border: 2px solid rgba(81, 136, 151, 1);
cursor: pointer;
transform: translate3d(10%);
box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
border-radius: 10px;
}
img {
max-width: 50%;
height: 250px;
float: left;
padding-right: 20px;
border-radius: 10px;
}
.texte {
padding: 20px;
font-family: 'Sacramento', cursive;
}
.lien {
position: absolute;
height: 100%;
width: 100%;
z-index: 10;
}
.lien a {
display: block;
}
#media all and (max-width: 600){
aside {
display: none;
}
.apercus {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
max-width: 100px;
height: 200px;
margin: 50px;
border: 2px solid rgba(81, 136, 151, 1);
cursor: pointer;
transform: translate3d(10%);
box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
border-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Page d'accueil</title>
<!------------------------------COMPATIBILITIES------------------------------>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!---------------------------------FONTS-------------------------------------->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Sacramento&display=swap" rel="stylesheet">
<!---------------------------------------ICONS------------------------------->
<script src="https://kit.fontawesome.com/2942c11df3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<nav>
<i class="fas fa-pen-alt"></i> Lilaby
<div class="toggle">
<i class="fas fa-bars ouvert"></i>
<i class="fas fa-times ferme"></i>
</div>
<ul class="menu">
<li>Accueil</li>
<li>Blog</li>
<li>Quizs</li>
<li>Outils</li>
<li>Contacts</li>
<li><button class="btn">Connexion</button></li>
</ul>
</nav>
</header>
<div class="banner"></div>
<aside>
<h2>FAQ</h2>
<ul>
<li>Lilaby c'est quoi ? </li>
<br>
<li>Comment prendre RDV ?</li>
<br>
<li>Pourquoi nous ? </li>
<br>
<li>Actulités</li>
<br>
<li>Prochains événements</li>
</ul>
</aside>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/article.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/quiz.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/outils.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
</body>
<script type="text/javascript" href="js/header.js"></script>
</html>
Your forget px on #media all and (max-width: 600), #media all and (max-width: 600px`)
<script> tag place is wrong. Correct Place: <script src="js/header.js"></script> </body>
</html>
Add px on media query.
You are toggling "body" class in js but you don't have ".body" class in css you're using body tag.
I'm creating a website, and when adding a background image to my CSS there appears to be a random white vertical line on the left side of the screen. I've checked this in both Chrome and Safari browsers. Would anyone be able to help fix this and also explain how it originated?
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The white line is because of the blockquote element, you can disable the white border by adding
blockquote {
border-left: none;
}
If I understand, it's the default border on blockquote from bootstrap. Just set border-left: none on an element you want to disable that. In this case, blockquote.construction
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You are getting the unwanted border from Blockquote tag.
In your Css for of Blockquote class replace with below:
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
Note : Also I observed the white border is present in the slogan blockquote as well. The reason it is not visible as the background color there is white. But if you will inspect the element, you will see it there.
I will recommend to add a common class to all blockquote with
border-left: none;
I am trying to implement the date time picker as explained here https://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup, I have downloaded the js file css file to the directory js and css. But the calendar is not popup up when click on icon.
$(function() {
$('#datetimepicker1').datetimepicker();
});
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker-standalone.css">
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
All scripts should be imported in order:
jQuery and Moment.js
Bootstrap js file
Bootstrap datepicker js file
Bootstrap-datetimepicker requires moment.js to be loaded before datepicker.js.
Working snippet:
$(function() {
$('#datetimepicker1').datetimepicker();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
In order to run the bootstrap date time picker you need to include moment.js as well. This is a dependency of bootstrap-datetimepicker.js so ensure to import moment.js before bootstrap-datetimepicker.js.
You should import the dependent libraries first before the actual libraries. Hece the order will be.
jquery.js
bootstrap.js (Bootstrap requires jQuery)
moment.js
bootstrap-datetimepicker.js (Bootstrap Datetimepicker requires Moment JS)
Here is the working code sample in your case.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css"> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker-standalone.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>
Try This:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>
You don't need to give local path. just give cdn link of bootstrap datetimepicker. and it works.
<html lang="en">
<head>
<meta charset="utf-8">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datepicker();
});
</script>
</div>
</div>
</body>
</html>
Well, here the positioning of the css and script links makes a to of difference. Bootstrap executes in CSS and then Scripts fashion. So if you have even one script written at incorrect place it makes a lot of difference. You can follow the below snippet and change your code accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css"> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker-standalone.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>
You can simply use
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
Hope it will help you.
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
$('.datetimepicker').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
}
});
$('.datepicker').datetimepicker({
format: 'MM/DD/YYYY',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
}
});
$('.timepicker').datetimepicker({
// format: 'H:mm', // use this format if you want the 24hours timepicker
format: 'h:mm A', //use this format if you want the 12hours timpiecker with AM/PM toggle
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
}
});
});
html *{
-webkit-font-smoothing: antialiased;
}
.title h3{
font-size: 25px !important;
margin-top: 20px;
margin-bottom: 10px;
line-height: 1.4em !important;
font-weight: 300;
}
/* inputs */
.container .bmd-form-group .bmd-label-static {
top: .35rem;
left: 0;
font-size: .875rem;
}
.container .bmd-form-group .form-control, .bmd-form-group input::placeholder, .bmd-form-group label {
line-height: 1.1;
}
.container .form-control, .is-focused .form-control {
background-image: linear-gradient(0deg,#9c27b0 2px,
rgba(156,39,176,0) 0),linear-gradient(0deg,#d2d2d2 1px,hsla(0,0%,82%,0) 0) !important;
}
.is-focused [class*=" bmd-label"], .is-focused [class^=bmd-label] {
color: #9c27b0 !important;
}
.form-control {
background: no-repeat bottom,50% calc(100% - 1px);
background-size: 0 100%,100% 100%;
border: 0;
height: 36px;
transition: background 0s ease-out;
padding-left: 0;
padding-right: 0;
border-radius: 0;
font-size: 14px !important;
}
/* dropdown */
.dropdown-menu.bootstrap-datetimepicker-widget.open {
opacity: 1;
transform: scale(1);
top: 0;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
padding: 4px;
width: 19em;
}
.bootstrap-datetimepicker-widget .list-unstyled {
margin: 0;
}
.sr-only,
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after,
.bootstrap-datetimepicker-widget .picker-switch::after,
.bootstrap-datetimepicker-widget table th.prev::after,
.bootstrap-datetimepicker-widget table th.next::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.bootstrap-datetimepicker-widget {
list-style: none;
}
.bootstrap-datetimepicker-widget a:hover {
box-shadow: none !important;
}
.bootstrap-datetimepicker-widget a .btn:hover {
background-color: transparent;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
padding: 4px;
width: 19em;
}
#media (min-width: 768px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
#media (min-width: 991px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
#media (min-width: 1200px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
right: auto;
left: 12px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top {
margin-top: auto;
margin-bottom: 27px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top.open {
margin-top: auto;
margin-bottom: 27px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
left: auto;
right: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
left: auto;
right: 7px;
}
.bootstrap-datetimepicker-widget .list-unstyled {
margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
padding: 0;
margin: 0;
border-width: 0;
background-color: transparent;
color: #9c27b0;
box-shadow: none;
}
.bootstrap-datetimepicker-widget a[data-action]:hover {
background-color: transparent;
}
.bootstrap-datetimepicker-widget a[data-action]:hover span {
background-color: #eee;
color: #9c27b0;
}
.bootstrap-datetimepicker-widget a[data-action]:active {
box-shadow: none;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
width: 40px;
height: 40px;
line-height: 40px;
font-weight: 300;
font-size: 1.125rem;
margin: 0;
border-radius: 50%;
}
.bootstrap-datetimepicker-widget button[data-action] {
width: 38px;
height: 38px;
margin-right: 3px;
padding: 0;
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
content: "Increment Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
content: "Increment Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
content: "Decrement Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
content: "Decrement Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
content: "Show Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
content: "Show Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
content: "Toggle AM/PM";
}
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
content: "Clear the picker";
}
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
content: "Set the date to today";
}
.bootstrap-datetimepicker-widget .picker-switch {
text-align: center;
border-radius: 3px;
font-size: 0.875rem;
}
.bootstrap-datetimepicker-widget .picker-switch::after {
content: "Toggle Date and Time Screens";
}
.bootstrap-datetimepicker-widget .picker-switch td {
padding: 0;
margin: 0;
height: auto;
width: auto;
line-height: inherit;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
line-height: 2.5;
height: 2.5em;
width: 100%;
border-radius: 3px;
margin: 2px 0px !important;
}
.bootstrap-datetimepicker-widget table {
width: 100%;
margin: 0;
}
.bootstrap-datetimepicker-widget table.table-condensed tr>td {
text-align: center;
}
.bootstrap-datetimepicker-widget table td>div,
.bootstrap-datetimepicker-widget table th>div {
text-align: center;
}
.bootstrap-datetimepicker-widget table th {
height: 20px;
line-height: 20px;
width: 20px;
font-weight: 500;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
width: 145px;
}
.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
background: none;
color: rgba(0, 0, 0, 0.12);
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table th.prev span,
.bootstrap-datetimepicker-widget table th.next span {
border-radius: 3px;
height: 27px;
width: 27px;
line-height: 28px;
font-size: 12px;
border-radius: 50%;
text-align: center;
}
.bootstrap-datetimepicker-widget table th.prev::after {
content: "Previous Month";
}
.bootstrap-datetimepicker-widget table th.next::after {
content: "Next Month";
}
.bootstrap-datetimepicker-widget table th.dow {
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-size: 12px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.87);
font-weight: 400;
padding-bottom: 5px;
padding-top: 10px;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th {
cursor: pointer;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover span,
.bootstrap-datetimepicker-widget table thead tr:first-child th.picker-switch:hover {
background: #eee;
}
.bootstrap-datetimepicker-widget table td>div {
border-radius: 3px;
height: 54px;
line-height: 54px;
width: 54px;
text-align: center;
}
.bootstrap-datetimepicker-widget table td.cw>div {
font-size: .8em;
height: 20px;
line-height: 20px;
color: #999;
}
.bootstrap-datetimepicker-widget table td.day>div {
height: 30px;
line-height: 30px;
width: 30px;
text-align: center;
padding: 0px;
border-radius: 50%;
position: relative;
z-index: -1;
color: #3C4858;
font-size: 0.875rem;
}
.bootstrap-datetimepicker-widget table td.minute>div,
.bootstrap-datetimepicker-widget table td.hour>div {
border-radius: 50%;
}
.bootstrap-datetimepicker-widget table td.day:hover>div,
.bootstrap-datetimepicker-widget table td.hour:hover>div,
.bootstrap-datetimepicker-widget table td.minute:hover>div,
.bootstrap-datetimepicker-widget table td.second:hover>div {
background: #eee;
cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.old>div,
.bootstrap-datetimepicker-widget table td.new>div {
color: #999;
}
.bootstrap-datetimepicker-widget table td.today>div {
position: relative;
}
.bootstrap-datetimepicker-widget table td.today>div:before {
content: '';
display: inline-block;
border: 0 0 7px 7px solid transparent;
border-bottom-color: #9c27b0;
border-top-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 4px;
right: 4px;
}
.bootstrap-datetimepicker-widget table td.active>div,
.bootstrap-datetimepicker-widget table td.active:hover>div {
background-color: #9c27b0;
color: #fff;
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}
.bootstrap-datetimepicker-widget table td.active.today:before>div {
border-bottom-color: #fff;
}
.bootstrap-datetimepicker-widget table td.disabled>div,
.bootstrap-datetimepicker-widget table td.disabled:hover>div {
background: none;
color: rgba(0, 0, 0, 0.12);
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table td span {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
margin: 3px 3px;
cursor: pointer;
border-radius: 50%;
text-align: center;
}
.bootstrap-datetimepicker-widget table td span:hover {
background: #eee;
}
.bootstrap-datetimepicker-widget table td span.active {
background-color: #9c27b0;
color: #fff;
}
.bootstrap-datetimepicker-widget table td span.old {
color: #999;
}
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
background: none;
color: rgba(0, 0, 0, 0.12);
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget .timepicker-picker span,
.bootstrap-datetimepicker-widget .timepicker-hours span,
.bootstrap-datetimepicker-widget .timepicker-minutes span {
border-radius: 50% !important;
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
height: 27px;
line-height: 27px;
}
.btn.btn-primary {
color: #fff !important;
background-color: #9c27b0 !important;
border-color: #9c27b0;
box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
}
.btn.btn-primary:hover {
box-shadow: 0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2);
}
/* footer */
footer{
margin-top:150px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
}
.footer p{
margin-bottom: 0;
font-size: 14px;
margin: 0 0 10px;
font-weight: 300;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #9f26aa;
text-decoration: none;
}
.form-control:focus{
box-shadow: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<link rel="stylesgeet" href="https://rawgit.com/creativetimofficial/material-kit/master/assets/css/material-kit.css">
</head>
<body>
<div class="container mt-5">
<div class="title">
<h3>Datetime Picker</h3>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="label-control">Datetime Picker</label>
<input type="text" class="form-control datetimepicker" value="10/05/2016">
</div>
<div class="form-group">
<label class="label-control">Date Picker</label>
<input type="text" class="form-control datepicker" value="10/10/2016">
</div>
<div class="form-group">
<label class="label-control">Time Picker</label>
<input type="text" class="form-control timepicker" value="14:00">
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with Material Kit by Creative Tim</p>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js#1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/core/jquery.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/core/bootstrap-material-design.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/plugins/moment.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/plugins/bootstrap-datetimepicker.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/material-kit.js"></script>
</body>
try this