I am using a bootstrap slider.
On desktop, it has three slides with 4 tiles each
On Tabs, they have to be 4 slides with 3 tiles each
On Mobile, there needs to be 12 different slides
I am thinking of the most effective and optimized way of implementing this.
Option 1 - Create 3 different set of sliders. Make only one visible at a time
Option 2 - Detect the screen width with jquery and programmatically add extra tiles as slides, hide the extra ones. I guess this will be very complicated.
Please help if there is a better way to implement this.
Here it is:
.carousel-inner .item.active {
display: flex;
}
.carousel-inner .item {
background-color: #212121;
color: white;
padding: 0 15px;
}
#desktopCarousel .carousel-inner .item > .row {
min-height: 480px;
}
#tabletCarousel .carousel-inner .item > .row {
min-height: 360px;
}
.carousel-inner .item > .row {
flex-grow: 1;
min-height: 320px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.carousel-inner .item > .row [class^="col-"] {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
text-align: center;
}
.carousel-inner .item > .row .row {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.carousel-inner .item > .row .row [class^="col-"] {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
<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>
<div id="desktopCarousel" class="carousel slide hidden-xs hidden-sm" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#desktopCarousel" data-slide-to="0" class="active"></li>
<li data-target="#desktopCarousel" data-slide-to="1"></li>
<li data-target="#desktopCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-6">
First item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Second item
</div>
<div class="col-sm-6">
Third item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Fourth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Fifth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Sixth item
</div>
<div class="col-sm-6">
Seventh item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Nineth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
Tenth item
</div>
<div class="col-sm-6">
Eleventh item
</div>
</div>
<div class="row">
<div class="col-sm-12">
Twelfth item
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#desktopCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#desktopCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="tabletCarousel" class="carousel slide hidden-xs hidden-md hidden-lg" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#tabletCarousel" data-slide-to="0" class="active"></li>
<li data-target="#tabletCarousel" data-slide-to="1"></li>
<li data-target="#tabletCarousel" data-slide-to="2"></li>
<li data-target="#tabletCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-6">
First item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Second item
</div>
<div class="col-sm-12">
Third item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Fourth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Fifth item
</div>
<div class="col-sm-12">
Sixth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Seventh item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
<div class="col-sm-21">
Nineth item
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-6">
Tenth item
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Eleventh item
</div>
<div class="col-sm-12">
Twelvth item
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#tabletCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#tabletCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="mobileCarousel" class="carousel slide hidden-sm hidden-md hidden-lg" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mobileCarousel" data-slide-to="0" class="active"></li>
<li data-target="#mobileCarousel" data-slide-to="1"></li>
<li data-target="#mobileCarousel" data-slide-to="2"></li>
<li data-target="#mobileCarousel" data-slide-to="3"></li>
<li data-target="#mobileCarousel" data-slide-to="4"></li>
<li data-target="#mobileCarousel" data-slide-to="5"></li>
<li data-target="#mobileCarousel" data-slide-to="6"></li>
<li data-target="#mobileCarousel" data-slide-to="7"></li>
<li data-target="#mobileCarousel" data-slide-to="8"></li>
<li data-target="#mobileCarousel" data-slide-to="9"></li>
<li data-target="#mobileCarousel" data-slide-to="10"></li>
<li data-target="#mobileCarousel" data-slide-to="11"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-12">
First item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Second item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Third item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Fourth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Fifth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Sixth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Seventh item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Eighth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Nineth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Tenth item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Eleventh item
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
Twelveth item
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#mobileCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mobileCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Note you don't actually need the CSS (it just creates the layout for desktop sliders, centers the contents in each item (with flexbox) + colors, but I assume you already got those covered). CSS is un-prefixed and, in case it helps, you'll find the SCSS in the fiddle.
Also, you might want to set different min-heights for items on mobile/tablet/desktop.
Other than that, it's pretty clean... bootstrap. No custom JS, no custom CSS. Just markup.
Edit: (as per comment) If you don't want all sliders running at all times and prefer to initialize each based on a resize listener, when changing the #media interval (I recommend enquire.js for this - 0.8k minified, runs on any browser/device), place each carousel's markup in a script, with different id's:
<script id="desktop-markup" type="text/template">
<div id="desktopCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
<script id="tablet-markup" type="text/template">
<div id="tabletCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
<script id="mobile-markup" type="text/template">
<div id="mobileCarousel" class="carousel slide" data-ride="carousel">
<!-- carousel markup here -->
</div>
</script>
On page load and on changing the media interval, get the contents of the template according to current #media interval (i.e. $('#mobile-markup').html()), place it inside the designated DOM container and run .carousel() on it:
$('.carousel-container').html(
$('#mobile-markup').html()
).find('.carousel').carousel(options);
// where options is optional. :)
// see http://getbootstrap.com/javascript/#carousel-options
Related
I tried design a Web Page.
I am using carousel.
The Left and Right options doesn't work, Instead all the images gets added on the Vertical Manner.
<h3 style="text-align:center;">Top Visiting Sites</h3>
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="row" id="Places">
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
This is what i have used on html.
And this is the Js I have used.
for (var i = 0; i < total.length; i++) {
var stars = '<i class="glyphicon glyphicon-star"></i>';
var obj = sort[i];
$('#Places').append(`
<div class="carousel-item active">
<div class="col-md-3" style="border-right:2px solid gray;">
<div class="panel panel-info">
<div class="panel-body">
<div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
<h4><span> ${ obj.Name}</span></h4>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
</div>
</div>
`); }
You are adding all of your elements inside of the div with the class="item active". You need to add them to the carousel-inner div, each in a separate div with only the "item" class.
Your end result should look like this :
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="carousel-item active">
<!-- html of your first item -->
</div>
<div class="carousel-item">
<!-- html of your second item -->
</div>
<div class="carousel-item">
<!-- html of your third item -->
</div>
<div class="carousel-item">
<!-- html of your fourth item -->
</div>
</div>
</div>
The content inside append function misses the ending quote. Please check that.
$('#Places').append('
<div class="carousel-item">
<div class="col-md-3" style="border-right:2px solid gray;">
<div class="panel panel-info">
<div class="panel-body">
<div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
<h4><span> ${ obj.Name}</span></h4>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
</div>
</div>
');
Can you try and see whether the above with end quote works?
You should also have your carousal-inner class id as Places and remove the class=row div
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner" id="Places">
</div>
</div>
Also remove active class as it should be set only on the first item, which you can do separately.
Total 20 Images, I have to show 9 items in each slider so total 3 slider.
I tried this following link
Four items in bootstrap carousel Ng repeat?
<div class='greybg' ng-repeat="comment in location.comments">
<div class="row">
<div id="myCarousel{{location.comments[0]._id}}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner multiple_pictures" >
<div class="item" ng-class="{active:!$index}">
<div class="row" >
<div class="col-sm-4" ng-repeat="images in comment.images.slice(0,9)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1}}</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4" ng-repeat="images in comment.images.slice(9,18)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1+9}}</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4" ng-repeat="images in comment.images.slice(18,27)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1+18}}</div>
</div>
</div>
</div>
<a ng-if="comment.images.length>1" class="left carousel-control" href="#myCarousel{{location.comments[0]._id}}" role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a ng-if="comment.images.length>1" class="right carousel-control" href="#myCarousel{{location.comments[0]._id}}" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div></div></div>
But the image count will be dynamical so If am having 50 image means 6 times I have to write. How do i do this dynamically based upon image count.
I'm building a website using Bootstrap but I can't make the carousel work at all, the left and right nor the indicator will change the slide.
<div id="slideshow" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- 1st slide -->
<div class="item active" id="slide0">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6" >
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
<!-- second slide -->
<div class="item" id="slide1">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6" >
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>
this is the html markup, the carousel is displayed corretly and the slideshow work automatically but I can't go to the next/prev slide.
I tried to include this script:
$('.carousel').carousel({
interval: 3000
})
$('.carousel-control.left').click(function() {
$('#slide').carousel('prev');
});
$('.carousel-control.right').click(function() {
$('#slide').carousel('next');
});
still no luck, and yes bootstrap.js is linked to the html.
Any advice?
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
The indicators are not working cause the data-target is the id of carousel not slide.
data-target="#slideshow"
Your controls are outside the div#slideshow, remove the </div> just before the controls html code
You have a tag '</div>' unusefull just before 'Carousel Nav' comment :
Bootply : http://www.bootply.com/zqAmnp3ekY
Code :
<div id="slideshow" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- 1st slide -->
<div class="item active" id="slide0">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6">
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
<!-- second slide -->
<div class="item" id="slide1">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6">
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
</div>
<!-- </div> COMMENT THIS LINE-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>
I create menu in three level code in jsfiddle. but it doesn't work property. I want to design it like digikala.com. but I have problem.third level of menu does't show. please help me. sorry I am new in html
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid"
class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
buy100
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
منو اصلی<b class="caret"></b>
<ul class="nav navbar-nav dropdown-menu">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">
منو 1<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">
.col-sm-12
</div>
</div>
<div class="row">
<div class="col-sm-6">
.col-sm-6
</div>
<div class="col-sm-6">
.col-sm-6
</div>
</div>
<div class="row">
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-4">
.col-sm-4
</div>
</div>
<div class="row">
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
</div>
<div class="row">
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
</div>
<div class="row">
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
</div>
</li>
</ul>
</li>
<!--With Offsets
-->
<li class="dropdown yamm-fw">
منو2<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-4 col-sm-offset-4">
4 offset 4
</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">
3 offset 3
</div>
<div class="col-sm-3 col-sm-offset-3">
3 offset 3
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
6 offset 6
</div>
</div>
</li>
</ul>
</li>
<!--Aside Menu
-->
<li class="dropdown yamm-fw">
منو3<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-9">
<br>
<h3>
9
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--Nesting Menu
-->
<li class="dropdown yamm-fw">
منو4<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">
12
</div>
</div>
<div class="row">
<div class="col-sm-12">
12
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-4">
4
</div>
<div class="col-sm-4">
4
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
</ul>
</div>
</div>
finally I find my answer . you can see it here mega menu in three level. correct script is:
<script>
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
var menu = $(this).parent().find("ul");
var menupos = menu.offset();
if ((menupos.left + menu.width()) + 30 > $(window).width()) {
var newpos = -menu.width();
} else {
var newpos = $(this).parent().width();
}
menu.css({ left: newpos });
});
</script>
I am using twitter bootstrap version 3 and for some reason the width of the columns don't add up right.
Take a look at this shot: http://i.imgur.com/LhgqL12.png
The right column doesn't line up with the end of the carousel and I cannot figure out why!
Here's the html for the page:
<!-- navbar -->
<div class="col-md-12">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li class="dropdown">
Community <b class="caret"></b>
<ul class="dropdown-menu">
<li>Forum</li>
<li>IRC Chat</li>
<li>Twitter</li>
<li>Sales Twitter</li>
<li>Google+</li>
<li>Links</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> liamdawe <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>User CP</li>
<li>Private Messages</li>
<li>Admin CP <span class="badge badge-important">3</span></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- logo -->
<img src="/templates/default/images/logo.png" height="120" width="600" alt="logo" class="logo-center" />
</div>
</div>
<div class="row">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/uploads/carousel/1294630814id6gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Join our Minecraft server!</h3>
</div>
</div><div class="item">
<img src="/uploads/carousel/882399500id7gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Natural Selection 2 Out on the 30th for Linux!</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /.carousel -->
</div>
<!-- main content -->
<div class="row">
<!-- Articles -->
<div class="col-md-9">
<!-- notification -->
<div class="row">
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div>
<!-- new sales -->
<div class="row">
<div class="alert alert-success text-center">
<strong>Latest Games On Sale:</strong> <span class="label label-info">Steam</span> Sparkle 2 Evo, <span class="label label-info">Steam</span> Shadow Warrior Classic Redux, <span class="label label-info">Steam</span> Redshirt, <span class="label label-info">Steam</span> Gravity Badgers - See all
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">Our News</li>
<li >Featured Videos</li>
<li >News Elsewhere</li>
</ul>
<div id="maincontent">
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/549850194id2121gol.jpg">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Sdasd Asdasdasdasdasdasdasdasd</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:56 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p>
</div>
</div>
<div class="seperator"></div>
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/test-hhhhhhhhhhhhhhhhhhhh.2120" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/5407865id2120gol.">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Test Hhhhhhhhhhhhhhhhhhhh</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:52 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 0 Comments</p>
</div>
</div>
<div class="seperator"></div>
</div>
<div class="row">
<div class="span3">
<div class="pagination">
<ul><li class="disabled previouspage">Prev</li><li class="disabled">1</li><li class="disabled">/</li><li>99</li><li class="nextpage">Next</li></ul></div></div>
<div class="span2" style="padding-top: 18px; padding-bottom: 18px;">
<form name="form2" class="form-inline">
Pick Page: <select class="input-mini" name="jumpmenu" onchange="window.open(this.options[this.selectedIndex].value, '_self')"><option value="/home/page=1">1</option><option value="/home/page=2">2</option><option value="/home/page=3">3</option><option value="/home/page=4">4</option><option value="/home/page=5">5</option><option value="/home/page=6">6</option><option value="/home/page=7">7</option><option value="/home/page=8">8</option><option value="/home/page=9">9</option><option value="/home/page=10">10</option><option value="/home/page=11">11</option><option value="/home/page=12">12</option><option value="/home/page=13">13</option><option value="/home/page=14">14</option><option value="/home/page=15">15</option><option value="/home/page=16">16</option><option value="/home/page=17">17</option><option value="/home/page=18">18</option><option value="/home/page=19">19</option><option value="/home/page=20">20</option><option value="/home/page=21">21</option><option value="/home/page=22">22</option><option value="/home/page=23">23</option><option value="/home/page=24">24</option><option value="/home/page=25">25</option><option value="/home/page=26">26</option><option value="/home/page=27">27</option><option value="/home/page=28">28</option><option value="/home/page=29">29</option><option value="/home/page=30">30</option><option value="/home/page=31">31</option><option value="/home/page=32">32</option><option value="/home/page=33">33</option><option value="/home/page=34">34</option><option value="/home/page=35">35</option><option value="/home/page=36">36</option><option value="/home/page=37">37</option><option value="/home/page=38">38</option><option value="/home/page=39">39</option><option value="/home/page=40">40</option><option value="/home/page=41">41</option><option value="/home/page=42">42</option><option value="/home/page=43">43</option><option value="/home/page=44">44</option><option value="/home/page=45">45</option><option value="/home/page=46">46</option><option value="/home/page=47">47</option><option value="/home/page=48">48</option><option value="/home/page=49">49</option><option value="/home/page=50">50</option><option value="/home/page=51">51</option><option value="/home/page=52">52</option><option value="/home/page=53">53</option><option value="/home/page=54">54</option><option value="/home/page=55">55</option><option value="/home/page=56">56</option><option value="/home/page=57">57</option><option value="/home/page=58">58</option><option value="/home/page=59">59</option><option value="/home/page=60">60</option><option value="/home/page=61">61</option><option value="/home/page=62">62</option><option value="/home/page=63">63</option><option value="/home/page=64">64</option><option value="/home/page=65">65</option><option value="/home/page=66">66</option><option value="/home/page=67">67</option><option value="/home/page=68">68</option><option value="/home/page=69">69</option><option value="/home/page=70">70</option><option value="/home/page=71">71</option><option value="/home/page=72">72</option><option value="/home/page=73">73</option><option value="/home/page=74">74</option><option value="/home/page=75">75</option><option value="/home/page=76">76</option><option value="/home/page=77">77</option><option value="/home/page=78">78</option><option value="/home/page=79">79</option><option value="/home/page=80">80</option><option value="/home/page=81">81</option><option value="/home/page=82">82</option><option value="/home/page=83">83</option><option value="/home/page=84">84</option><option value="/home/page=85">85</option><option value="/home/page=86">86</option><option value="/home/page=87">87</option><option value="/home/page=88">88</option><option value="/home/page=89">89</option><option value="/home/page=90">90</option><option value="/home/page=91">91</option><option value="/home/page=92">92</option><option value="/home/page=93">93</option><option value="/home/page=94">94</option><option value="/home/page=95">95</option><option value="/home/page=96">96</option><option value="/home/page=97">97</option><option value="/home/page=98">98</option><option value="/home/page=99">99</option></select></form></div></div>
</div>
<!-- Sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<!-- Articles Sidebar -->
<ul class="list-group">
<li class="list-group-item"><i class="icon-heart"></i> Editor's Picks</li>
<li class="list-group-item"><i class="icon-star"></i> Popular this week</li>
<li class="list-group-item"><i class="icon-th-large"></i> View by Category</li>
<li class="list-group-item">
<form name="form1">
<select onchange="window.open(this.options[this.selectedIndex].value, '_self')" class="form-control">
<option>Pick One</option>
<option value="/articles/category/17">Coming Soon</option>
<option value="/articles/category/14">Competition</option>
<option value="/articles/category/7">Crowdfunding</option>
<option value="/articles/category/13">Desura</option>
<option value="/articles/category/1">Editorial</option>
<option value="/articles/category/20">FPS</option>
<option value="/articles/category/16">First Look</option>
<option value="/articles/category/9">Free Game</option>
<option value="/articles/category/8">Game Bundle</option>
<option value="/articles/category/4">Game Sale</option>
<option value="/articles/category/6">Indie Game</option>
<option value="/articles/category/18">Indie Game</option>
<option value="/articles/category/3">Interview</option>
<option value="/articles/category/10">MMO</option>
<option value="/articles/category/0">No Category</option>
<option value="/articles/category/11">Open Source</option>
<option value="/articles/category/21">RTS</option>
<option value="/articles/category/2">Review</option>
<option value="/articles/category/5">Steam</option>
<option value="/articles/category/12">Unity3D</option>
<option value="/articles/category/15">Wine</option>
</select>
</form>
</li>
<li class="list-group-item">Article Search</li>
<li class="list-group-item">Submit Article</li>
</ul>
<!-- twitter Sidebar -->
<div class="well well-sm">
<a class="twitter-timeline" href="https://twitter.com/gamingonlinux" data-widget-id="381375312019218432" height="400">Tweets by #gamingonlinux</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!-- Footer -->
<div class="row">
<div class="col-md-12">
<div class="well text-center">
<strong>GamingOnLinux</strong> the Linux Games website, Copyright © GamingOnLinux.com 2009-2014.
<br />Page generated in 0.025 seconds, MySQL queries: 10<br />
</div>
</div>
</div>
</div>
</div>
What I want is for the right panels width to extend to the end of the carousel, currently it falls short as you can see there is a gap on the right of blank space after the sidebar.
I think that the problem is not the right hand panel but a couple of other things.
First, the carousel is inside a .row but not inside a .col-md-12 mean there'll be a negative margin to the sides, but no padding on the col to negate that.
So add that in here:
<div class="row">
<div class="col-md-12">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
...
</div>
</div>
</div>
Second, you've nested some rows (.row) for your alert boxes. That's causing them to be pulled out of line because of the negative margin that rows have. You either need to add a col-md-12 around each alert (because the padding on cols negates the rows negative margin) or you remove the .row completely. That works because the div is just 100% width of the parent column which is fine.
So remove the row below:
<!-- notification -->
<div class="row"> <!-- REMOVE THIS -->
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div> <!-- REMOVE THIS CLOSING DIV TOO -->
Demo
Try to define your col-md-3 boostrap is a grid of 12, you have defined mid to be 9
also to avoid the padding of container / row create a .nopadding { padding:0 !important }