I had a bootstrap card using tab headers that was working perfectly.
I added some javascript files to update things, especially for a datetimepicker I'm using, and since then I'm having tab issues. Currently, I have my first tab (Instagram) active on default. Now when I click another tab, it becomes active and instagram remains active. No matter what, it shows the active tab and the previously activated tab as both being active.
Here's the head with the up to date CDN files:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
and the html:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item active">
<a data-toggle="tab" class="nav-link active" href="#instagram">Instagram</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#twitter">Twitter</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#facebook">Facebook</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div id="instagram" class="tab-pane fade show active">
<div id="instafeed"></div>
</div>
<div id="twitter" class="tab-pane fade">
twitter
</div>
<div id="facebook" class="tab-pane fade">
facebook
</div>
</div>
</div>
</div>
Please Check Below Fiddle
Fiddle
Remove active class from <li> tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a data-toggle="tab" class="nav-link active" href="#instagram">Instagram</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#twitter">Twitter</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#facebook">Facebook</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div id="instagram" class="tab-pane fade show active">
<div id="instafeed"></div>
</div>
<div id="twitter" class="tab-pane fade">
twitter
</div>
<div id="facebook" class="tab-pane fade">
facebook
</div>
</div>
</div>
</div>
Related
So for a school project im making a website but whenever I use container and container-fluid no matter what I use i have these empty spaces on the side and I have no clue how to fix them so i came here for help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" id="nav">
<div class="row">
<div class="col-xl-12">
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I do hope I can find help here and thanks in advance!
Bootstrap adds in some spacing by default to container and container-fluid classes. To remove these, you can specify you want no padding / margin on each item by adding a class using the format {property}{sides}-{size} where size is 0.
For example, to remove padding you can add a p-0 class. You can also remove a specific side:
pt-0 top
pr-0 right
pb-0 bottom
pb-0 left
Similarly, to remove margin you can add a m-0 class.
For more info on spacing, check out: https://getbootstrap.com/docs/4.0/utilities/spacing/
To remove these default spacing use bootstrap grid classes can be removed with .no-gutters.
Here is an example
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
For more information: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Not sure what you mean by white spaces, you might want to define with an image. If you mean that your body doesn't fill the page, the problem is nested containers. See comments below.
<body>
<!-- This container is going to "add space" to your sides. -->
<div class="container" id="nav">
<div class="row">
<!-- This will fill all 12 columns on XL viewport,
but the columns are inside the parent container. -->
<div class="col-xl-12">
<!-- This will go to the limits of the parent container above. -->
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
Please look at a codepen for this:
codepen
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container position-relative">
<div class="pillwrapper">
<div class="rightpart d-flex justify-content-end">
<ul class="nav nav-pills" id="mypill">
<li class="nav-item">button</li>
<li class="nav-item">button</li>
<li class="nav-item">button</li>
</ul>
<div class="tab-content" id="mypillcontent">
<div class="tab-pane fade show active" id="content-1">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-2">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-3">
<p>content here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
</div>
</div>
</div>
</div>
I'm learning bootstrap4. I'm trying to realize a structure here with bootstrap NAV PILL: a tab system(but looks like buttons), you can switch tabs, under a tab there is a text content and a photo, only this photo will be shown in the left, looks like tabs system is right part, photo is left part. Problem is: 1, the first tab is active, when I click any other one, nothing happens. 2, why position-absolute does not work, photo still at right? 3, how to put text content under tabs, and horizontally align center the tab and content?
.rightpart{
border:2px solid red;
min-height:100vh;
}
.pillwrapper{
border:1px solid green;
min-height:100vh;
}
.container{
border:1px solid yellow;
min-height:100vh;
}
.content-photo{
width:200px;
left:0;
top:0;
}
Could anybody please help?
For Bootstrap 4, the 'tabs' are not actually tabbable until you include the JavaScript plugin to make the tabs work. The documentation for Bootstrap states this:
https://getbootstrap.com/docs/4.3/components/navs/#tabs
To see the tabs work, see this link from the Bootstrap documentation:
https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior
The above links show the tabs working with content associated with each tab. To have content 'under' each tab, you need to have tab-panes for the content for each tab. See this example from the Bootstrap documentation.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
To center the tab navigation and content under each tab, you could use CSS like below for the tab navigation (from the above example HTML).
.nav {
display: block;
margin: 0 auto;
}
With this information, your HTML should look more like this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<ul class="nav">
<li class="nav-item">
Button 1
</li>
<li class="nav-item">
Button 2
</li>
<li class="nav-item">
Button 3
</li>
</ul>
<div class="tab-content" id="mypillcontent">
<div class="tab-pane fade" id="content-1">
<p>Content Here</p>
<img src="https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg" alt="" class="content-photo position-absolute" />
</div>
<div class="tab-pane fade" id="content-2">
</div>
<div class="tab-pane fade" id="content-3">
</div>
</div>
</div>
</div>
<!--
Add Bootstrap JavaScript
-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Ok guys I'm trying to make dynamic tabs with bootstrap 4, something like this: https://codepen.io/jek/pen/BoWNRy [I didn't wrote it]
In any case is I paste this code locally it don't work, I display the 3 tabs but I can see the text only in the first and I don't know why.
Here is my head [HTML]:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Use this links and scripts instead yours:
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
I took it from here:https://www.w3schools.com/bootstrap4/default.asp
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#profile" role="tab" data-toggle="tab" aria-selected="true">profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>
An improvement to the accepted answer:
The first tab will not fade/animate. To fix that, replace:
<div role="tabpanel" class="tab-pane active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
with:
<div role="tabpanel" class="tab-pane fade show active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
I am trying to make my navigation bar clickable. For example when a user clicks data a data web page opens up. But in my code I am unable to do so. When I click the tab button nothing happens. Can someone help me so that when I click the tab button shows the content? Note I am using bootstrap nav-nav tab bar Below is my code below:-
<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>Sales</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="persons/data.html"> data </a></li>
<li><a data-toggle="tab" href="teams/teamI.html"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container-fluid">
<div class="row">
<div id= "mapContainer" class="col-md-12">
<div id="map-canvas"></div>
</div>
<div id = "panelContainer" class="col-md-3 hidden">
<div id="right-panel"></div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
</div>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can make it simpler like below. But if you wanted to load another html into specific tabs then use jquery.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
Update: You can also add html inside your tabs using jQuery load
function.
Code looks like this:
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Main</a></li>
<li><a data-toggle="tab" href="#data"> data </a></li>
<li><a data-toggle="tab" href="#teams"> teams </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container">
<h1>Home</h1>
</div>
</div>
<div id="data" class="tab-pane fade in">
<div class="container">
<h1>Data</h1>
</div>
</div>
<div id="teams" class="tab-pane fade in">
<div class="container">
<h1>Teams</h1>
</div>
</div>
</div>
<script>
$('#home').load('/home.html');
$('#data').load('/data.html');
$('#teams').load('/teams.html');
</script>
This is first time that my bootstrap tabs is not working my code is simple and everything looking OK but on my system it's not working.
Following is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Add data-toggle="tab" to anchor
<!DOCTYPE html>
<html lang="ENG">
<head>
<!-- Required meta tags always come first-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a data-toggle="tab" href="#home" class="nav-link active">Active 1</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#profile" class="nav-link">Active 2</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#message" class="nav-link">Active 3</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#settings" class="nav-link">Disabled</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">home</div>
<div class="tab-pane fade" id="profile">profile</div>
<div class="tab-pane fade" id="message">messages</div>
<div class="tab-pane fade" id="settings">settings</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>
</html>