Columns visualization in Bootstrap layout - html

I can't visualise two column in a row. Do you know why?
I make the container, the row and then two columns-md-4 each with <h3>, <p> and a <table>. When I load the page on browser I can't see it well formatted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random App </title>
<meta name="description" content="Random App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<style>
body{
padding-top: 40px
}
</style>
<body>
<!--Navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Random
</div> <!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feed
<li>Gallery
<li>Feature
<li>Contact
</ul>
</div> <!--End container-->
</nav> <!--End nav-->
<!--jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Jumbotron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
</div><!--End Container-->
</div><!--End jumbotron-->
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Table A</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</div>
<div class="col-md-4">
<h3>Table B</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</div>
</div><!--End Row-->
</div><!--End Container>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Tons of missing closing tags
You didn't properly closed your tags. Both <div>s with the col-md-4 classes were missing a closing tag right after your </tbody> tag.
You also miss a closing </div> for your <div class="container"> in your <nav>, not to mention that all of your <li>s miss their closing </li>s in your Navbar Header code block.
What you should have done
You would have noticed this if you had had proper indentation or had used an IDE with start-end tag highlighting.
Cmon, even Stack Overflow's snippet tool would give a warning, if you had taken the effort to create a snippet and press the tidy button.
See the red closing tag? That means you have an error:
This is not how a list should look like after a tidy:
The proper code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random App</title>
<meta name="description" content="Random App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<style>
body {
padding-top: 40px
}
</style>
<body>
<!--Navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Random
</div>
<!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feed
</li>
<li>Gallery
</li>
<li>Feature
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<!--End container-->
</nav>
<!--End nav-->
<!--jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Jumbotron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
</div>
<!--End Container-->
</div>
<!--End jumbotron-->
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Table A</h3>
<p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Table B</h3>
<p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--End Row-->
</div>
<!--End Container>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Try this https://jsfiddle.net/2Lzo9vfc/33/
HTML
<!--Navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Random
</div> <!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feed
<li>Gallery
<li>Feature
<li>Contact
</ul>
</div> <!--End container-->
</nav> <!--End nav-->
<!--jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Jumbotron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
</div><!--End Container-->
</div><!--End jumbotron-->
<div class="row">
<div class="col-md-4">
<h3>Table A</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Table B</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</table>
</div>
</div><!--End Row-->
</div>

Related

Edit Cart on Html template

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.

For loop for nav-tabs

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>&nbsp</p>
{% if goal.corp_factor_rate %}
<p style="color:mediumspringgreen">rated</p>
{% else %}
<p style="color:indianred">unrated</p>
{% endif %}
<p>&nbsp</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">

Bootstrap 4 table-bordered lost its style

I have a modal in my page and a table in it. When I turn table to table-bordered it lost bootstrap style, and turns to normal html table!
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Customer Modal -->
<div class="modal" style="text-align: center;" tabindex="-1" role="dialog" id="customerModal">
<div class="modal-dialog" style="max-width:100%; width:auto !important; display: inline-block;" role="document">
<div class="modal-content">
<div class="modal-body">
<div class=" justify-content-center ml-auto">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control" placeholder="جستجو ..." />
<i class="fas fa-search"></i>
</div>
</div>
</div>
<div class="container modal-table">
<table class="table-bordered">
<thead class="thead-light">
<tr>
<th>Code</th>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>Email</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">exit</button>
</div>
</div>
</div>
</div>
and I can't even use any CSS for my table and it does not change.
I want to create a table with border but with bootstrap style.
Only when its class:"table" it looks with bootstrap style

copy table class from bootstrap main css then put it on table-bordered class .

HTML table in bootstrap carousel

I have a code like this:
http://jsfiddle.net/nf0z3pk3/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body style="height:100%;">
<div style="height:100%;" data-interval="false" data-ride="carousel" class="carousel slide" id="next">
<div class="carousel-inner">
<div class="item active">
<table border=1 style="width:100%; margin-left: auto; margin-right: auto; margin-top:5%" id="activitiesByMonthTable" class="">
<thead>
<tr>
<th>Month</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr id="row" class="reportRow">
<td>March</td>
<td>1</td>
</tr>
<tr id="row" class="reportRow">
<td>April</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae egestas purus. </p>
<p><a role="button" href="#" class="btn btn-lg btn-primary">Learn more</a></p>
</div>
</div>
</div>
Refer to jsfiddle link. Now, it works well with one problem. When you click next or previous button it slides to the other div. When you try to come back to the first slide, it comes back to the table but it does not come back to the table sliding. It just looks like it reloads a page. First the table is invisible, then it is visible back. I think it recreates the table. Any help is appreciated.

div responsiveness in twitter bootstrap

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="span4">
Image:<img src="Tulips.jpg" ></img>
</div>
<div class="span4 ">
<table class="table borderless">
<tr>
<td><b>Test image</b></td>
</tr>
<tr>
<td>testing testing</td>
</tr>
<tr>
<td>120$</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" type="button">Default button</button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
My output1:
and when i test for its responsiveness by using a mobile phone i get an output2 as :
Can anybody help me with the code i have posted to make it look as output1 even for mobile view...thank you...

Here you go:
<div class="row">
<div class="col-xs-6">Image:
<img class="img-responsive" src="Tulips.jpg"></img>
</div>
<div class="col-xs-6 ">
<table class="table borderless">
<tr>
<td><b>Test image</b>
</td>
</tr>
<tr>
<td>testing testing</td>
</tr>
<tr>
<td>120$</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" type="button">Default button</button>
</td>
</tr>
</table>
</div>
</div>

I got the answer:
<div class="row">
<table class="table borderless">
<tr>
<td>
<div class="span4">
Image:<img src="Tulips.jpg" ></img>
</div>
</td>
<td>
<div class="span4 ">
<table class="table borderless">
<tr>
<td><b>Test image</b></td>
</tr>
<tr>
<td>testing testing</td>
</tr>
<tr>
<td>120$</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" type="button">Default button</button>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
thank you for you consideration..