CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mv27
Mv27

Reputation: 560

Keep bootstrap slider horizantal below 991px

I have made a Bootstrap slider with a CSS grid. A demo can be [seen here][1].

When I resize my screen to < 991px the slider is turning vertical, and going out of the CSS grid in the class item5. I would like the slider is turning into 1 row like this:

enter image description here

But to be honest I do not know where to start if it is possible at all. Does anybody have an idea how to do this?

Best regards.

      .wrapper {
        display:grid;
        grid-template-columns:repeat(12,1fr);
        grid-gap: 10px;
        background-color: #fff;
        border: 10px solid #fff;
      } 

      .wrapper > div {
        background-color: #eee;
        padding: 1em;
        box-sizing: border-box;
      }

      .wrapper > div:nth-child(odd) {
        background-color: #ddd;
      }
      
      .item5 {
          grid-row: 3 / 6;
          grid-column: 1 / 13;
          height: 290px;
        }

      @media only screen and (max-width: 600px) {
        .wrapper {
          display:grid;
          grid-template-columns:repeat(12,1fr);
          grid-gap: 10px;
        } 
        .item5 {
          grid-row: 3 / 6;
          grid-column: 1 / 13
          height: 250px;
        }
        
      }

      /* Carousel */
      body{padding-top:20px;}
    .carousel {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
    }
    /* The controlsy */
    .carousel-control {
      left: -12px;
        height: 40px;
      width: 40px;
        background: none repeat scroll 0 0 #222222;
        border: 4px solid #FFFFFF;
        border-radius: 23px 23px 23px 23px;
        margin-top: 90px;
    }
    .carousel-control.right {
      right: -12px;
    }
    /* The indicators */
    .carousel-indicators {
      right: 50%;
      top: auto;
      bottom: -10px;
      margin-right: -19px;
    }
    /* The colour of the indicators */
    .carousel-indicators li {
      background: #cecece;
    }
    .carousel-indicators .active {
    background: #428bca;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <body>
    <div class="wrapper">
        <div class="item5">
          <div id="Carousel" class="carousel slide">
      
            <ol class="carousel-indicators">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
                <li data-target="#Carousel" data-slide-to="2"></li>
            </ol>
           
            
            <div class="carousel-inner">
              
              <div class="item active">
                <div class="row">
                  <div class="col-xs-12 col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-12 col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-12 col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-12 col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
               
              <div class="item">
                <div class="row">
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
               
              <div class="item">
                <div class="row">
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
            </div>
            <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
          </div>
        </div>
      </div>
     </body>
    </html>

Upvotes: 3

Views: 218

Answers (1)

Piyush Verma
Piyush Verma

Reputation: 295

As you are using md-3 which below 991 px becomes 100% you can use sm or xs instead for that.Hope it helps.

.wrapper {
        display:grid;
        grid-template-columns:repeat(12,1fr);
        grid-gap: 10px;
        background-color: #fff;
        border: 10px solid #fff;
      } 

      .wrapper > div {
        background-color: #eee;
        padding: 1em;
        box-sizing: border-box;
      }

      .wrapper > div:nth-child(odd) {
        background-color: #ddd;
      }
      
      .item5 {
          grid-row: 3 / 6;
          grid-column: 1 / 13;
          height: 290px;
        }

      @media only screen and (max-width: 600px) {
        .wrapper {
          display:grid;
          grid-template-columns:repeat(12,1fr);
          grid-gap: 10px;
        } 
        .item5 {
          grid-row: 3 / 6;
          grid-column: 1 / 13
          height: 250px;
        }
        
      }

      /* Carousel */
      body{padding-top:20px;}
    .carousel {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
    }
    /* The controlsy */
    .carousel-control {
      left: -12px;
        height: 40px;
      width: 40px;
        background: none repeat scroll 0 0 #222222;
        border: 4px solid #FFFFFF;
        border-radius: 23px 23px 23px 23px;
        margin-top: 90px;
    }
    .carousel-control.right {
      right: -12px;
    }
    /* The indicators */
    .carousel-indicators {
      right: 50%;
      top: auto;
      bottom: -10px;
      margin-right: -19px;
    }
    /* The colour of the indicators */
    .carousel-indicators li {
      background: #cecece;
    }
    .carousel-indicators .active {
    background: #428bca;
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <body>
    <div class="wrapper">
        <div class="item5">
          <div id="Carousel" class="carousel slide">
      
            <ol class="carousel-indicators">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
                <li data-target="#Carousel" data-slide-to="2"></li>
            </ol>
           
            
            <div class="carousel-inner">
              
              <div class="item active">
                <div class="row">
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
               
              <div class="item">
                <div class="row">
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
               
              <div class="item">
                <div class="row">
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
            </div>
            <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
          </div>
        </div>
      </div>
     </body>
    </html>

Upvotes: 1

Related Questions