It is necessary to adapt to create such a section using the bootstrap grid. Please tell me how to do better? Set absolutely with a blue background or how ...?

enter image description here

  • These are 2 different pictures, they are just located nearby and the blue background covers them. I thought I would set the blue background for the col-md content, but at the zoom the background leaves and you can see the "glueing" of two photos. - Alexander
  • Does nobody know? - Alexander
  • Popular wisdom says: "Do not try to cram nevpihuemoe." The bootstrap grid is just a handy tool and if it doesn’t fit, then just don’t use it for this page element, or paint a design that will fit completely. If you still make this element by pushing it into the net of the bootstrap, then it will still not be the bootstrap mesh :) - MasterAlex
  • I was not going to cram it into the net. This should be on the section; only the text will be in the bootstrap container. - Alexander
  • one
    no bootstrap needed for this block jsfiddle.net/soledar10/7b5c3vpm - soledar10

1 answer 1

Bootstrap helps to change the layout depending on the width of the screen. If it is necessary for your task.

md, sm, xs

https://jsfiddle.net/glebkema/r7o12djw/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .sochi { background: #69c; color: white; } .sochi > div { padding: 0; } .sochi img { height: auto; width: 100%; } .sochi .about { padding: 20px 20px 10px; } 
 <div class="container-fluid"> <div class="row sochi"> <div class="col-sm-7 col-md-4"> <img src="//placehold.it/600x300/9c6/cf9/" alt=""> </div> <div class="col-sm-5 col-md-3 about"> <h2>Бутстрап</h2> <p>помогает менять макет в&nbsp;зависимости от&nbsp;ширины экрана</p> </div> <div class="col-md-5"> <img src="//placehold.it/750x300/c69/f9c/" alt=""> </div> </div> </div>