on the cart page, Quantity, delete button, update cart, Subtotal, Shipping, Total, is not working at all, how i can make them work? This is all i have for cart page:
Also here is the link where you can see it http://194.110.247.137/cart.html.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive Bootstrap4 Shop Template, Created by Imran Hossain from https://imransdesign.com/">
<!-- title -->
<title>Cart</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/all.min.css">
<!-- bootstrap -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<!-- owl carousel -->
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<!-- magnific popup -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- animate css -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- mean menu css -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- main style -->
<link rel="stylesheet" href="assets/css/main.css">
<!-- responsive -->
<link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body>
<!--PreLoader-->
<div class="loader">
<div class="loader-inner">
<div class="circle"></div>
</div>
</div>
<!--PreLoader Ends-->
<!-- header -->
<div class="top-header-area" id="sticker">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 text-center">
<div class="main-menu-wrap">
<!-- logo -->
<div class="site-logo">
<a href="index.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
<!-- logo -->
<!-- menu start -->
<nav class="main-menu">
<ul>
<li class="current-list-item">Home
<ul class="sub-menu">
<li>Static Home</li>
<li>Slider Home</li>
</ul>
</li>
<li>About</li>
<li>Pages
<ul class="sub-menu">
<li>404 page</li>
<li>About</li>
<li>Cart</li>
<li>Check Out</li>
<li>Contact</li>
<li>News</li>
<li>Shop</li>
</ul>
</li>
<li>News
<ul class="sub-menu">
<li>News</li>
<li>Single News</li>
</ul>
</li>
<li>Contact</li>
<li>Shop
<ul class="sub-menu">
<li>Shop</li>
<li>Check Out</li>
<li>Single Product</li>
<li>Cart</li>
</ul>
</li>
<li>
<div class="header-icons">
<a class="shopping-cart" href="cart.html"><i class="fas fa-shopping-cart"></i></a>
<a class="mobile-hide search-bar-icon" href="#"><i class="fas fa-search"></i></a>
</div>
</li>
</ul>
</nav>
<a class="mobile-show search-bar-icon" href="#"><i class="fas fa-search"></i></a>
<div class="mobile-menu"></div>
<!-- menu end -->
</div>
</div>
</div>
</div>
</div>
<!-- end header -->
<!-- search area -->
<div class="search-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<span class="close-btn"><i class="fas fa-window-close"></i></span>
<div class="search-bar">
<div class="search-bar-tablecell">
<h3>Search For:</h3>
<input type="text" placeholder="Keywords">
<button type="submit">Search <i class="fas fa-search"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end search arewa -->
<!-- breadcrumb-section -->
<div class="breadcrumb-section breadcrumb-bg">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center">
<div class="breadcrumb-text">
<p>Fresh and Organic</p>
<h1>Cart</h1>
</div>
</div>
</div>
</div>
</div>
<!-- end breadcrumb section -->
<!-- cart -->
<div class="cart-section mt-150 mb-150">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="cart-table-wrap">
<table class="cart-table">
<thead class="cart-table-head">
<tr class="table-head-row">
<th class="product-remove"></th>
<th class="product-image">Product Image</th>
<th class="product-name">Name</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-total">Total</th>
</tr>
</thead>
<tbody>
<tr class="table-body-row">
<td class="product-remove"><i class="far fa-window-close"></i></td>
<td class="product-image"><img src="assets/img/products/product-img-1.jpg" alt=""></td>
<td class="product-name">Strawberry</td>
<td class="product-price">$85</td>
<td class="product-quantity"><input type="number" placeholder="0"></td>
<td class="product-total">1</td>
</tr>
<tr class="table-body-row">
<td class="product-remove"><i class="far fa-window-close"></i></td>
<td class="product-image"><img src="assets/img/products/product-img-2.jpg" alt=""></td>
<td class="product-name">Berry</td>
<td class="product-price">$70</td>
<td class="product-quantity"><input type="number" placeholder="0"></td>
<td class="product-total">1</td>
</tr>
<tr class="table-body-row">
<td class="product-remove"><i class="far fa-window-close"></i></td>
<td class="product-image"><img src="assets/img/products/product-img-3.jpg" alt=""></td>
<td class="product-name">Lemon</td>
<td class="product-price">$35</td>
<td class="product-quantity"><input type="number" placeholder="0"></td>
<td class="product-total">1</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-4">
<div class="total-section">
<table class="total-table">
<thead class="total-table-head">
<tr class="table-total-row">
<th>Total</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr class="total-data">
<td><strong>Subtotal: </strong></td>
<td>$500</td>
</tr>
<tr class="total-data">
<td><strong>Shipping: </strong></td>
<td>$45</td>
</tr>
<tr class="total-data">
<td><strong>Total: </strong></td>
<td>$545</td>
</tr>
</tbody>
</table>
<div class="cart-buttons">
Update Cart
Check Out
</div>
</div>
<div class="coupon-section">
<h3>Apply Coupon</h3>
<div class="coupon-form-wrap">
<form action="index.html">
<p><input type="text" placeholder="Coupon"></p>
<p><input type="submit" value="Apply"></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end cart -->
<!-- logo carousel -->
<div class="logo-carousel-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="logo-carousel-inner">
<div class="single-logo-item">
<img src="assets/img/company-logos/1.png" alt="">
</div>
<div class="single-logo-item">
<img src="assets/img/company-logos/2.png" alt="">
</div>
<div class="single-logo-item">
<img src="assets/img/company-logos/3.png" alt="">
</div>
<div class="single-logo-item">
<img src="assets/img/company-logos/4.png" alt="">
</div>
<div class="single-logo-item">
<img src="assets/img/company-logos/5.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end logo carousel -->
<!-- footer -->
<div class="footer-area">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="footer-box about-widget">
<h2 class="widget-title">About us</h2>
<p>Ut enim ad minim veniam perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-box get-in-touch">
<h2 class="widget-title">Get in Touch</h2>
<ul>
<li>34/8, East Hukupara, Gifirtok, Sadan.</li>
<li>support#fruitkha.com</li>
<li>+00 111 222 3333</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-box pages">
<h2 class="widget-title">Pages</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-box subscribe">
<h2 class="widget-title">Subscribe</h2>
<p>Subscribe to our mailing list to get the latest updates.</p>
<form action="index.html">
<input type="email" placeholder="Email">
<button type="submit"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- end footer -->
<!-- copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<p>Copyrights © 2019 - Imran Hossain, All Rights Reserved.<br>
Distributed By - Themewagon
</p>
</div>
<div class="col-lg-6 text-right col-md-12">
<div class="social-icons">
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin"></i></li>
<li><i class="fab fa-dribbble"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end copyright -->
<!-- jquery -->
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!-- bootstrap -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- count down -->
<script src="assets/js/jquery.countdown.js"></script>
<!-- isotope -->
<script src="assets/js/jquery.isotope-3.0.6.min.js"></script>
<!-- waypoints -->
<script src="assets/js/waypoints.js"></script>
<!-- owl carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- magnific popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- mean menu -->
<script src="assets/js/jquery.meanmenu.min.js"></script>
<!-- sticker js -->
<script src="assets/js/sticker.js"></script>
<!-- main js -->
<script src="assets/js/main.js"></script>
</body>
</html>
I dont know what to try because i'm not that good on editing those type of templates.
I guess the template just has some hardcoded items in html but no functionality. The cart page should have a js file that handles all those functionalities that you mentioned.
I have 2 objects in corporate_goal and I am trying to execute blocks with this objects in for loop like:
{% load static %}
{% for goal in corporate_goal %}
{% block content %}
<!-- Corporate goal section-->
<div class="row">
<div class="section-title">
Corporate Goal: {{goal.corp_goal_title}}
</div>
<div style="margin-inline-start:auto">
{{todo}}0 % of total score TODO
</div>
</div>
<div class="row">
<p>HR Rating</p>
<p> </p>
{% if goal.corp_factor_rate %}
<p style="color:mediumspringgreen">rated</p>
{% else %}
<p style="color:indianred">unrated</p>
{% endif %}
<p> </p>
</div>
<!-- Tabs for details-->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#det1{{goal.corp_goal_title}}">Goal Details</a></li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#det2{{goal.corp_goal_title}}">Other Details</a></li>
</ul>
<!-- Tabs content for details-->
<div class="tab-content" >
<!--First tab-->
<div id="det1{{goal.corp_goal_title}}" class="tab-pane fade show active">
<div class="row">
<!--Column 1-->
<div class="col">
<table class="table-bordless" style="margin-top:20px;">
<tbody>
<tr>
<th>Start Date</th>
<td width="50"></td>
<td>{{goal.start_date}}</td>
</tr>
<tr>
<th>Weight</th>
<td width="20"></td>
<td>{{goal.corp_factor_weight}} %</td>
</tr>
</tbody>
</table>
</div>
<!--Column 2-->
<div class="col">
<table class="table-bordless" style="margin-top:20px;">
<tbody>
<tr>
<th>Due Date</th>
<td width="50"></td>
<td>{{goal.end_date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--Second tab-->
<div id="det2{{goal.corp_goal_title}}" class="tab-pane fade" style="margin-top:20px;">
<p>Factor for Goal Achievement:</p>
<table class="table">
<tbody>
<tr>
<th>Factor</th>
<td>0</td>
<th>Description</th>
<td>{{goal.corp_factor_0}}</td>
</tr>
<tr>
<th>Factor</th>
<td>1</td>
<th>Description</th>
<td>{{goal.corp_factor_1}}</td>
</tr>
<tr>
<th>Factor</th>
<td>2</td>
<th>Description</th>
<td>{{goal.corp_factor_2}}</td>
</tr>
<tr>
<th>Factor</th>
<td>3</td>
<th>Description</th>
<td>{{goal.corp_factor_3}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<br />
{% endblock %}
{% endfor %}
In blocks I have nav-tabs, but it works only for first object in the loop. Why? Do you have some idea?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
I'm trying to add padding to the left and right of this table so it fits in with the above and below divs.
This is what I'm currently at, and this is where I'm hoping to add padding to.
I've tried to create an ID "playerstatstable" and apply it to the parenting divs of the table but to no success.
/* Put the template's styles here.
Don't forget to rename the link in index.hmtl */
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 550px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* On small screens, set height to 'auto' for the grid */
#media screen and (max-width: 767px) {
.row.content {height: auto;}
}
#playerstatstable{
padding-right:15px;
padding-left:15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 550px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* On small screens, set height to 'auto' for the grid */
#media screen and (max-width: 767px) {
.row.content {height: auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse visible-xs">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">St. Louis Cardinals</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav hidden-xs">
<h2>Logo</h2>
<ul class="nav nav-pills nav-stacked">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul><br>
</div>
<br>
<div class="col-sm-9">
<div class="well">
<h4>The Cardinals Dream Team</h4>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<h4>Users</h4>
<p>1 Million</p>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<h4>Pages</h4>
<p>100 Million</p>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<h4>Sessions</h4>
<p>10 Million</p>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<h4>Bounce</h4>
<p>30%</p>
</div>
</div>
</div>
<!-- Table -->
<div class="row" >
<div class="col-small-12" >
<div class="well" id="playerstatstable">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="well">
<p>Text</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Any help is welcome. Thank you!
Just edit your style to col-sm-12:
<!-- Table -->
<div class="row">
<div class="col-sm-12">
The other code is omitted for the brevity
</div>
</div>
This is what my table looks like right now:
I want the checkbox to be on the right of "CMPT 310" instead of below it. I can't simply make the text a label for the checkbox because when I click on the text I want a description of the course to pop up (ie I don't want to checkbox to be checked). Here is how I'm implementing the problem cell in the table right now (using bootstrap):
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
And here is the rest of the page for reference:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"><img src="images/title.png" class="img-responsive"></div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong></td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong></td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Set the p and checkbox inside the td element to be displayed inline.
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="images/title.png" class="img-responsive">
</div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong>
</td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to implement Twitter Bootstrap tabs in the following code, but it does not seem to work. The tabs get displayed, but when I click on them nothing happens. Below is the only code I am using. All the other CSS/JS scripts are copied from Twitter Bootstrap framework.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="container">
<!-------->
<div id="content">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".tabs").tabs();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>
You need to add tabs plugin to your code
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
Well, it didn't work. I made some tests and it started working when:
moved (updated to 1.7) jQuery script to <head> section
added data-toggle="tab" to links and id for <ul> tab element
changed $(".tabs").tabs(); to $("#tabs").tab();
and some other things that shouldn't matter
Here's a code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
The key elements include:
the class="nav nav-tabs" and data-tabs="tabs" of ul
the data-toggle="tab" and href="#orange" of the a
the class="tab-content" of the div of the content
the class="tab-pane" and id of the div of the items
The complete code is as below:
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
Had a problem with Bootstrap tabs recently following their online guidelines, but there's currently an error in their markup example data-tabs="tabs" is missing on <ul> element. Without it using data-toggle on links doesn't work.
I have the same problem, but above some answers might be tricky for me.
I found the other answer maybe solve your question Twitter Bootstrap Js (tabs, popups, dropdown) not working in Drupal
place jquery.js before bootstrap.tab.js
You're missing the data-toggle="tab" data-tag on your menu urls so your scripts can't tell where your tab switches are:
HTML
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
I just fixed this issue by adding data-toggle="tab" element in anchor tag
<div class="container">
<!-------->
<div id="content">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab" href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
and
added the following in head section
http://code.jquery.com/jquery-1.7.1.js'>
I tried the codes from bootstrap's document as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tab demo</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>
and it works.
But when I switch these two <script src...>'s postion, it do not work. So please remember to load your jquery script before bootstrap.js.
For me, the problem was that I wasn't including bootstrap.min.css (I was only including bootstrap-responsive.min.css).
Actually, there is another easy way to do it. It works for me but I'm not sure for you guys.
The key thing here, is just adding the FADE in each (tab-pane) and it will works. Besides, you don't even need to script function or whatever version of jQuery.
Here is my code...hope it will works for you all.
<div class="tab-pane fade" id="Customer">
<table class="table table-hover table-bordered">
<tr>
<th width="40%">Contact Person</th>
<td><?php echo $event['Event']['e_contact_person']; ?></td>
</tr>
</table>
</div>
<div class="tab-pane fade" id="Delivery">
<table class="table table-hover table-bordered">
<tr>
<th width="40%">Time Arrive Warehouse Start</th>
<td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
</tr>
</table>
</div>
This solved it when none of the other examples did:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
i had the same problem until i downloaded bootstrap-tab.js and included it in my script, download from here https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc/bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027
include the bootsrap-tab.js in the just below the jquery
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
Final Code Looked like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
Since i'm working with Bootstrap Javascript Modules instead of loading the entire Bootstrap Javascript, my tabs were not working because i forgot to load load/include/ the node_modules/bootstrap/js/tab.js file.
After including it, it worked...
Good Luck
Just copy the script tag for adding the bootstrap.js from the head section to the end of the body. Then everything should work fine even without the scripts to activate the tabs.