This is the effect I'm trying to achieve with Bootstrap 3 carousel
Instead of just showing one frame at a time, it displays N frames slide by side. Then when you slide (or when it auto slides), it shifts the group of slides like it does.
Can this be done with bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin...
Bootstrap 5 (Update 2021)
While the carousel is mostly the same in Bootstrap 5, the concept of left and right have changed to start and end since Bootstrap now has RTL support. Therefore the left/right classes have changed. Here's an example of the multi-item CSS for 4 items (25% width columns)...
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
Since jQuery is no longer required, we use vanilla JS to clone the slides into the carousel-item divs..
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
// number of slides per carousel-item
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
Bootstrap 5 Multi-item Carousel Demo
Bootstrap 4 (Update 2019)
The carousel has changed in 4.x, and the multi-slide animation transitions can be overridden like this...
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0 (show 4, advance 1 at a time)
Bootstrap 4.1.0 (show 3, advance 1 at a time)
Bootstrap 4.1.0 (advance all 4 at once)
Bootstrap 4.3.1 responsive (show multiple, advance 1)new
Bootstrap 4.3.1 carousel with cardsnew
Another option is a responsive carousel that only shows and advances 1 slide on smaller screens, but shows multiple slides are larger screens. Instead of cloning the slides like the previous example, this one adjusts the CSS and use jQuery only to move the extra slides to allow for continuous cycling (wrap around):
Please don't just copy-and-paste this code. First, understand how it works.
Bootstrap 4 Responsive (show 3, 1 slide on mobile)
#media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
<div class="container-fluid">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Example - Bootstrap 4 Responsive (show 4, 1 slide on mobile)
Example - Bootstrap 4 Responsive (show 5, 1 slide on mobile)
Bootstrap 3
Here is a 3.x example on Bootply: http://bootply.com/89193
You need to put an entire row of images in the item active. Here is another version that doesn't stack the images at smaller screen widths: http://bootply.com/92514
EDIT Alternative approach to advance one slide at a time:
Use jQuery to clone the next items..
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
And then CSS to position accordingly...
Before 3.3.1
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
After 3.3.1
.carousel-inner .item.left.active {
transform: translateX(-33%);
}
.carousel-inner .item.right.active {
transform: translateX(33%);
}
.carousel-inner .item.next {
transform: translateX(33%)
}
.carousel-inner .item.prev {
transform: translateX(-33%)
}
.carousel-inner .item.right,
.carousel-inner .item.left {
transform: translateX(0);
}
This will show 3 at time, but only slide one at a time:
Bootstrap 3.x Demo
Please don't copy-and-paste this code. First, understand how it works. This answer is here to help you learn.
Doubling up this modified bootstrap 4 carousel only functions half correctly (scroll loop stops working)
how to make 2 bootstrap sliders in single page without mixing their css and jquery?
Bootstrap 4 Multi Carousel show 4 images instead of 3
All the above solutions are hacky and buggy. Don't even try. Use other libs. The best I have found - http://sachinchoolur.github.io/lightslider
Works great with bootstrap, does not add junk html, highly-configurable, responsive, mobile-friendly etc...
$('.multi-item-carousel').lightSlider({
item: 4,
pager: false,
autoWidth: false,
slideMargin: 0
});
Can this be done with bootstrap 3's carousel? I'm hoping I won't have
to go hunting for yet another jQuery plugin
As of 2013-12-08 the answer is no. The effect you are looking for is not possible using Bootstrap 3's generic carousel plugin. However, here's a simple jQuery plugin that seems to do exactly what you want http://sorgalla.com/jcarousel/
This is a working twitter bootstrap 3.
Here is the javascript:
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
And the css:
.carousel-inner .active.left { left: -33%; }
.carousel-inner .active.right { left: 33%; }
.carousel-inner .next { left: 33% }
.carousel-inner .prev { left: -33% }
.carousel-control.left { background-image: none; }
.carousel-control.right { background-image: none; }
.carousel-inner .item { background: white; }
You can see it in action at this Jsfiddle
The reason i added this answer because the other ones don't work entirely. I found 2 bugs inside them, one of them was that the left arrow generated a strange effect and the other was about the text getting bold in some situations witch can be resolved by setting the background color so the bottom item wont be visible while the transition effect.
Update 2019-03-06 -- Bootstrap v4.3.1
It seems the new Bootstrap version adds a margin-right: -100% to each item, therefore in the responsive solution given in the most upvoted answer in here, this property should be reset, e.g.:
.carousel-inner .carousel-item {
margin-right: inherit;
}
A working codepen with v4.3.1 in LESS.
This is what worked for me. Very simple jQuery and CSS to make responsive carousel works independently of carousels on the same page. Highly customizable but basically a div with white-space nowrap containing a bunch of inline-block elements and put the last one at the beginning to move back or the first one to the end to move forward. Thank you insertAfter!
$('.carosel-control-right').click(function() {
$(this).blur();
$(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() {
$(this).blur();
$(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});
#media (max-width: 300px) {
.carosel-item {
width: 100%;
}
}
#media (min-width: 300px) {
.carosel-item {
width: 50%;
}
}
#media (min-width: 500px) {
.carosel-item {
width: 33.333%;
}
}
#media (min-width: 768px) {
.carosel-item {
width: 25%;
}
}
.carosel {
position: relative;
background-color: #000;
}
.carosel-inner {
white-space: nowrap;
overflow: hidden;
font-size: 0;
}
.carosel-item {
display: inline-block;
}
.carosel-control {
position: absolute;
top: 50%;
padding: 15px;
box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
transform: translateY(-50%);
border-radius: 50%;
color: rgba(0, 0, 0, 0.5);
font-size: 30px;
display: inline-block;
}
.carosel-control-left {
left: 15px;
}
.carosel-control-right {
right: 15px;
}
.carosel-control:active,
.carosel-control:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
<a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
<div class="carosel-inner">
<img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&text=6" />
</div>
<a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
<a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
<div class="carosel-inner">
<img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&text=6" />
</div>
<a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
Natively it is overly complicated and messy to achieve this just with Bootstrap 3.4 Carousel and Bootstrap 4.5 Carousel javascript component features.
OK so you do not want yet another jQuery plugin... I get that.
In my opinion if you're already forced to use jQuery in your project, you might as well have a decent jQuery carousel plugin with lots powerful options.
slick.js - the last carousel you'll ever need - Ken Wheeler
_ _ _ _
___| (_) ___| | __ (_)___
/ __| | |/ __| |/ / | / __|
\__ \ | | (__| < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
|__/
It truly is the last jQuery carousel plugin you will ever need.
Here are minified slick.js distribution sizes...
slick-carousel/1.9.0/slick.min.css - 1,369 bytes (4 KB on disk)
slick-carousel/1.9.0/slick.min.js - 43,881 bytes (45 KB on disk)
Some scenarios you may be faced with...
Unfortunately if you are just pulling distributed Bootstrap 3 or 4 js and css minified files from a CDN or where ever, then yeah it's another bulky jQuery plugin added to your website network requests.
If you are using NPM, Gulp, Bower or whatever you can just exclude Bootstraps carousel.js and carousel.scss vendors to reduce the final compiled sizes of your css and js files. Excluding all unused Bootstrap js and scss vendors will help reduced your final compiled output files anyway.
Added bonuses using slick.js...
Touch/swipe to scroll carousel on devices (you can drag on desktop too)
Define carousel options for each responsive breakpoint
Set mobileFirst: true or false to handle responsive breakpoint direction
Set how many slides (columns) you wish to show or scroll (define for each breakpoint)
Vertical and horizontal carousels
.on events for everything
Loads of options
Bootstrap 3 multi column slick carousel example
See codepen links below to test examples responsively...
codepen.io/joshmoto/pen/GRNEBXo - scss example with Bootstrap 3 style arrows and dots
codepen.io/joshmoto/pen/RwogBJP - same code below simplest example...
// bootstrap 3 breakpoints
const breakpoint = {
// extra small screen / phone
xs: 480,
// small screen / tablet
sm: 768,
// medium screen / desktop
md: 992,
// large screen / large desktop
lg: 1200
};
// bootstrap 3 responsive multi column slick carousel
$('#slick').slick({
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
pauseOnHover: false,
infinite: true,
dots: false,
arrows: false,
speed: 1000,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [{
breakpoint: breakpoint.xs,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: breakpoint.sm,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: breakpoint.md,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: breakpoint.lg,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
]
});
/* .slick-list emulates .row */
#slick .slick-list {
margin-left: -15px;
margin-right: -15px;
}
/* .slick-slide emulates .col- */
#slick .slick-slide {
padding-right: 15px;
padding-left: 15px;
}
#slick .slick-slide:focus {
outline: none;
}
<!-- jquery 3.3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bootstrap 3.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- bootstrap 3 responsive multi column slick carousel example -->
<header>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header" style="float:left!important;">
<a class="navbar-brand" href="#">Slick in Bootstrap 3</a>
</div>
<div class="navbar-text pull-right" style="margin:15px!important;">
<a class="navbar-link" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</div>
</nav>
</header>
<main>
<div class="container">
<div id="slick">
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
</div>
</div>
</main>
Bootstrap 4 multi column slick carousel example
See codepen links below to test example responsively...
codepen.io/joshmoto/pen/XWNgYYR - scss example with Bootstrap 4 style arrows and dots
codepen.io/joshmoto/pen/MWboBVQ - same code below simplest example...
// bootstrap 4 breakpoints
const breakpoint = {
// small screen / phone
sm: 576,
// medium screen / tablet
md: 768,
// large screen / desktop
lg: 992,
// extra large screen / wide desktop
xl: 1200
};
// bootstrap 4 responsive multi column slick carousel
$('#slick').slick({
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
pauseOnHover: false,
infinite: true,
dots: false,
arrows: false,
speed: 1000,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [{
breakpoint: breakpoint.sm,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: breakpoint.md,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: breakpoint.lg,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: breakpoint.xl,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
]
});
/* .slick-list emulates .row */
#slick .slick-list {
margin-left: -15px;
margin-right: -15px;
}
/* .slick-slide emulates .col- */
#slick .slick-slide {
padding-right: 15px;
padding-left: 15px;
}
#slick .slick-slide:focus {
outline: none;
}
<!-- jquery 3.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- bootstrap 4.5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js"></script>
<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- bootstrap 4 responsive multi column slick carousel example -->
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand mr-auto" href="#">Slick in Bootstrap 4</a>
<a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</nav>
</header>
<main class="py-4">
<div class="container">
<div id="slick">
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
</div>
</div>
</main>
The most popular answer is right but I think the code is uselessly complicated.
With the same css, this jquery code is easier to understand I believe:
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function() {
var item = $(this);
item.siblings().each(function(index) {
if (index < 4) {
$(this).children(':first-child').clone().appendTo(item);
}
});
});
try this.....it work in mine....
code:
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="span4" style="padding-left: 18px;">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
</div>
</div>
<div class="item">
<div class="span4" style="padding-left: 18px;">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
</div>
</div>
</div>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child"));
$(".item.active:last-child").insertBefore($(".item:first-child"));
});
.item.active,
.item.active + .item,
.item.active + .item + .item {
width: 33.3%;
display: block;
float:left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
<!-- 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" role="listbox">
<div class="item active">
<img data-src="holder.js/300x200?text=1">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=2">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=3">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=4">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=5">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=6">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=7">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>
UPDATE 2022 - BOOTSTRAP 5 CAROUSEL WITH MULTIPLE ITEMS
You can manage this task absolutely with bootstrap 5 CSS customization
This is a fantastic tutorial from a fantastic web developer
Bootstrap 5 Carousel Multiple Items Increment By 1
well done tutorial with intermediate live results change after change
If you wanna increase the size of the slice of the 4th card (I suggest this to give the user a better sharper hint that there is a following card), just reduce from 33.333333% to e.g. 30% this
#media (min-width: 768px) {
.carousel-inner {
display: flex;
}
.carousel-item {
margin-right: 0;
flex: 0 0 33.333333%;
display: block;
}
}
I had the same problem and the solutions described here worked well. But I wanted to support window size (and layout) changes. The result is a small library that solves all the calculation. Check it out here: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger
To make the script work, you have to add a new <div> wrapper with the class .item-content
directly into your .item <div>. Example:
<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-content">
First page
</div>
</div>
<div class="item active">
<div class="item-content">
Second page
</div>
</div>
</div>
</div>
Usage of this library:
socialbitBootstrapCarouselPageMerger.run('div.carousel');
To change the settings:
socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82;
Example:
As you can see, the carousel gets updated to show more controls when you resize the window. Check out the watchWindowSizeTimeout setting to control the timeout for reacting to window size changes.
Try this code
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a>
</div>
I've seen your question and answers, and made a new responsive and flexible multi items carousel Gist. you can see it here:
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
You can add multiple li in ol tag that has attribute as class with value "carousel-indicators" and with data-slide-to has sequential values like 0 to 6 or 0 to 9.
than you just need to copy and paste the div which has attribute as class with value "item".
This works for me.
<div data-ride="carousel" class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel" class=""></li>
<li data-slide-to="2" data-target="#myCarousel" class="active"></li>
<li data-slide-to="3" data-target="#myCarousel" class=""></li>
<li data-slide-to="4" data-target="#myCarousel" class=""></li>
<li data-slide-to="5" data-target="#myCarousel" class=""></li>
<li data-slide-to="6" data-target="#myCarousel" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/carousel/11.jpg"
class="first-slide">
</div>
<div class="item">
<img alt="Second slide" src="images/carousel/22.jpg"
class="second-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/33.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/44.jpeg"
class="fourth-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/55.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/66.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/77.jpg"
class="third-slide">
</div>
</div>
<a data-slide="prev" role="button" href="#myCarousel"
class="left carousel-control"> <span aria-hidden="true"
class="glyphicon glyphicon-chevron-left"></span> <span
class="sr-only">Previous</span>
</a> <a data-slide="next" role="button" href="#myCarousel"
class="right carousel-control"> <span aria-hidden="true"
class="glyphicon glyphicon-chevron-right"></span> <span
class="sr-only">Next</span>
</a>
</div>
Reference to above link i added 1 new thing called show 4 at time, slide one at a time for bootstrap 3 (v3.3.7)
CODEPLY:- https://www.codeply.com/go/eWUbGlspqU
LIVE SNIPPET
(function(){
$('#carousel123').carousel({ interval: 2000 });
}());
(function(){
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<4;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}());
body {
margin-top: 50px;
}
.carousel-showmanymoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
display: none;
}
#media all and (min-width: 768px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {
display: block;
}
}
#media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
#media all and (min-width: 992px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -25%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 25%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-2,
.carousel-showmanymoveone .carousel-inner .cloneditem-3 {
display: block;
}
}
#media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Related
I get reference from here :
https://getbootstrap.com/docs/4.0/components/jumbotron/
https://coreui.io/demo/#base/jumbotron.html
My script like this :
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card>
<b-row v-for="row in formattedClubs">
<b-col v-for="club in row" cols>
<b-jumbotron header="" lead="">
<b-link to="#">
<b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
</b-link>
<b-link href="#" class="card-header-action btn-close">
{{club.description}}
</b-link>
<p>{{club.price}}</p>
<p>{{club.country}}</p>
<div class="text-center my-3">
<b-btn variant="primary">Add</b-btn>
</div>
</b-jumbotron>
</b-col>
</b-row>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'jumbotrons',
data () {
return{
clubs: [
{id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
{id:2, description:'liverpool has salah', price:900, country:'england'},
{id:3, description:'mu fans', price:800, country:'england'},
{id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
{id:5, description:'arsenal player', price:600, country:'england'},
{id:6, description:'tottenham in london', price:500, country:'england'},
{id:7, description:'juventus stadium', price:400, country:'italy'},
{id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
{id:9, description:'barcelona in the spain', price:200, country:'spain'},
{id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
]
}
},
computed: {
formattedClubs() {
return this.clubs.reduce((c, n, i) => {
if (i % 5 === 0) c.push([]);
c[c.length - 1].push(n);
return c;
}, []);
}
}
}
</script>
<style scoped>
.jumbotron {
padding: 0.5rem 0.5rem;
}
</style>
The result view like this :
Based on the image above, it can be seen that each box has a different height. This is due to different lengths of description
How do I make it so that the height of all the boxes is the same even though the length of description is different?
You should use Cards instead of Jumbotrons, then you can simply use the card group.
https://getbootstrap.com/docs/4.0/components/card/#card-groups
They will all have the same size.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Vue-Bootstrap also supports card groups with equal size as you can see here https://bootstrap-vue.js.org/docs/components/card/#card-groups
Not used vue before but you can handle the css using flexbox.
.Wrapper {
display: flex;
flex-wrap: wrap;
}
.Item {
background: #f5f5f5;
display: flex;
flex: 0 1 180px;
flex-direction: column;
text-align: center;
margin: 10px;
padding: 5px;
border: 1px solid #ddd;
}
.ImgWrap {
position: relative;
background: #fff;
flex: 0 1 180px;
width: 100%;
display: block;
overflow: hidden;
}
.ImgWrap img {
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.Description {
flex:1;
padding: 10px 0;
font-size: 0.9em;
word-wrap: break-word;
}
.Price,
.Country {
background: #eaeaea;
border: 1px solid #ddd;
border-radius: 3px;
margin: 2px 0 10px 0;
padding: 5px;
color: #8a8a8a;
}
.Btn {
background: #20a8d8;
border: none;
border-radius: 3px;
color: #fff;
padding: 10px;
}
<div class="Wrapper">
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p>This is some descriptive text.</p>
</div>
<p class="Price">800</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p> dapibus congue odio placerat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, ante ac vulputate malesuada, nunc ex lobortis.</p>
</div>
<p class="Price">800</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p>Nam accumsan aliquet congue. Quisque orci tortor, ullamcorper a auctor sit amet, luctus non ante. Proin rutrum purus quis tellus pulvinar, at tincidunt odio sagittis. Nam aliquet risus sit amet suscipit dictum. Sed sed porta urna. </p>
</div>
<p class="Price">1000</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p>Nam accumsan aliquet congue. Quisque orci tortor.</p>
</div>
<p class="Price">700</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
<div class="Item">
<div class="ImgWrap">
<img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
</div>
<div class="Description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non pellentesque elit, sit amet placerat nisl. Quisque hendrerit risus nisl, vel dignissim est congue in.</p>
</div>
<p class="Price">600</p>
<p class="Country">England</p>
<input class="Btn" type="submit" value="Add">
</div>
</div>
Just use h-100 on the Jumbotron...
<b-col v-for="club in row" cols>
<b-jumbotron header="" lead="" class="h-100">
<b-link to="#">
<b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
</b-link>
<b-link href="#" class="card-header-action btn-close">
{{club.description}}
</b-link>
<p>{{club.price}}</p>
<p>{{club.country}}</p>
<div class="text-center my-3">
<b-btn variant="primary">Add</b-btn>
</div>
</b-jumbotron>
</b-col>
This is all that is needed since the cols inside the row are the same height (based on the height of the tallest). Bootstrap 4 uses flexbox.
I've copy and paste the Carousel code example of the Bootstrap 4 official website, but I've realised that this resource isn't responsive.
You can try in this page:
https://getbootstrap.com/docs/4.0/examples/carousel/
If you resize or open using a small cellphone for instance, the text will disapear. The image isn't responsive as well...
What I need do to make the image and the text responsives?
The HTML code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
bottom: 3rem;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
If you remove the class d-none the text displays when you resize the window. Here's more info on display properties: https://getbootstrap.com/docs/4.0/utilities/display/
Since your using bootstrap library, they have a class to simplify an image being responsive all you have to do is include the class "img-responsive" to the image you have.
Ex:
<img class="first-slide" class="img-responsive" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
.img-fluid is the way to go if it is bootstrap 4 you're using.
I'm try to get a Bootstrap 3 carousel to shrink proportionately as the screen size shrinks - i.e. I want it to stay the same shape as it get's smaller. Out of the box it just squishes down (get's narrower, but not shorter). I got the image to do what I want, but the background of the carousel doesn't follow. I've tried all sorts of things, but can't figure it out. Any hint would be appreciated. Thanks!
Unfortunately I'm not able to post a pic here yet. Basically when it's sized down the grey background of the carousel sticks out from under the image.
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
max-height: 500;
max-width: 753px;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
margin-top: 50px;
}
/* Since positioning the image, we need to help out the caption */
/*.carousel-caption {
z-index: 10;
}*/
/* Declare heights because of positioning of img element */
.carousel .item {
width: 100%;
height: 500px;
min-height: 100px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: auto;
height: auto;
}
<div id="myCarousel" class="carousel slide" data-ride="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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="img/htff-1.jpg" alt="First slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
</div> -->
</div>
</div>
<div class="item">
<img class="second-slide" src="img/lostDivision-025.JPG" alt="Second slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div> -->
</div>
</div>
<div class="item">
<img class="third-slide" src="img/sballard_01.jpg" alt="Third slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div> -->
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
Are you loading .js files in correct sequence ?
I loaded them in this sequence .... and your code is running perfectly.
bootstrap.min.css
jquery-2.1.3.min.js
bootstrap.min.js
Try adding height:100% to your last selector. This will make your container retain its shape while still resizing when the browser size changes.
i have a little big problem with a project in Bootstrap. I have two files with the same code: ctr+a to select all the code from the original file, ctrl+c to copy it then ctrl+v to paste it in the second file.
I'm currently using Bootstrap 3.
The result is this:
The original file is the one in the bottom half of the image and the copy is the one in the upper half.
Both files are in the same directory. The code is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="shortcut icon" href="../../assets/ico/favicon.png"> -->
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/mainhardt.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Associació d'Amics de Mainhardt</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Inici</li>
<li class="dropdown">
Publicacions <b class="caret"></b>
<ul class="dropdown-menu">
<li>Revistes</li>
<li>Llibres</li>
</ul>
</li>
<li>Intercanvi</li>
<li class="dropdown">
Jornades d'Estudis Gaspatxers <b class="caret"></b>
<ul class="dropdown-menu">
<li>I Jornades "El Carlisme a les nostres terres"</li>
<li>II Jornades "Memòries al voltant d'una guerra"</li>
<li>III Jornades "Retalls de cultura popular"</li>
</ul>
</li>
<li class="dropdown">
Gent d'ací <b class="caret"></b>
<ul class="dropdown-menu">
<li>Carme Vidal</li>
<li>Jorge Julve</li>
<li>Mar de fons</li>
</ul>
</li>
<li class="dropdown">
Exposicions <b class="caret"></b>
<ul class="dropdown-menu">
<li>Eclipse 1905</li>
<li>Cara a cara (Carme Vidal & Joan Sanz)</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron" style="background-color: #E3F6CE;">
<img class="img-responsive" src="img/LOGO GRANDE.png"/>
</div>
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">
<img class="imagen-slider" src="img/slider/desembre2009.jpg" alt="Antennae Galaxies" />
</a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">
<img class="imagen-slider" src="img/slider/abril2010.jpg" alt="Carina Caterpillar" />
</a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/">
<img class="imagen-slider" src="img/slider/cartelljornadesgaspatxeres2.jpg" alt="Light Echo" />
</a>
<div class="carousel-caption">
<p>Light Echo From Star V838 Monocerotis</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/">
<img src="img/ngc5866.jpg" alt="Galaxy NGC5866" />
</a>
<div class="carousel-caption">
<p>Galaxy NGC 5866</p>
<p>Hubblesite.org »</p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="separador"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Quí som?</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Publicacions</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Intercanvi</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<div class="separador"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h3>Jornades d'estudis Gaspatxers</h3></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Gent d'ací</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Exposicions</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<div class="separador_grande"></div>
<div class="jumbotron" style="background-color: #333333;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-3 contacte">
<h4>Contacte</h4>
<p class="contacte_info">
<img src="img/contacte.ico"> Associació d'amics de Mainhardt<br>
<img src="img/mail.ico"> correu#1and1.es<br>
<img src="img/tlf.ico"> tlf contacte<br>
</p>
</div>
<!-- Formulari Contacte
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 contacte">
<h2>Formulari de contacte</h2>
<form role="form">
<div class="form-group input-group-sm">
<label for="inputEmail1">Direcció e-mail</label>
<input type="email" class="form-control" id="inputEmail1" placeholder="e-mail">
</div>
<div class="form-group">
<label for="inputName">Nom</label>
<input type="text" class="form-control" id="inputName" placeholder="Nom">
</div>
<div class="form-group">
<label for="inputText">Missatge</label>
<textarea class="form-control" rows="3" id="inputText" placeholder="Missatge"></textarea>
</div>
<button type="submit" class="btn btn-default">Envia</button>
</form>
</div>
Fi Formulari Contacte -->
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 contacte">
<ul class="nav navbar-nav contacte_info menu_abajo">
<li><h4>Inici</h4></li>
<li>
<h4>Publicacions</h4>
<ul>
<li>Revistes</li>
<li>Llibres</li>
</ul>
</li>
<li><h4>Intercanvi</h4></li>
<li>
<h4>Jornades Gaspatxeres</h4>
<ul>
<li>I Jornades</li>
<li>II Jornades</li>
<li>II Jornades</li>
</ul>
</li>
<li>
<h4>Gent d'aci</h4>
<ul>
<li>Carme Vidal</li>
<li>Jorge Julve</li>
<li>Mar de fons</li>
</ul>
</li>
<li>
<h4>Exposicions</h4>
<ul>
<li>Eclipse 1905</li>
<li>Cara a Cara</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="separador_grande"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 contacte">
<p class="contacte_info copyright">Avís legal. Copyright </p>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
And this is the css with some modifications i made (mainhardt.css)
body
{
font-family: arial,helvetica,sans-serif;
background-color: rgb(255, 252, 229);
}
.container
{
background-color: #E3F6CE;
}
p{
text-align: justify;
}
.img_small
{
max-height: 100px;
max-width: 175px;
}
.contacte
{
color: #999;
}
.contacte_info
{
font-size: 12px;
}
.copyright
{
text-align: center;
}
.menu_abajo li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.menu_abajo > li > ul > li
{
display: block;
}
.separador
{
margin-top: 30px;
margin-bottom: 30px;
}
.separador_grande
{
margin: 60px 0 60px 0;
}
.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px 15px 5px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
}
.imagen-slider
{
margin: 0 auto 0;
}
.carousel-inner
{
background-image: url(../img/glyphicons-halflings-white.png);
}
See the address bar in the second picture. You have zoomed out in the second picture...
Zooming in will solve your problem..
How to make the caption of a Twitter Bootstrap thumbnail be placed to the right of the image instead of below? Preferably in CSS. So far I am just using existing tags as my css knowledge is very limited.
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail span4">
<div class="span2">
<img src="http://placehold.it/120x160" alt="">
</div>
<div class="caption">
<h5>Thumbnail label </h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
</li>
</ul>
With a slight modification of your HTML, and the addition of a new class (right-caption), a few CSS rules should cover you.
HTML
<div class="thumbnail right-caption span4">
<img src="http://placehold.it/120x160" alt="">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
Note: I'm taking the <img> out of the <div> you originally wrapped it in.
CSS
.thumbnail.right-caption > img {
float: left;
margin-right: 9px;
}
.thumbnail.right-caption {
float: left;
}
.thumbnail.right-caption > .caption {
padding: 4px;
}
Note: The margin and padding are just stylistic; floating is the key.
JSFiddle
No additional css. Change a/span tags to div if needed
<a href="..." class="thumbnail clearfix">
<img src="..." class="pull-left">
<span class="caption pull-right">
Lorem ipsum
</span>
</a>