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;


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close