Question posted in 
I have an issue with the bootstrap.min.css and tabs. When I use:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The format of the page is how I want it however when I switch tabs the contents of the other tabs are not displayed (when I switch back to the first it is displayed):
Select “Menu 1”:
When I use:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
The formatting is not good:
However the contents of the other tabs are displayed:
Is there a bootstrap CSS CDN that does both the good formatting and the tabs please?
This is the full html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Camp</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<!-- Le styles -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
text-align: center;
}
.myheader {
display:flex;
text-align: center;
}
.myimg {
width: 130px;
height: auto;
}
.pull-right {
text-align: right;
}
/* Tooltip container */
/* Tooltip text */
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
}
.error {
color: red;
}
.req {
color: red;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
</head>
<body>
<div id="campDisplay" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<form data-toggle="validator" role="form" id="showCampForm">
<div class="container-fluid shadow">
<div class="jumbotron col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>Camp</h3>
<div class="container-fluid">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="home" class="container tab-pane active col-lg-12 col-md-12 col-sm-12 col-xs-12"><br>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-5 col-xs-5" for="startDate">Start Date<span class="req"> *</span></label>
<div class="input-group date" id="datepicker1">
<input type="text" class="form-control" id="startDate" name="startDate" placeholder="Start Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-5 col-xs-5" for="startDate">End Date<span class="req"> *</span></label>
<div class='input-group date' id='datepicker2'>
<input type="text" class="form-control" id="endDate" name="endDate" placeholder="End Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="location">Location of Camp:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="location" name="location" placeholder="Location of Camp">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="details">Details of Camp:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="details" name="details" placeholder="Details of Camp">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="nights">Nights in Camp:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="nights" name="nights" placeholder="Nights in Camp">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="building">Nights in a building:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="building" name="building" placeholder="Nights in a building">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="canvas">Nights under canvas:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="canvas" name="canvas" placeholder="Nights under canvas">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="actualKM">Kilometres Travelled:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="actualKM" name="actualKM" placeholder="Kilometres Travelled">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="offset">Offset:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="offset" name="offset" placeholder="Offset">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="outcome">Outcome:</label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="outcome" name="outcome" placeholder="Outcome">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button id="update" class="btn btn-large btn-primary" >Update</button>
<button id="clear" class="btn btn-large btn-primary" >Clear</button>
<button id="delete" class="btn btn-large btn-primary" >Delete</button>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="outcome">Photograph:</label>
<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8" type="file" id="photo" name="photo" placeholder="Photograph">
<img src="..." alt="..." class="img-thumbnail">
</div>
</div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/camp.js"></script>
</body>
</html>
2
Answers
This is the code I used to resolve it:
Use the below refrence
For form inputs use “form-group” it will spacing around the form controls.