There is a block of pictures with a net on bootstrap , which I want to do in this way: at resolutions of 1920px and higher, to 1920px 6 pictures in 2 rows entirely, and at lower resolutions up to 1200px - 4 pictures entirely and 2 half sides to the left and right. Tried to do through styles for

 .row { width:120%; overflow:hidden; }

But unfortunately, hiding overflow does not work. How can this be done?

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row no-gutters"> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video1"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video2"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video3"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video4"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video1"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video3"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video5"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video6"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video7"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video8"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video5"> </a> </div> <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12"> <a class="video-box" href="#"> <img class="img-fluid" src="http://via.placeholder.com/250x150" alt="video7"> </a> </div> </div>

  • Responsive utilities can hide and show the block at different screen resolutions, 2 classes can be superimposed on 1 block, hide when> and show when < - RifmaMan
  • @RifmaMan explain how to use the hidden properties on half the element? - Vasya
  • one
    Look at .hidden-lg-down and .hidden-xl-up I think initially you need to load all 6 blocks and give the side class .hidden-lg-down (plus 2 more sides on the sides but hidden by adding the class .hidden-xl-up ) . But here I am not sure what I wrote correctly, it is worth playing around with the classes. - RifmaMan

0