Bootstrap Carousel Full Screen


also check this for live example:


I use full width slider in almost every bootstrap project. Here’s my approach to it:

1) Wrap the carousel into a custom full width container (outside any .container class)
2) Set the width of the image slides and its container to 100%
3) Set the height of the slider as desired

And it goes like this:

<section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="" alt="Slide1" />
            <div class="item">
                <img src="" alt="Slide2" />
            <div class="item">
                <img src="" alt="Slide3" />
        <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>

And the CSS would look like this:

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 600px; /*slider height*/
.carousel .item img {
    width: 100%; /*img width*/
/*full width container*/
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;

How to fix “Headers already sent” error in PHP

The following worked for me


  // code 



internet explorer – Detect IE version in Javascript – Stack Overflow

I did the following:

function isIE (){var myNav = navigator.userAgent.toLowerCase();return(myNav.indexOf('msie')!=-1)? parseInt(myNav.split('msie')[1]):false;}
if(isIE()){// is IE}else{// Other browser}

internet explorer – Detect IE version in Javascript – Stack Overflow.