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.
Related
This question already has answers here:
How to align nav items to the right in Bootstrap 5?
(7 answers)
Closed 2 years ago.
I am facing an issue with the bootstrap 5 navbar. I am trying to create a responsive navbar with bootstrap 5. I want the navbar logo will be on the left side and the nav-links on the right side. But when I used the 'navbar-expand-lg' class it both aligns the logo and nav-links on the left side.
I used the ml-auto class in the ul tag. But it didn't work. Can anyone please help me?
Note: I think mr-auto and ml-auto classes are not working perfectly in bootstrap 5.
.custom {
background-color: #333333;
}
.logo {
width: 100px;
}
li a {
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link rel="icon" href="desk-lamp.png" />
<script
src="https://kit.fontawesome.com/f726a9ed7b.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- todo head -->
<header class="custom site-header container-fluid">
<div class="container">
<nav class="navbar navbar-dark navbar-expand-lg">
<a href="#" class="navbar-brand">
<img src="logo.png" class="logo" alt="" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#nav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="nav">
<ul class="navbar-nav ml-auto">
<li class="navigation">
<a target="blank" href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="reference.html"
>Reference</a
>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="contact.html"
>Contact</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- todo hero -->
<section></section>
<!-- bost your income -->
<section></section>
<!-- who benifits -->
<section></section>
<!-- course features -->
<section></section>
<!-- course features -->
<section></section>
<!-- video section -->
<section></section>
<!-- instructer section -->
<section></section>
<!-- testimonial setion -->
<section></section>
<!-- sign up section -->
<section></section>
<!-- footer -->
<footer></footer>
<!-- model -->
<div></div>
<!-- boostrap core javascript -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>
Yes, you are right. Negative margins are disabled by default but can be enabled in Sass by setting $enable-negative-margins: true. Read their Documentation: https://getbootstrap.com/docs/5.0/utilities/spacing/#negative-margin
Or you can write in your custom CSS. Check my code -
.custom {
background-color: #333333;
}
.logo {
width: 100px;
}
li a {
color: white;
font-weight: bold;
}
.navbar-nav{
margin-left: auto !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="icon" href="desk-lamp.png" />
<script
src="https://kit.fontawesome.com/f726a9ed7b.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- todo head -->
<header class="custom site-header container-fluid">
<div class="container">
<nav class="navbar navbar-dark navbar-expand-lg">
<a href="#" class="navbar-brand">
<img src="logo.png" class="logo" alt="" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#nav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="nav">
<ul class="navbar-nav">
<li class="navigation">
<a target="blank" href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="reference.html"
>Reference</a
>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="contact.html"
>Contact</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- todo hero -->
<section></section>
<!-- bost your income -->
<section></section>
<!-- who benifits -->
<section></section>
<!-- course features -->
<section></section>
<!-- course features -->
<section></section>
<!-- video section -->
<section></section>
<!-- instructer section -->
<section></section>
<!-- testimonial setion -->
<section></section>
<!-- sign up section -->
<section></section>
<!-- footer -->
<footer></footer>
<!-- model -->
<div></div>
<!-- boostrap core javascript -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>
I want to change the default background color of bootstrap dropdownlist and also the back color of its expanding menu. I had already tried it using my custom CSS, but it remains the same. below is my code
Html code
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#"><img src="images/vertex_logo.png" style="width:80px;height:80px">
</a>
</nav>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
</body>
</html>
main.css
.btn-primary{
background-color: #68889E;
}
.dropdown-menu{
background-color: #6ab446;
border: 1px solid #D9534F;
}
You need to include your CSS after the Bootstrap CSS. So you need to swap those two lines to read:
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css"><!-- AFTER Bootstrap! -->
This allows your code to override the Boostrap CSS, which is included first.
Also, what's with the lone i attribute in your <link> tag? It looks like a typo; I suggest you remove it.
You can also change any of the dropdown states:
.dropdown-toggle {
background-color: red;
}
.dropdown-toggle:hover {
background-color: green;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
background-color: yellow;
}
I'm a beginner web developper, and I'm working on a homepage. Yet I'm stuck: for some reasons, my divs just won't stack on top of each other like they should (at least I think so), the blue one keep appearing in the center of the page, no matter what I do. I tried a whole lot of things, and nothing solved it.
Help!
Best Regards,
-Solar Palms
PS: There's my code ...
body{
background:url(trees.jpg);
background-size:cover;
background-postion: center;
}
h1{
color: white;
}
main{
text-align: center;
padding-top: 15%;
}
.lol{
width: 100%;
height: 100%;
clear: left;
}
<!DOCTYPE html>
<html>
<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>Home</title>
<!-- Latest compiled and minified 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" type='text/css' href="Home.css">
<!-- The JQuery Link -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!-- HUGE NAVBAR -->
<div class='lol'>
<header id="header" style="position:sticky; top:0;">
<div class='container'>
</style>
<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>
<a class="navbar-brand" href="#">GREEN Seed</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-left:15%;">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Home</li>
<li>Our Projects</li>
<li>Rules</li>
<li>About Us</li>
</ul>
<form class="navbar-form navbar-left" style="margin-left:20%">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</div>
<main>
<h1>Are you ready to help to save Our planet!</h1>
<button class="btn btn-default btn-lg">Take actions!</button>
</main>
</div>
<div class='lol' style='background-color: blue; height:100px;'>
</div>
</body>
</html>
I can't seem to get scrollspy to work. I have a nav item inside a div item that is hidden at times. This nav item needs to have scrollspy working. I'm not sure if the problem is with the active class or something else. When clicking a link it doesn't change to active. Scrolling to the section doesn't work either.
main-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- can be dropped but must appear because of bootstrap warning -->
<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>My title</title>
<link rel="stylesheet" href="styles.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- JavaScript code for this page -->
<script src="main_page.js"></script>
</head>
<body>
<!-- A navbar that is always on top -->
<nav class="navbar navbar-expand-sm fixed-top">...</nav>
<div class="container-fluid">
<!-- Content that shows up when navigating to the site or when the logo is clicked -->
<div id="landing-page">...</div>
<!-- Shows all the Features of this product -->
<div id="features-page" hidden=true data-spy="scroll" data-target="features-navbar" data-offset="1">
<div class="jumbotron features-jumbotron text-center">
something
</div>
<!-- Navbar in question -->
<nav class="navbar navbar-expand-sm justify-content-center sticky-top" id="features-navbar">
<div class="gray-border">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link nav-button active" href="#lease-feature">Lease</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#finance-feature">Finances</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#organized-feature">Organized</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#community-feature">Community</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="feature-item" id="lease-feature">
lease-feature
<br/>
<br/>
<br/>
<br/>
<br/>
lease-feature end
</div>
<div class="feature-item" id="finance-feature">
Finance
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Finance end
</div>
<div class="feature-item" id="organized-feature">
organized
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
organized end
</div>
<div class="feature-item" id="community-feature">
community-feature
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
community-feature end
</div>
end
</div>
</div>
</body>
</html>
styles.css
body {
padding-top: 110px;
}
nav{
background-color: white;
}
.nav-button{
color: black;
}
.active{
border-left: 2px solid black;
}
.gray-border{
border-top: .1px solid #d9d9d9;
border-bottom: .1px solid #d9d9d9;
}
.feature-item{
padding-top: 220px;
}
...
The problem was that I was missing a #, styling for the div data-spy and the active class belongs to the li tag.
<div id="features-page" hidden=true data-spy="scroll" data-target="#features-navbar" data-offset="1" style="overflow-y: scroll; height: 100vh; position:relative;">
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