Questions about using Carousel in Twitter Bootstrrap
I’m new beginner to Twitter Bootstrap. Now I want to create a carousel in my page. But I ran into some problems.
Firstly, I find no where in css file to make my carousel to be placed at center.
Secondly, I don’t know how to make the width caption to be same as my images in carousel.
Here’s my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="rootfolder/bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="rootfolder/bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="rootfolder/bootstrap/docs/assets/css/docs.css" rel="stylesheet">
<link href="rootfolder/bootstrap/docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="rootfolder/bootstrap/docs/assets/css/bootstrap-carousel.css" rel="stylesheet">
<link href="rootfolder/css/temp.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script type="text/javascript">
$(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<!--Lightbox-->
<script type="text/javascript">
$(function () {
$('.carousel').carousel('cycle')
});
</script>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://about.me/nienyiho">Nien-Yi Ho</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>About Me</li>
</ul>
</li>
<li class="">
Photography
</li>
<li class="">
Articles
</li>
<li class="">
For Sale
</li>
<li class="">
Blog
</li>
<li class="">
Contact
</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li class="divider"></li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
<p>Nien-Yi Ho Photography</p>
</div>
</header>
<!--測試Light Box-->
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner_test">
<div class="active item">
<img src="rootfolder/images/photography/all_time_collections/1.jpg" alt="" width="600" hight="900">
<div class="carousel-caption">
<h4>何去何從</h4>
<p>台北 2008</p>
</div>
</div>
<div class="item">
<img src="rootfolder/images/photography/all_time_collections/2.jpg" alt="" width="600" hight="900">
<div class="carousel-caption">
<h4>撼動</h4>
<p>2008 台大合唱團冬季公演</p>
</div>
</div>
<div class="item">
<img src="rootfolder/images/photography/all_time_collections/3.jpg" alt="" width="600" hight="900">
<div class="carousel-caption">
<h4>Height of the sky.</h4>
<p>Paris 2002</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">› </a>
</div>
<!-- Footer
================================================== -->
<footer class="footer">
<p>Powered by Twitter Bootstrap </p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"> </script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-alert.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-dropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-scrollspy.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-tab.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-popover.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-button.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/application.js"></script>
</body>
</html>
To make the carousel sit in the middle you could:
Change your CSS class:
carousel-inner_test to just carousel-inner
then add to #myCarousel element:
width: 600px;
margin: 0px auto;
that should fix your caption issues too!
HTH
Related
I am working on a navbar and I need to align some part of it to the right:
This is what i have :
Also the collapse-navbar is not working , when I reduce the screen the collapse button appears but nothing happens when I click...
This is my codebase : Codebase
Here is a working example with Bootstrap, hope it is to any help:
.test {
color: white;
margin-left: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="app" class="container-fluid">
<nav class="navbar navbar-expand-md navbar-light bg-dark">
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<h1 class="test" href="#">Funds.</h1>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="test" href="#">Use funds for business </a>
</li>
<li class="nav-item">
<a class="test" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="test" href="#">Legal stuff</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I am trying to set a fixed navbar that has a scrolling effect. Logo, links are on the left hand side and the sign up and log in are aligned on the right hand sign with icon. when I try to run the code, its not looking like it suppose to. I've tried a few ideas and looked up every idea and template design and used plenty of references and I am still stuck.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title> Kappa Delta Rho - Psi Beta </title>
</head>
<body>
<!-- Fixed Navigation -->
<nav class="navbar fixed-top navbar-dark" style=" background-color: #00008B">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> KDR LOGO </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> Welcome </li>
<li> About </li>
<li> History </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<!-- End of Fixed Navigation -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Try remove fixed-top.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title> Kappa Delta Rho - Psi Beta </title>
</head>
<body>
<!-- Fixed Navigation -->
<nav class="navbar navbar-dark" style=" background-color: #00008B">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> KDR LOGO </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> Welcome </li>
<li> About </li>
<li> History </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<!-- End of Fixed Navigation -->
<br><br><br><br><br><br><br><br><br><br><br>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
I'm unable to get a custom CSS sheet to work in the navigation bar. I've an angular application, where I'm adding a CSS file to override the anchor tag colors inside the navbar. Since the freelancer css files I'm using have made the anchor tag white in color, and there's a place in the Nav bar HTML, where I want to use anchor tag in a readable color, I've written custom CSS file.
<!DOCTYPE html>
<html ng-app="jargoViewer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Jargo Foods Pvt Ltd.</title>
<link href="vendor/font-awesome/css/style.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- Jargo CSS Styles -->
<link href="css/jargo.css" rel="stylesheet" type="text/css">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-cookies.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jquery.easing/js/jquery.easing.min.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<script src="js/freelancer.min.js"></script>
<script src="app.js"></script>
<script src="RestService.js"></script>
<script src="UserCart.js"></script>
<script src="ProdSearchService.js"></script>
<script src="ProductsSearchController.js"></script>
<script src="MainController.js"></script>
<script src="ProductController.js"></script>
<script src="NavController.js"></script>
<script src="CheckoutController.js"></script>
<script src="PaymentController.js"></script>
<script src="LoginModal.js"></script>
<script src="LoginModalCtrl.js"></script>
<script src="LoginService.js"></script>
<script src="CheckoutPaymentService.js"></script>
<script src="OrdersController.js"></script>
<script src="SessionInterceptor.js"></script>
<!-- Payment Gateway Lib -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body id="page-top" class="index">
<div id="skipnav">Skip to main content</div>
<!-- Add the Navigation Bar on top -->
<div ng-include="'nav.html'"></div>
<!-- This is where the Actual Content would go -->
<div ng-view autoscroll="true"></div>
<!-- Add the footer at bottom -->
<div ng-include="'footer.html'"></div>
</body>
</html>
My CSS file is as follows (jargo.css). Notice the use of a new class called cart-table-link:
.cart-table-link a{
color: #FF8B03 !important;
}
.cart-table-link li a{
color: #FF8B03;
}
.cart-table-link li a:hover{
color: #18BC9C;
}
.cart-table-link li a:focus,
.cart-table-link li a:active{
color: #FF8B03;
}
.cart-table-link li.active a{
color: #FF8B03;
background: #18BC9C;
}
.cart-table-link li.active a:hover,
.cart-table-link li.active a:focus,
.cart-table-link li.active a:active{
color: #FF8B03;
background: #18BC9C;
}
My portion of nav.html, which contains a DropDown "Cart" Nav Element, which when clicked opens a Table with row entries for each product in the Cart, and finally, at the end, a "View Cart" and a "Checkout" anchor element. Each row entry in the Cart table contains an anchor tag with name of the Product Item, which if clicked should take user to the Product details page. Below is nav.html:
<!-- Navigation -->
<!--<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom"> -->
<nav id="mainNav" class="navbar navbar-default navbar-static-top navbar-custom">
<div class="container-fluid" ng-controller = "NavController">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Jargo Foods</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">
<li class="hidden">
</li>
<li class="page-scroll">
Products
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<!-- Search Starts -->
<li>
<!--
<div class="col-sm-3 col-md-3 pull-right">
-->
<div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" ng-model = "searchtext" class="form-control" placeholder="Search" name="srch-term" id="srch-term"/>
<div class="input-group-btn">
<button ng-click = "search()" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</li>
<!-- Cart Starts -->
<!--<div class="navbar-brand navbar-right">-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Cart
<span id="cart-total" ng-show ="userCart.cart_size">{{userCart.cart_size}} item(s)</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!--
<div >{{userCart.cart_products}}</div>
<div class="row" ng-repeat="obj in userCart.cart_prod_ids">{{obj}}</div>
<div class="row" ng-repeat="(id, obj) in userCart.cart_products">{{id}} {{obj}}</div>
-->
<li>
<!--
<table class="table table-striped hcart">
-->
<table>
<tbody>
<tr ng-repeat="(id, itemObj) in userCart.cart_products">
<td class="text-center">
<a ng-href="#/product/{{itemObj.ID}}">
<img src="img/others/cart.png" alt="image" title="image" class="img-thumbnail img-responsive"/>
</a>
</td>
<td class="text-left" class="col-md-2">
<a class="cart-table-link" ng-href="#/product/{{itemObj.ID}}">{{itemObj.ItemName}}</a>
</td>
<td class="text-right">x {{itemObj.Quantity}}</td>
<td class="text-right">₹ {{itemObj.Quantity * itemObj.CostPerUnit}}</td>
<td class="text-center">
<i class="fa fa-times" ng-click = "remInCart(itemObj.ID, 1)" ></i>
</td>
</tr >
</tbody>
</table>
</li>
<li>
<table class="table table-bordered total">
<tbody>
<tr>
<td class="text-right"><strong>Sub-Total</strong></td>
<td class="text-left">₹ {{userCart.cart_val}}</td>
</tr>
<tr>
<td class="text-right"><strong>VAT (5.5%)</strong></td>
<td class="text-left">₹ {{userCart.cart_val * 0.055 | number:2}}</td>
</tr>
<tr>
<td class="text-right"><strong>Total</strong></td>
<td class="text-left">₹ {{userCart.cart_val * 1.055 | number:2}}</td>
</tr>
</tbody>
</table>
</li>
<li>
<p class="text-right btn-block1">
View Cart
<a class = "button cart-table-link" href="#/checkout">Checkout</a>
</p>
</li>
</ul>
</div>
</ul>
</li>
</div> <!-- /.navbar-collapse -->
</nav> <!-- /.container-fluid -->
Just search for the reference to the cart-table-link in the nav.html file.
Despite the above changes, the cart-table-link CSS is most likely not even recognized. Notice the image (chrome inspection)
Any clue where I'm going wrong?
Your CSS is not correct.
The class cart-table-link is the a element.
a.cart-table-link {
color: #FF8B03;
}
I removed also the !important because having a.cart-table-link will have more hierarchy than the other styles that I saw.
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta charset="utf-8"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stadtfestlauf - Start</title>
<link rel="icon" type="image/png" href="favicon.png" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<!--script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="avcontent">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active">Startseite</li>
<li>Rückblick</li>
<li>Wettbewerb
<li>Anmelden
<li>Sponsoren
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>
<div class="container" id="pcontent">
<div class="col-md-7">
<div class="jumbotron">
<h1>Hallo</h1>
<p>sample text</p>
<div class="wrapper">
<p><a class="btn btn-primary btn-lg" role="button" id="sendButton" href="http://google.com/">Ich bin hier vollkommen Falsch</a></p>
</div>
</div>
</div>
<div class="col-md-5" id="imgslide">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="Assets/img1.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img2.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img3.jpg" alt="Stadtfestlauf" id="img">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's a my index.html. When I try it out on my mobile, the navigation bar doesn't work. I searched for missing div's tags.
You need to change the data-targetof your button to the ID of your navbar-collapseelement.
Furthermore your html is missing some closing <li>'s.
Change your nav code to this:
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active">Startseite</li>
<li>Rückblick</li>
<li>Wettbewerb</li>
<li>Anmelden</li>
<li>Sponsoren</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
It's also necessary to import jQuery before importing bootstrap, out of order it won't work. It should look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
For my the solution was to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure that you put jQuery script before Bootscript link in your header part i.e. (in the following order)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
2023 Solution from Bootstrap API docs
Assuming no syntax errors inside your nav tag...
Put this code in the head of your HTML file. It "plugs in" jQuery & Popper, which Bootstrap depends on in order to make the "mobile" navbar work.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Reference
i'm updating my site to bootstrap 3 and i have a problem i have added my navbar and header but when i try to add a jumbotron it appears under the bs-header dono why it does that i check every thing if my div are closed and they are sow if some one can tel me what i'm doing wrong ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="HyperGainZ">
<title> My Mod Pack · MMP </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap-simplex.css" rel="stylesheet">
<link href="assets/css/bootstrap-simplex.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="assets/css/docs-index.css" rel="stylesheet">
<link href="assets/css/pygments-manni.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
MMP
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a tabindex="-1" href="#">1</a></li>
<li><a tabindex="-1" href="#">2</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">3</a></li>
<li><a tabindex="-1" href="#">4</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li class="divider"></li>
<li>Sign In</li>
</ul>
</div>
</div>
<div class="bs-header" id="content">
<div class="container">
<br />
<img src="assets/img/index.jpeg" class="img-circle" width="125px" height="125px"alt="Sevadus" align="left">
<h1>MMP</h1>
<p class="lead">My Mod Pack</p></img>
<div id="carbonads-container">
<div class="carbonad">
<div id="azcarbon">
<h4>Site Version : <span class="badge badge-success">Alpha</span></h4>
<h4>Head Of Project : <span class="badge badge-info">HyperGainZ</span></h4>
<h4>acepting Beta's : <span class="badge badge-success">Yes</span></h4>
<h4>Public Launcher : <span class="badge badge-primary">Not Yet</span></h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 jumbotron">
<h1>Pack Assembler</h1>
<p>Managing Mods, Packs, and Servers easily and efficiently.</p>
<p>
Get Started <i class="icon-double-angle-right"></i>
</p>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
Because you're containing .bs-header within .navbar-fixed-top you'll need to use top padding equal to the static height of your navbar, on the body.
From the bootstrap documentation:
The fixed navbar will overlay your other content, unless you add
padding to the top of the . Tip: By default, the navbar is 50px
high.