Web Bootstrap Tips

Carousel responsive height – carousel.css trick for proper responsive height
.carousel-inner > .item > img{
height:auto!important;
position:relative!important;
}
.carousel .item{
overflow:hidden!important;
height:auto;
}
.carousel-inner{
position: relative;
width: 100%;
overflow: hidden;
}


Carousel fade transition – fade transition instead of slide
This can be accomplished using only CSS. To change the carousel to a fade transition instead of slide, use one the following snippets (LESS or standard CSS).

LESS

// Fade transition for carousel items
.carousel {
.item {
left: 0 !important;
.transition(opacity .4s); //adjust timing here
}
.carousel-control {
background-image: none; // remove background gradients on controls
}
// Fade controls with items
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
}
}

Plain CSS

/* Fade transition for carousel items */
.carousel .item {
left: 0 !important;
-webkit-transition: opacity .4s; /*adjust timing here */
-moz-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
}
.carousel-control {
background-image: none !important; /* remove background gradients on controls */
}
/* Fade controls with items */
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
}