I recently started using Bootstrap 4 instead of 3. The first problems start to appear...
When i resize the browser window, the divs are getting on top of eachother. They should break to a new row when it does'nt fit anymore.
Why is the happening and how can i prevent it?
Ill followed the docs, but i can't figure out why its doing this. Bootstrap 3 did'nt had this problem (i know, Bootstrap 4 is using flexboxes)
.first-td-bold tr td:first-child {
font-weight: bold;
padding-right: 40px;
}
.no-wrap tr td {
white-space: nowrap;
}
.no-wrap a {
white-space: nowrap;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<nav class="nav nav-pills flex-column no-wrap">
<a class="flex-sm-fill nav-link active" href="#">Alles</a>
<a class="flex-sm-fill nav-link" href="#">Calculatie</a>
<a class="flex-sm-fill nav-link" href="#">Opdracht</a>
<a class="flex-sm-fill nav-link" href="#">Contract</a>
<a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
</nav>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<table class="table table-striped first-td-bold no-wrap">
<tr>
<td>Datum toegevoegd</td>
<td>05-08-2017</td>
</tr>
<tr>
<td>Bestandsnaam</td>
<td>179358-Wanden.pdf</td>
</tr>
<tr>
<td>Type</td>
<td>PDF</td>
</tr>
<tr>
<td>Grootte</td>
<td>8.642,35 KB</td>
</tr>
</table>
</div>
<div class="col-md-8">
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
</div>
</div>
</div>
</div>
</div>
</body>
Ok so this seems to do what you are looking for. Here's the pen https://codepen.io/chris-hitchcock/pen/BPybej
I did take out the nested row because it seemed negligible with what you are doing, but if you need to put it back, pretty simple. Basically only declared the width of your first one "col-md-2" the rest are col-md to allow the break but have content flow. Also added a little margin to the first column as the middle column was squishing into your navbar.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 pad">
<nav class="nav nav-pills flex-column no-wrap">
<a class="flex-sm-fill nav-link active" href="#">Alles</a>
<a class="flex-sm-fill nav-link" href="#">Calculatie</a>
<a class="flex-sm-fill nav-link" href="#">Opdracht</a>
<a class="flex-sm-fill nav-link" href="#">Contract</a>
<a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
</nav>
</div>
<div class="col-md">
<table class="table table-striped first-td-bold no-wrap">
<tr>
<td>Datum toegevoegd</td>
<td>05-08-2017</td>
</tr>
<tr>
<td>Bestandsnaam</td>
<td>179358-Wanden.pdf</td>
</tr>
<tr>
<td>Type</td>
<td>PDF</td>
</tr>
<tr>
<td>Grootte</td>
<td>8.642,35 KB</td>
</tr>
</table>
</div>
<div class="col-md">
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
</div>
</div>
</div>
</body>
Related
I want to put the <hr closer to the content in the header.
I try to use position-absolute but the disappears.
This is my first project with bootstrap.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Body -->
<header class="header row">
<div class="d-flex justify-content-between">
<div id="logo" class="pb-2 ps-2 pe-0 col-2">
<img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<div class="col-10 row">
<h2 class="col-9 px-0 text-primary d-flex align-items-center">CHƯƠNG TRÌNH REBATE</h2>
<div class="col-3 px-0">
<div class="float-end d-flex justify-content-between">
<i class="fa fa-bell me-lg-2 d-flex align-items-center"></i>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img class="rounded-circle " src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex text-primary">TuNTC23</span>
</a>
<div class="dropdown-menu bg-transparent border-0">
My Profile
Settings
Log Out
</div>
</div>
</div>
</div>
</div>
</div>
<hr style="height:1px;color:#1968B2;">
</header>
<hr style="height:1px;color:#1968B2; margin-top: -4px">
you can adjust the margin top according to your usage
I suggest you do not use the <hr> tag but a new css class or ::after to do that.
<header class="header row hr-bottom">
.hr-bottom {
border-bottom: 1px solid black;
}
OR
.hr-bottom::after {
border-bottom: 1px solid black;
}
The fastest way add class to hr for example bar
<hr class="bar" style="height:1px;color:#1968B2;">
and in CSS add class:
.bar {
transform: translateY(-10px);
}
Values up to you It may take px or procentage
Below is a complete HTML reproducible example. When using the selectpicker class from bootstrap-select, the live search box flows off to the left in the sidebar when clicking in the box and is not visible in the UI. This did not occur using earlier versions of bootstrap, but I am now migrating to newer versions. I am not able to see the root cause, does anyone else have a suggested fix?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/i18n/defaults-*.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<style>
.sidebar {
top: 50px;
left: 0px;
position: sticky;
}
</style>
<style>
body, html {
height:100%;
overflow: hidden;
}
/*
* Off Canvas sidebar at medium breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
overflow: auto;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left vh-100">
<div class="col-md-3 col-lg-2 sidebar-offcanvas h-100 overflow-auto bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 pt-5 mt-3">
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link" href="#">Layouts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Templates</a></li>
<li class="nav-item"><a class="nav-link" href="#">Themes</a></li>
<li class="nav-item"><a class="nav-link" href="#">Last Item</a></li>
<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
</ul>
</div>
<!--/col-->
<main class="col main pt-5 mt-3 h-100 overflow-auto">
<h1 class="display-4 d-none d-sm-block">
Bootstrap Dashboard
</h1>
<p class="lead d-none d-sm-block">Plus scrolling sidebar, based on Bootstrap 4</p>
<div class="alert alert-warning fade collapse" role="alert" id="myAlert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>Holy guacamole!</strong> It's free.. this is an example theme.
</div>
<div class="row mb-3">
<div class="col-xl-3 col-sm-6 py-2">
<div class="card bg-success text-white h-100">
<div class="card-body bg-success">
<div class="rotate">
<i class="fa fa-user fa-4x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-4">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-danger h-100">
<div class="card-body bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-4">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-info h-100">
<div class="card-body bg-info">
<div class="rotate">
<i class="fa fa-twitter fa-4x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-4">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 py-2">
<div class="card text-white bg-warning h-100">
<div class="card-body">
<div class="rotate">
<i class="fa fa-share fa-4x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-4">36</h1>
</div>
</div>
</div>
</div>
<!--/row-->
<hr>
<a id="features"></a>
<hr>
<p class="lead mt-5">
Are you ready for Bootstap 4? It's the 4th generation of this popular responsive framework. Bootstrap 4 will include some interesting
new features such as flexbox, 5 grid sizes (now including xl), cards, `em` sizing, CSS normalization (reboot) and larger font
sizes.
</p>
<div class="row my-4">
<div class="col-lg-3 col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="//placehold.it/740x180/bbb/fff?text=..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Layouts</h4>
<p class="card-text">Flexbox provides simpler, more flexible layout options like vertical centering.</p>
Button
</div>
</div>
<div class="card card-inverse bg-inverse mt-3">
<div class="card-body">
<h3 class="card-title">Flexbox</h3>
<p class="card-text">Flexbox is now the default, and Bootstrap 4 supports SASS out of the box.</p>
Outline
</div>
</div>
</div>
<div class="col-lg-9 col-md-8">
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>Label</th>
<th>Header</th>
<th>Column</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>responsive</td>
<td>bootstrap</td>
<td>cards</td>
<td>grid</td>
</tr>
<tr>
<td>1,002</td>
<td>rwd</td>
<td>web designers</td>
<td>theme</td>
<td>responsive</td>
</tr>
<tr>
<td>1,003</td>
<td>free</td>
<td>open-source</td>
<td>download</td>
<td>template</td>
</tr>
<tr>
<td>1,003</td>
<td>frontend</td>
<td>developer</td>
<td>coding</td>
<td>card panel</td>
</tr>
<tr>
<td>1,004</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>mobile-first</td>
<td>design</td>
</tr>
<tr>
<td>1,005</td>
<td>navbar</td>
<td>sticky</td>
<td>jumbtron</td>
<td>header</td>
</tr>
<tr>
<td>1,006</td>
<td>collapse</td>
<td>affix</td>
<td>submenu</td>
<td>flexbox</td>
</tr>
<tr>
<td>1,007</td>
<td>layout</td>
<td>examples</td>
<td>themes</td>
<td>grid</td>
</tr>
<tr>
<td>1,008</td>
<td>migration</td>
<td>bootstrap 4</td>
<td>flexbox</td>
<td>design</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--/row-->
</main>
<!--/main col-->
</div>
</div>
<!--/.container-->
<script>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>
After resizing the screensize the nav-link buttons don't use the css i gave them anymore. I tried the #media function but it doesn't react on changes in the css after resizing the screen.
(tables are empty, they get filled by the JS code.)
Why is itn't it responding or using the css after resizing the screen?
before resizing (large screen)
after resizing (smaller screen)
In the picture below you can see that there is some interfering with the code but i don't use the #media function at all but it's still using it.
what the browser is seeing
.annuHypoTabellen .nav-link:hover {
background-color: #ff486dad;
color: #fff;
}
.annuHypoTabellen .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: #de002e;
font-weight: 700;
color: #fff;
}
.annuHypoTabellen .nav-link {
position: relative;
display: block;
margin: 0;
padding: 13px 16px;
background-color: rgba(201, 201, 201, 0.425);
border: 0;
border-radius: 0;
color: #616161;
transition: background-color 0.2s ease;
}
<div class="annuHypoTabellen mt-3">
<div class="row">
<div class="col-md-8 col-xl-9 col-12">
<h4 class="text-gtdirect mt-3 mb-3">
Overzicht totale lasten bij <ins>niet</ins> oversluiten
</h4>
</div>
<div class="col-md-4 col-xl-3 col-12 ml-auto d-flex justify-content-end ">
<ul class="nav nav-pills mb-3 navHypoTabsSmall" id="huidigeHypoTab" role="tablist">
<li class="nav-item">
<a class="nav-link nav-link-annuHypo active" id="pills-jaarHuidigeHypo-tab" data-toggle="pill" href="#pills-jaarHuidigeHypo" role="tab" aria-controls="pills-jaarHuidigeHypo" aria-selected="true">Per Jaar</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-annuHypo" id="pills-maandHuidigeHypo-tab" data-toggle="pill" href="#pills-maandHuidigeHypo" role="tab" aria-controls="pills-maandHuidigeHypo" aria-selected="false">Per Maand</a>
</li>
</ul>
</div>
</div>
<div class="swipeIcons mb-2">
<div class="row">
<div class="col">
<i class="fas fa-arrow-left fa-lg float-left text-gtdirect pt-1"></i>
</div>
<div class="col">
<h5 class="text-center lead">Scroll</h5>
</div>
<div class="col">
<i class="fas fa-arrow-right fa-lg float-right text-gtdirect pt-1"></i>
</div>
</div>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-jaarHuidigeHypo" role="tabpanel" aria-labelledby="pills-jaarHuidigeHypo-tab">
<div class="anhypoResult">
<div class="scrollBox">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Jaar</th>
<th scope="col">Totale jaar rente</th>
<th scope="col">Totale jaar aflossing</th>
<th scope="col">Schuld ultimo</th>
<th scope="col">Eigen-woning-forfait</th>
<th scope="col">IB-EWF</th>
<th scope="col">IB rente aftrek</th>
<th scope="col">Netto lasten</th>
</tr>
</thead>
<tbody class="annuHuidigeHypoResultTabelJaar">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-maandHuidigeHypo" role="tabpanel" aria-labelledby="pills-maandHuidigeHypo-tab">
<div class="anhypoResult">
<div class="scrollBox">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Jaar</th>
<th scope="col">Maand</th>
<th scope="col">Rente</th>
<th scope="col">Aflossing</th>
<th scope="col">Schuld ultimo</th>
<th scope="col">Eigen-woning-forfait</th>
<th scope="col">IB-EWF</th>
<th scope="col">IB rente aftrek</th>
<th scope="col">Netto lasten</th>
</tr>
</thead>
<tbody class="annuHuidigeHypoResultTabel">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
My web application has some areas placed in the page. Basically:
<body>
<nav> <-- top nav bar
<ol> <-- breadcrumb
<div> <-- row with buttons
<div class="overflow-auto">
<table> <-- run-time growing table
</div>
<footer> <-- sticky footer
</body>
At run-time my scripts add rows to the table.
To get the overflow-auto class working I have to set a max-height value.
If I set it to 100% it just grows like without overflow. It works if I set a px value only.
My goal, instead, is to fill all the available space (so it depends on the browser, width, etc...) between the previous div (row with buttons) and the sticky footer.
In other words, I want the user always sees the footer so when the table reach it, the overflow feature should begin to work.
I don't understand if this can be easily handled with some specific classes or I have to manually compute the available height (if even possible...).
UPDATE
I cannot manage it to work with a sidebar. Complete code:
<body class="vh-100 d-flex flex-column overflow-hidden">
<nav id="nav_top" class="navbar navbar-expand navbar-dark bg-dark static-top">
<ul class="navbar-nav d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<li class="nav-item">
<h5>
<span class="badge badge-secondary">BLABLA</span>
</h5>
</li>
</ul>
</nav>
<div id="wrapper">
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<span>NAV 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php">
<span>NAV 2</span>
</a>
</li>
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">Current page</li>
</ol>
<button type="button" class="btn btn-info mb-3">BUTTON</button>
<div id="content" class="row overflow-auto">
<div class="col-12 table-responsive">
<table id="tableParameters" class="table table-sm">
<thead class="thead-light">
<tr>
<th scope="col">COL 1</th>
<th scope="col">COL 2</th>
<th scope="col">COL 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
It's not clear to me what affect the overflow-auto behavior. I need the row/col divs in order to keep margins.
I think you'd want to use flexbox for this...
<body class="vh-100 d-flex flex-column overflow-hidden">
<nav> <-- top nav bar -->
<ol> <-- breadcrumb -->
<div> <-- row with buttons -->
<div class="overflow-auto">
<table> <-- run-time growing table -->
</div>
<footer class="mt-auto"> <-- sticky footer -->
</body>
vh-100 - makes the entire body viewport height
d-flex flex-column - make the body display:flex, flex-direction:column
overflow-hidden - prevents the body from scrolling
mt-auto - to make the footer stick the the bottom
Demo: https://www.codeply.com/go/FSrBOdRVFG
Basically this has been answered before:
Bootstrap 4 row fill remaining height
How to make the row stretch remaining height
Bootstrap 4: Scrollable row, which fills remaining height
I made two tabs for Fixtures and Results, but when I click on Result tab nothing has change and it remains on Fixtures tab !
This is my code:
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active">Fixtures
</li>
<li class="">Results
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="service-one">
<table class="table table-condensed table-hover">
<tbody>
<tr>
<td class="col-md-2"><img src="img/leagues/bpl-s.png" alt="bpl" class="img-rounded"></td>
<td class="col-md-2">Manchester United</td>
<td class="col-md-1">vs</td>
<td class="col-md-2">Tottenham</td>
<td class="col-md-2">12:45</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="service-two">
<table class="table table-condensed table-hover">
<tbody>
<tr>
<td class="col-md-2"><img src="img/leagues/bpl-s.png" alt="bpl" class="img-rounded"></td>
<td class="col-md-2">Manchester United</td>
<td class="col-md-1">5-2</td>
<td class="col-md-2">Tottenham</td>
<td class="col-md-2">Report</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
How can I fix this to switch between tabs and show its content ?
You placed #service-one and #service-two in two different tab contents. That is why its not working.
Place them inside #myTabContent
<ul class="nav nav-tabs nav-justified" id="myTab">
<li class="active">
<a data-toggle="tab" href="#service-one">Fixtures</a>
</li>
<li class="">
<a data-toggle="tab" href="#service-two">Results</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active in" id="service-one">
.....
</div>
<div class="tab-pane fade in" id="service-two">
.....
</div>
</div>
Here is a demo