Bootstrap navbar toggle button not collapsing - javascript

Important: I checked similar questions on Stack Overflow, but none seems to fix my problem:
1. I did include Bootstrap JS file.
2. It does not seem like I included JS files twice.
3. I deleted the navbar-default class because I needed to restyle it otherwise (as seen in the tutorial, see below).
I am trying to implement a responsive menu with Bootstrap navbar toggle button, as explained in TutsPlus Power Up Your Portfolio With Bootstrap.
When I shrink the window, the text menu items turn into the hamburger menu button.
However, when I click the hamburger menu button, nothing happens.
Here is the HTML code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Red Beluga</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/js/bootstrap.min.js">
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
And here is the CSS code:
#import 'main.css';
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
#import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
html{
background: #222 url(../img/abstract-bg.svg) bottom right no-repeat;
height: 100%;
background-position: fixed;
overflow-y: scroll;
}
body{
background: none;
line-height: 1.5;
color: #F5F5F5;
font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Abril Fatface', cursive;
margin-top: 0;
}
p {
margin-bottom: 1rem;
}
.navbar-brand, .navbar-nav>li>a{
color: #F5F5F5;
font-weight: bold;
}
.navbar-brand:hover, .navbar-nav>li>a:hover{
color: #F5F5F5;
font-weight: bold;
background: none;
}
.navbar-nav>li>a:after{
content: '/';
margin-left: 30px;
}
.navbar-nav>li:last-child>a:after{
content: '';
}
.navbar-toggle{
background: #111;
}
.navbar-toggle .icon-bar{
background: #F5F5F5;
}
#media (max-width: 768px) {
.navbar-nav>li>a:after{
content: '';
}
.navbar-nav>li>a{
background: #111;
border-radius: 4px;
margin-bottom: 3px;
}
}
Any idea why it is not working.


You should be using the <script> tag to reference JS files
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js">
Not <link>. These are for stylesheets.
<link rel="stylesheet" href="bower_components/bootstrap/dist/js/bootstrap.min.js">

Related

My Bootstrap Carousel doesn't work, buttons don't show up

I've tried every solution I could find in these forums, and some I found in YouTube, nothing works. Bear in mind I'm a newbie and this is my first Bootstrap project, and my first time posting here. I basically copied all the code from the sample project, so I don't know what I'm doing wrong. I installed Bootstrap on my computer, downloaded and installed the fonts, everything I could think of. I'm losing my mind here. Basically I have three problems: my carousel doesn't work at all, the arrows don't show up, and the page takes forever to load. Here's my code. Thanks in advance for your help.
/* NAVBAR
-------------------------------------------------- */
.navbar {
margin-bottom: 0;
}
/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
height: 240px;
margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 240px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 240px;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
/* MARKETING
-------------------------------------------------- */
.marketing {
margin: 60px auto;
}
.marketing .col-md-4 {
text-align: center;
font-size: 16px;
}
.marketing .col-md-4 .glyphicon {
font-size: 60px;
background-color: #EAEAEA;
border-radius: 50%;
padding: 40px;
color: #444;
}
/* STICKY FOOTER
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 160px;
}
.footer,
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background: #444;
color: white;
text-shadow: 1px 1px 1px black;
padding: 40px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<title>HTML Portfolio</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My name</a>
</div>
<div class="collapse navbar-collapse" id="portfolio-collapse-menu">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</div>
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

line 8 is unnecessary you already have bootstrap 3.3.7
you should only have one carousel-inner class
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
<p>I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>

here is the corrected file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My name</a>
</div>
<div class="collapse navbar-collapse" id="portfolio-collapse-menu">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
<p>I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</div>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

You were pretty close. ;) You defined to many unnecessary div's like two body div's and to many div's with the class carousel-inner. Also you had two enclosing head tags in your version. Your controls don't need to be inside your carousel-inner. Also the CSS-classes for the right arrow were wrong. Just compare them to the ones from the left arrow.
/* NAVBAR
-------------------------------------------------- */
.navbar {
margin-bottom: 0;
}
/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
height: 240px;
margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 240px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 240px;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
/* MARKETING
-------------------------------------------------- */
.marketing {
margin: 60px auto;
}
.marketing .col-md-4 {
text-align: center;
font-size: 16px;
}
.marketing .col-md-4 .glyphicon {
font-size: 60px;
background-color: #EAEAEA;
border-radius: 50%;
padding: 40px;
color: #444;
}
/* STICKY FOOTER
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 160px;
}
.footer,
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background: #444;
color: white;
text-shadow: 1px 1px 1px black;
padding: 40px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

I want to make a div responsive and keep its aspect ratio. Always stay in the middle and keep hes ratio and distance from the header an footer

I am trying to make that div from the middle responsive and I really don't know how. I've tried some things but they haven't worked. I want it to be in the middle with the same white space both up and down. I want when I resize the browser it's size to resize to but keep it's ratio. Is it possible?
$(document).ready(function() {
$("[data-toggle = 'popover']").popover({
html: 'true',
content : '<button class="btn footer-buttons footerbuttonshov">About</button> ' +
'<button class="btn footer-buttons footerbuttonshov">Feedback</button>'
});
});
#navbar-main {
background: #017f55;
border:1px solid #000;
border-radius: 0;
clear:both;
}
#title {
color:#000;
font-size: 43px;
top:7px;
}
#select {
color:#000;
height:30px;
}
.login-container {
position:relative;
background-color: #017f55;
height:618px;
width:464px;
margin:0 auto;
top:150px;
}
#nav-footer {
background: #017f55;
display:inline;
text-align: right;
border:1px solid #000;
}
.footer-buttons {
display:inline;
font-size: 20px;
padding-right: 20px;
background: none;
}
.icon-bar{
border: 1px solid #fff;
}
#footer-navbar {
border-color: #000;
}
#footer-button {
border:1px solid #333
}
#footer-button:hover {
background-color: #333;
}
#footer-button:active {
background-color: #333333;
}
.footerbuttonshov:hover{
background:#f98500;
}
<!DOCTYPE html>
<html>
<head>
<title>Code Test</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<!--Header-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<nav id="navbar-main" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/test_logo.png">
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav center">
<li>Code Test</li>
<li><a>
<select id="select">
<option value="English">English</option>
<option value="Devanagari">Devanagari</option>
</select>
</a></li>
</ul>
</div>
</div>
</nav>
<!--Main Container-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div class="login-container">
</div>
<!--Footer-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<nav id="nav-footer" class="navbar navbar-default navbar-fixed-bottom">
<div id="footer" class="container2">
<div class="navbar-header">
<button id="footer-button" type="button" class="navbar-toggle collapsed" data-toggle="popover" data-target="#footer-navbar" data-placement="top">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="footer-navbar" class="navbar-inner navbar-content-center collapse navbar-collapse">
<button class="btn footer-buttons">About</p>
<button class="btn footer-buttons">Feedback</p>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

Is this what you want to achieve?
.login-container {
position:relative;
background-color: #017f55;
height:618px;
max-width:464px;
margin:0 auto;
top:150px;
}
If it is true, then never use fixed-width as in width:464px; in your code. Just give max-width like I suggest., etc
It's better if you use media queries to handle it. Or, use bootstrap snippet to wrap .login-container
Check DEMO HERE
MORE:
If you need .login-container inside bootstrap wrapper, you can use:
<div class="col-md-12">
<div class="login-container">
</div>
</div>
Check di Update (using wrapper) in HERE

bootstrap custom css navbar

I've got this thing in common condition,
but the thing is I am a new guy and now I learn how to create HTML with bootstrap to "typing less"
This is the case I just get, I create my own navigation with UL Li tags and I want a responsive one with bootstrap, first thought it just simple to using bootstrap responsive by inputting the ID from bootstrap and toggle, but it's not.
Please somebody tell me where should I begin to learn bootstrap and modifying things and what is so wrong with my code, I think it's good to join bootstrap to my code
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.navigation {
text-align: center;
margin: 0;
margin-top: 15px;
}
.navigation-modified ul,
li,
ol {
margin: 0;
font: #000;
list-style: none;
display: inline-block;
}
.navigation-modified li {
border: 2px solid red;
min-width: 200px;
padding: 5px 30px;
}
.navigation-modified li:nth-child(n+2) {
margin-left: -2px;
}
.navigation-modified li:hover {
padding: 10px 40px;
margin-top: -15px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<title>Test2</title>
</head>
<body>
<header>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav id="navbarCollapse" class="navigation navbar-collapse">
<ul class="navigation-modified">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Registration</li>
</a>
<a href="#">
<li>Tutorial</li>
</a>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</nav>
</header>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</html>
Note: I don't put bootstrap CSS and JS, it's too long. Please run on your local using bootstrap.

Use this.........
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" />
<title>Test2</title>
<style>
body {
margin: 0;
padding: 0;
}
.navigation-modified
{
margin:0px;
padding:0px;
}
.navigation {
text-align: center;
margin: 0;
margin-top: 15px;
}
.navigation-modified ul,
li,
ol {
margin: 0;
font: #000;
list-style: none;
display: inline-block;
}
.navigation-modified li {
border: 2px solid red;
min-width: 200px;
padding: 5px 30px;
}
.navigation-modified li:nth-child(n+2) {
margin-left: -2px;
}
.navigation-modified li:hover {
padding: 10px 40px;
margin-top: -15px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navigation-modified">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Registration</li>
</a>
<a href="#">
<li>Tutorial</li>
</a>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</html>

Bootstrap carousel under navbar

So this site I'm working in has to have a background (Clients wants it, I hate it..) I have made the navbar transparent so the background image show behind it. Now id like to add in a carousel that is below the navbar and doesn't overlap in anyway. I still need the image background image behind the navbar this is what i have so far:
/*!
Main Page CSS || Created By Thomas Withers # Ice7Media
*/
/* Global Styles
============================================================ */
html {
background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
color: #000;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Oswald', 'Open Sans', sans-serif;
color: #000;
}
p {
font-family: 'Open Sans', sans-serif;
color: #000;
}
/* Global Navbar Formatting
==============================================================*/
.navbar {
padding-bottom: 10px;
}
.navbar ul {
margin-top: 20px;
}
.navbar.transparent.navbar-default {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
/* Global Footer Formatting
==============================================================*/
/* Home Page Formatting
==============================================================*/
/*Full Width Slider Formatting */
/* Carousel base class */
.carousel {
padding-top: 100px;
height: 100%;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color:#bbb;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
/* Menu's Page Formatting
==============================================================*/
/* E-Club Page Formatting
==============================================================*/
/* Events Page Formatting
==============================================================*/
/* Contact Page Formatting
==============================================================*/
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta charset
===================================================================================-->
<meta charset="utf-8">
<!-- Title
===================================================================================-->
<title>Bocaditio | South Amercian Dishes</title>
<!-- Meta Tags
===================================================================================-->
<meta name="author" content="Thomas Withers # Ice7Media">
<meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- CSS Stylesheets
===================================================================================-->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/Custom.css" rel = "stylesheet">
<link href = "css/Mapstyle.css" rel = "stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="shortcut icon" href="img/iceBox.png">
<!-- Custom Fonts
===================================================================================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation
===================================================================================-->
<div class = "navbar transparent navbar-default navbar-fixed-top">
<div class = "container">
<a href = "index" class = "navbar-brand">
<img src="img/BocaditoLogo.png">
</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Menus</li>
<li>E-Clubs</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- Full screen Slider
===================================================================================-->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/assets/example/bg_suburb.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</div>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/1">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Abouts Us & Logo
===================================================================================-->
<!-- Top Dishes
===================================================================================-->
<!-- footer
===================================================================================-->
<!-- Scripts
===================================================================================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/main.js"></script>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
As you can see my desired affect is not being achieved any help will be appreciated!

Just add a margin-top to your body equivalent to your navbar height like this:
body {
margin-top: 50px;
}
N.B. Replace 50px with height of your navbar.

Use the z index style on the division containing your nav bar and also on the division containing your carousel. This is how you'll put it:
This one goes to the div containing your navbar:
style="z-index:10;"
and this one goes to the div containing your carousel:
style="z-index:5;"

Jquery mobile script conflicting on bootstrap 3

Is there a way for me to use jquery mobile script without conflicting it on my bootstrap 3? My issue are my links is not working when I used Jquery mobile script but whenever I remove the script my links are working fine. I use Jquery mobile for my pop up feature. I'm a newbie on jquery and bootstrap web development, I apologize if my question seems too newbie.. Any help in my case is highly appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<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.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<style>
body {
padding: 20px 50px 150px;
font-size: 20px;
text-align: center;
}
.jumbotron {
margin-bottom: 40px !important;
height: 350px !important;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
#picbg
{
background: url('board.jpeg') no-repeat center center;
}
#container
{
margin: 0 auto;
width: 850px;
background: #fff;
}
</style>
<style>
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; }
*+html .centered-pills ul.nav-pills { display:inline; }
</style>
<body>
<div class="container">
<div class="jumbotron" id="picbg">
<h1><font face = "brush script mt" color="#fff">My Page</font><h1></div>
</div>
<div class="row">
<div class="span12 centered-pills">
<ul class="nav nav-pills" role="tablist">
<li class="active"><span class="glyphicon glyphicon-home"></span><h2><b>Home</b></h2></li>
<li><span class="glyphicon glyphicon-envelope"></span><h2><b>Contact Me</b></h2></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span><h2><b>Profile</b></h2> </a>
<ul class="dropdown-menu" role="menu">
<li><h2><b>Web</b></h2></li>
<li><h2><b>Author</b></h2></li>
<li>About</b></h2></a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="a" data-theme="d" data-corners="false">
<img class="popphoto" src="image1.png" style="width:600px;height:756px;" alt="">
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>

Categories