Develop Reference

bootstrap tabpane and carousel issue

I've a query. I've three different Bootstrap Tabpane. Each and every Tab has different Carousel Items in it. I would like to activate the carousel when the tab is selected. currently its activated when the pages is loaded. When i select the third tab, its reaches nearly middle of the carousel. Can anyone help me on this. I guess, we can activate it by JS, but i'm not sure how to activate it on each tab selection
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div style="font-size:12pt;"><ul id="myTab" class="nav nav-tabs"
style="width: 100%; padding-top: 10px;">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul></div>
<div class="tab-pane fade" id="tab1">
<div id="myCarousel1" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators carousel-indicators-numbers" style="bottom:
-50px;">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner" style="margin-top: 3%;">
<div class="item active"><img class="img-responsive center-block
imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
<div class="item"><img class="img-responsive center-block imageslidesize" src="../Images/02.JPG" alt="Second Slide"/></div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel1"
style="background:none;color:black;" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel1"
style="background:none;color:black;" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="tab-pane fade" id="tab2">
<div id="myCarousel2" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators carousel-indicators-numbers" style="bottom:
-50px;">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner" style="margin-top: 3%;">
<div class="item active"><img class="img-responsive center-block
imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
<div class="item"><img class="img-responsive center-block imageslidesize"
src="../Images/02.JPG" alt="Second Slide"/></div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel2"
style="background:none;color:black;" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel2"
style="background:none;color:black;" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="tab-pane fade" id="tab3">
<div id="myCarousel2" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators carousel-indicators-numbers" style="bottom:
-50px;">
<li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel3" data-slide-to="1"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner" style="margin-top: 3%;">
<div class="item active"><img class="img-responsive center-block
imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
<div class="item"><img class="img-responsive center-block imageslidesize"
src="../Images/02.JPG" alt="Second Slide"/></div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel3"
style="background:none;color:black;" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel3"
style="background:none;color:black;" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>

If you want to take owl-carousel into the tab then you should give same IDs to each owl carousel with same class="owl-carousel".
Working example : https://codepen.io/manektech/pen/XGagBe
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div><img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel();
});
Working example : https://codepen.io/manektech/pen/XGagBe

Fix Nav rolling when use carousel - bootstrap

Using bootrap nav-fix top, In mobile mode the fixed navigation bar scrolls using the carousel, only in mobile mode this happens
i try fix with css change but no sucess
i dont know to fix that, thanks for help
Exemple
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#fotos">Fotos</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contato</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Galeria Section -->
<section id="fotos" class="bg-light-gray">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galeria de Fotos</h2>
<br>
</div>
<div class="row">
<div class="carousel slide article-slide" id="myCarousel">
<div class="carousel-inner cont-slider">
<div class="item active">
<img src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>$('#myCarousel').carousel({
interval: 4000
});
</script>

You Can use the following media queries its work fine for your issue.
#media (max-width:767px) { .navbar-static-top { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; } }

Pagination inside Bootstrap tab [Laravel 5.1, Ajax, jQuery]

I want to insert several pagination function in one page using laravel pagination and bootstrap tab, but it doesn't work well, so I found something in Internet that say I need to use ajax to make it but I think there are some missing with my code because the component inside my tab is doesn't show. Here I provide my code:
View
<script>
$(document).ready(function(){
$("#f1").load("http://localhost/laravel/public/adminpanel/ajax/apu");
$("#f2").load("http://localhost/laravel/public/adminpanel/ajax/aps");
$("#f3").load("http://localhost/laravel/public/adminpanel/ajax/app");
});
</script>
<div id="tf-header">
<div class="container"> <!-- container -->
<center><h1>Panel Administrator</h1></center>
</div><!-- end container -->
</div>
<div id="tf-features">
<div class="container"> <!-- container -->
<div class="col-md-4"> <!-- tab menu col 4 -->
<ul class="features nav nav-pills nav-stacked" role="tablist">
<li role="presentation"> <!-- feature tab menu #1 -->
<a href="#f1" aria-controls="f1" role="tab" data-toggle="tab">
<i class="fa fa-user fa-2x fa-fw"></i>
Anggota
</a>
</li>
<li role="presentation"> <!-- feature tab menu #2 -->
<a href="#f2" aria-controls="f2" role="tab" data-toggle="tab">
<i class="fa fa-building fa-2x fa-fw"></i>
Sekolah
</a>
</li>
<li role="presentation"> <!-- feature tab menu #3 -->
<a href="#f3" aria-controls="f3" role="tab" data-toggle="tab">
<i class="fa fa-briefcase fa-2x fa-fw"></i>
Proyek
</a>
</li>
<li role="presentation"> <!-- feature tab menu #4 -->
<a href="#f4" aria-controls="f4" role="tab" data-toggle="tab">
<i class="fa fa-check-square-o fa-2x fa-fw"></i>
Verifikasi Pembayaran
</a>
</li>
</ul>
</div>
<div class="col-md-8"> <!-- right content col 6 -->
<!-- Tab panes -->
<div class="tab-content features-content"> <!-- tab content wrapper -->
<div role="tabpanel" class="tab-pane fade in active" id="f1"> <!-- feature #1 content open ANGGOTA-->
</div>
<div role="tabpanel" class="tab-pane fade" id="f2"> <!-- feature #2 content open SEKOLAH-->
</div>
<div role="tabpanel" class="tab-pane fade" id="f3"> <!-- feature #3 content open PESAN TERKIRIM-->
</div>
</div>
</div><!-- end right content col 6 -->
</div> <!-- end row -->
</div>
Controller
public function indexapu()
{
$user = DB::table('users')->paginate();
return View::make('adminpanelapu', ['users' => $user]);
}
public function indexaps()
{
$school = DB::table('school')->paginate();
return View::make('adminpanelaps', ['school' => $school]);
}
public function indexapp()
{
$project = DB::table('project')->paginate();
return View::make('adminpanelapp', ['project' => $project]);
}
Router
Route::get('/adminpanel/ajax/apu ', 'AdminControl#indexapu');
Route::get('/adminpanel/ajax/aps ', 'AdminControl#indexaps');
Route::get('/adminpanel/ajax/app ', 'AdminControl#indexapp');
Route::get('/adminpanel ', 'AdminControl#index');

How do I make my Bootstrap Carousel the full width of the page?

I am trying to make my bootstrap carousel the full width of the page, thinking that that will look the best. I've looked it up and nothing I tried worked, though. Also, if you think that making it a different size would be better, I would love to hear! I'm not great with layout and I'm trying to work on it. Also, my pictures are in SD even though they were HD. Should I link them in the same folder as my html and css files instead of getting them straight from the internet?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Template</title>
<!-- links to the css page and bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- BEGIN NAVBAR -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li><a class="" href="#">Text</a></li>
</ul>
<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>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li class="dropdown">
Dropdown <b class="caret"></b> <ul class="dropdown-menu">
<li>Text</li>
<li class="divider"></li>
<li class="dropdown-header">Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVBAR -->
<div class="container">
<!-- CAROUSEL START -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!--Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://36646d87786feafc0611-0338bbbce19fc98919c6293def4c5554.r0.cf1.rackcdn.com/images/FiGZ9r3D3E82.878x0.Z-Z96KYq.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>BLAH</p>
</div>
</div>
<div class="item">
<img src="https://media.licdn.com/mpr/mpr/p/2/005/096/045/19d71d5.jpg" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>BLAH BLAH</p>
</div>
</div>
<div class="item">
<img src="http://d3psvddqt9zx7g.cloudfront.net/blog/wp-content/uploads/2015/05/lol1-2.jpg" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>BLAH BLAH BLAH</p>
</div>
</div>
</div>
<!--Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--CAROUSEL END -->
</div>
</body>
</html>
CSS
body {
padding-top: 50px;
padding-bottom: 20px;
}
.carousel img {
top: 0;
left: 0;
min-width: 100%;
height: 550px;
max-height: 550px;
width: auto;
}

Just remove the container like in this fiddle
https://jsfiddle.net/zdxq5c85/
<!-- CAROUSEL START -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!--Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://36646d87786feafc0611-0338bbbce19fc98919c6293def4c5554.r0.cf1.rackcdn.com/images/FiGZ9r3D3E82.878x0.Z-Z96KYq.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>BLAH</p>
</div>
</div>
<div class="item">
<img src="https://media.licdn.com/mpr/mpr/p/2/005/096/045/19d71d5.jpg" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>BLAH BLAH</p>
</div>
</div>
<div class="item">
<img src="http://d3psvddqt9zx7g.cloudfront.net/blog/wp-content/uploads/2015/05/lol1-2.jpg" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>BLAH BLAH BLAH</p>
</div>
</div>
</div>
<!--Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--CAROUSEL END -->

Bootstrap Carousel working in Bootply, not in browser

So everything appears to be working when I load up the html on bootply, but when I push it to my webpage (Github page) the carousel loads, but doesn't do any scrolling.
Heres the HTML I have pushed to the site, its exactly the same on Bootply except for the addition of the script near the top, which I read was needed to make it work, but it doesnt seem to do anything. It wasnt necessary on the Bootply apparently.
<head>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(function(){
$('#carousel-content').carousel();
});
</script>
<body>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="nav">
<p><br><br></p>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Projects</li>
<li role="presentation">About Me</li>
<li role="presentation">Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="potrait">
<p><br><br></p>
<img src = "https://lh3.googleusercontent.com/-eQB0B8kGRiw/AAAAAAAAAAI/AAAAAAAAAAA/gRPFLBygtI8/photo.jpg" class="center-block img-circle" height="200" width="200">
</div>
<div class="info">
<p><br><br></p>
<h1 class="text-center"> Matt Kowalczykowski </h1>
<h2 class="text-center"> Mechatronics Engineering Student </h2>
<p><br><br></p>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-centered">
<div id="carousel-content" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-content" data-slide-to="0" class="active"></li>
<li data-target="#carousel-content" data-slide-to="1"></li>
<li data-target="#carousel-content" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://images.wisegeek.com/robots-assembling-car-bodies.jpg">
<div class="carousel-caption">
<h3>Mechanical</h3>
</div>
</div>
<div class="item">
<img src="http://seetech-corp.com/engineering/wp-content/uploads/2011/07/seetech-electrical-engineering-cabinets.jpg">
<div class="carousel-caption">
<h3>Electrical</h3>
</div>
</div>
<div class="item">
<img src="http://cdn.onextrapixel.com/wp-content/uploads/2013/07/clean-coding-best-practices.jpg">
<div class="carousel-caption">
<h3>Programming</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</body>

You don't need that top JavaScript, but you do need to load the Bootstrap Javascript files. Preferably right before the
</body>
tag.
<script src="link/to/bootstrap.min.js"></script>
For you I think it would be dist/js/bootstrap.min.js

You're not including bootstrap.js.
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>