Hello. Faced a problem - the layout of blocks on the bootstrap.
If you add the classes of col , they seem to be how they become, but they are not in the center. And you need to center in the middle. How to do it right?

Maybe they should add separate classes and flex them up?

Advise something.

enter image description here

 <section class="projects scroll_to_projects"> <h2 class="projects_heading">Проекты</h2> <div class="container m-auto"> <div class="row"> <div class="col-lg-3 col"> <div class="projects_block"> <img src="img/redline.png" alt=""> <h3 class="projects_block_heading"> Red Line & Power China </h3> <p class="projects_block_paragraph"> Совместное предприятия компании <a target="blank" class="projects_block_link_redline" href="https://skrl.ru">«Red Line»</a> и «Power China Guiyang Engineering Corporation limited», в целях освоения строительных заказов топливно- энергетического комплекса <br>в России. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> <div class="col-lg-3 col"> <div class="projects_block"> <div class="projects_block_imgs"> <a href="img/slider/3.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/ 3.jpg" alt=""></a> <a href="img/slider/2.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/ 2.jpg" alt=""></a> <a href="img/slider/1.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/ 1.jpg" alt=""></a> <a href="img/slider/4.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/ 4.jpg" alt=""></a> <a href="img/slider/5.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/ 5.jpg" alt=""></a> <a href="img/slider/6.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/ 6.jpg" alt=""></a> <a href="img/slider/7.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/ 7.jpg" alt=""></a> <a href="img/slider/8.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/ 8.jpg" alt=""></a> </div> <h3 class="projects_block_heading projects_block_heading_overlay"> Русская деревня </h3> <p class="projects_block_paragraph"> Совместно с Чунцинской международной туристической корпорацией, ведется разработка проектов деревянных домов, в русском стиле, для строительства туристического городка <br>на горе Лотоса, в городе <br>Фен-ду. </p> </div> </div> <div class="col-lg-3 col"> <div class="projects_block"> <img src="img/chun.png" alt=""> <h3 class="projects_block_heading"> ЧУНиТ - СПБГУ </h3> <p class="projects_block_paragraph"> «Чунцинский университет науки и технологией – Санкт-Петербургский горный университет»: по средствам контактов торгово- промышленной палаты между университетами организовано плотное сотрудничество. </p> </p> </div> </div> <div class="col-lg-3 col"> <div class="projects_block"> <img src="img/saqr.png" alt=""> <h3 class="projects_block_heading"> saqr trevel </h3> <p class="projects_block_paragraph"> Тур оператор <a target="blank" class="projects_block_link_saqr" href="https://saqrtravel.com">«Saqr travel Saint-Petersburg»</a>, является представителем международной компании «Saqr travel». Мы осуществляем прием туристических групп <br>и индивидуалов в городе Санкт-Петербурге, а также <br>по всей территории России. </p> </div> </div> </div> </div> </section>

  • Confused by the class col, and the class m-auto. Perhaps custom bootstrap padding is shot down in custom styles - dev_null
  • Yes, I experimented. and the last code just copied - Roman
  • Maybe try to add justify to row to justify-content-md-center, and here's a link, it’s a lot of interesting about the bootstrap net bootstrap-4.ru/docs/4.0/layout/grid - nicolaa

1 answer 1

  1. For cards in bootstrap 4 there is a ready card solution.

  2. I would suggest this solution with col-lg-3 col-md-6 for each resolution:

 .projects { background: url(https://images.unsplash.com/photo-1526634967460-8009daabbe9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a21239c4a8c9ec18d385c4f92e9f5118&auto=format&fit=crop&w=909&q=80) center no-repeat; -webkit-background-size: cover; background-size: cover; } 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" > <section class="projects scroll_to_projects"> <h2 class="projects_heading">Проекты</h2> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6"> <div class="card projects_block"> <img class="card-img-top" src="https://images.unsplash.com/photo-1527904248767-cfe951e81ab0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ff427782f4ef8063f45ce874e7e7025a&auto=format&fit=crop&w=600&q=60" alt="Card image cap"> <div class="card-body"> <h3 class="card-title projects_block_heading"> Red Line & Power China </h3> <p class="card-text projects_block_paragraph"> Совместное предприятия компании <a target="blank" class="projects_block_link_redline" href="https://skrl.ru">«Red Line»</a> и «Power China Guiyang Engineering Corporation limited», в целях освоения строительных заказов топливно- энергетического комплекса <br>в России. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="card projects_block"> <img class="card-img-top" src="https://images.unsplash.com/photo-1516491575772-bab9f75948c0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67c8699f273e4051d9ab9e19c6c83614&auto=format&fit=crop&w=600&q=60" alt="Card image cap"> <div class="card-body"> <h3 class="card-title projects_block_heading"> Русская деревня </h3> <p class="card-text projects_block_paragraph"> Совместно с Чунцинской международной туристической корпорацией, ведется разработка проектов деревянных домов, в русском стиле, для строительства туристического городка <br>на горе Лотоса, в городе <br>Фен-ду. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="card projects_block"> <img class="card-img-top" src="https://images.unsplash.com/photo-1517315003714-a071486bd9ea?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e6610aa0e51014aa2a57fee0356f0722&auto=format&fit=crop&w=600&q=60" alt="Card image cap"> <div class="card-body"> <h3 class="card-title projects_block_heading"> ЧУНиТ - СПБГУ </h3> <p class="card-text projects_block_paragraph"> «Чунцинский университет науки и технологией – Санкт-Петербургский горный университет»: по средствам контактов торгово- промышленной палаты между университетами организовано плотное сотрудничество. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="card projects_block"> <img class="card-img-top" src="https://images.unsplash.com/photo-1527904248767-cfe951e81ab0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ff427782f4ef8063f45ce874e7e7025a&auto=format&fit=crop&w=600&q=60" alt="Card image cap"> <div class="card-body"> <h3 class="card-title projects_block_heading"> saqr trevel </h3> <p class="card-text projects_block_paragraph"> Тур оператор <a target="blank" class="projects_block_link_saqr" href="https://saqrtravel.com">«Saqr travel Saint-Petersburg»</a>, является представителем международной компании «Saqr travel». Мы осуществляем прием туристических групп <br>и индивидуалов в городе Санкт-Петербурге, а также <br>по всей территории России. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> </div> </div> </div> </section>

If, nevertheless, you simply specify col , then in order to center on the row you need to add the class justify-content-center — justify-content-center content.

 .projects { background: url(https://images.unsplash.com/photo-1526634967460-8009daabbe9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a21239c4a8c9ec18d385c4f92e9f5118&auto=format&fit=crop&w=909&q=80) center no-repeat; -webkit-background-size: cover; background-size: cover; } 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" > <section class="projects scroll_to_projects"> <h2 class="projects_heading">Проекты</h2> <div class="container"> <div class="row justify-content-center"> <div class="col"> <div class="card projects_block mx-auto" style="width: 18rem;"> <img class="card-img-top" src="https://images.unsplash.com/photo-1527904248767-cfe951e81ab0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ff427782f4ef8063f45ce874e7e7025a&auto=format&fit=crop&w=600&q=60" alt="Card image cap"> <div class="card-body"> <h3 class="card-title projects_block_heading"> Red Line & Power China </h3> <p class="card-text projects_block_paragraph"> Совместное предприятия компании <a target="blank" class="projects_block_link_redline" href="https://skrl.ru">«Red Line»</a> и «Power China Guiyang Engineering Corporation limited», в целях освоения строительных заказов топливно- энергетического комплекса <br>в России. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> </div> <div class="col"> <div class="card projects_block mx-auto" style="width: 18rem;"> <img class="card-img-top" src="https://images.unsplash.com/photo-1516491575772-bab9f75948c0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67c8699f273e4051d9ab9e19c6c83614&auto=format&fit=crop&w=600&q=60" alt="Card image cap"> <div class="card-body"> <h3 class="card-title projects_block_heading"> Русская деревня </h3> <p class="card-text projects_block_paragraph"> Совместно с Чунцинской международной туристической корпорацией, ведется разработка проектов деревянных домов, в русском стиле, для строительства туристического городка <br>на горе Лотоса, в городе <br>Фен-ду. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> </div> <div class="col"> <div class="card projects_block mx-auto" style="width: 18rem;"> <img class="card-img-top" src="https://images.unsplash.com/photo-1517315003714-a071486bd9ea?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e6610aa0e51014aa2a57fee0356f0722&auto=format&fit=crop&w=600&q=60" alt="Card image cap"> <div class="card-body"> <h3 class="card-title projects_block_heading"> ЧУНиТ - СПБГУ </h3> <p class="card-text projects_block_paragraph"> «Чунцинский университет науки и технологией – Санкт-Петербургский горный университет»: по средствам контактов торгово- промышленной палаты между университетами организовано плотное сотрудничество. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> </div> <div class="col"> <div class="card projects_block mx-auto" style="width: 18rem;"> <img class="card-img-top" src="https://images.unsplash.com/photo-1527904248767-cfe951e81ab0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ff427782f4ef8063f45ce874e7e7025a&auto=format&fit=crop&w=600&q=60" alt="Card image cap"> <div class="card-body"> <h3 class="card-title projects_block_heading"> saqr trevel </h3> <p class="card-text projects_block_paragraph"> Тур оператор <a target="blank" class="projects_block_link_saqr" href="https://saqrtravel.com">«Saqr travel Saint-Petersburg»</a>, является представителем международной компании «Saqr travel». Мы осуществляем прием туристических групп <br>и индивидуалов в городе Санкт-Петербурге, а также <br>по всей территории России. </p> <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a> <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a> </div> </div> </div> </div> </div> </section>

You can still remember the good old display: inline-block for columns and text-align:center for the wrapper.