Greetings, there is a site http://paynplay.pro .

Problem screenshot: Problem screenshot

It is necessary to align the height "h2" with the name of the product and "p" with the description of the product (regardless of the number of characters in these tags), as well as press the button with the price to the bottom of the block (they are all the same height).

<!DOCTYPE html> <!-- saved from url=(0051)http://v4-alpha.getbootstrap.com/examples/carousel/ --> <html lang="en" class="mdl-js"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico"> <title>Pay'n'Play - Главная</title> <!-- Bootstrap core CSS --> <link href="https://paynplay.pro/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="https://paynplay.pro/css/carousel.css" rel="stylesheet"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?145"></script> </head> <body> <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand">Pay'n'Play</a> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="/">Главная</a> </li> <li class="nav-item"> <a class="nav-link" href="./topsales">Популярное</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">В разработке</a> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Поиск"> <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Поиск</button> </form> </div> </nav> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="first-slide" src="https://paynplay.pro/images/ghostrecon.jpg" alt="Tom Clancy's Ghost Recon® Wildlands"> <div class="container"> <div class="carousel-caption d-none d-md-block text-left"> <h1 style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Tom Clancy's Ghost Recon® Wildlands</h1> <p style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Создайте и настройте своего "Призрака", его оружие и снаряжение.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">1999 р.</a></p> </div> </div> </div> <div class="carousel-item"> <img class="second-slide" src="https://paynplay.pro/images/gtav.jpg" alt="Grand Theft Auto V"> <div class="container"> <div class="carousel-caption d-none d-md-block text-left"> <h1 style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Grand Theft Auto V</h1> <p style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Не просто игра – это легенда!</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">1199 р.</a></p> </div> </div> </div> <div class="carousel-item"> <img class="third-slide" src="https://paynplay.pro/images/dow3.jpg" alt="Warhammer 40,000: Dawn of War III"> <div class="container"> <div class="carousel-caption d-none d-md-block text-left"> <h1 style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Warhammer 40,000: Dawn of War III</h1> <p style="text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Вступите в жестокую битву между тремя враждующими фракциями в игре Dawn of War III.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">1799 р.</a></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- Marketing messaging and featurettes ================================================== --> <!-- Wrap the rest of the page in another container to center all the content. --> <div class="container"> <!-- Three columns of text below the carousel --> <div class="row"> <div class="col-12 col-md-9"> <div class="row"> <div class="col-6 col-lg-4"> <h2>Tom Clancy's Ghost Recon® Wildlands</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1999р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Grand Theft Auto V</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1199р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Warhammer 40,000: Dawn of War III</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Tom Clancy's Ghost Recon® Wildlands</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1999р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Grand Theft Auto V</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1199р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Warhammer 40,000: Dawn of War III</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Warhammer 40,000: Dawn of War III</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <!--/span--> </div> <!--/row--> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Назад</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">6</a></li> <li class="page-item"> <a class="page-link" href="#">Вперед</a> </li> </ul> </nav> </div> <!--/span--> <div class="col-12 col-md-3"> <ul class="list-group"> <li class="list-group-item justify-content-between active"> Категории </li> <li class="list-group-item list-group-item-info justify-content-between"> <a href="">Steam</a> <span class="badge badge-default badge-pill">70</span> </li> <li class="list-group-item list-group-item-action justify-content-between"> <a href="">Steam ключи</a> <span class="badge badge-default badge-pill">13</span> </li> <li class="list-group-item list-group-item-action justify-content-between"> <a href="">Steam гифты</a> <span class="badge badge-default badge-pill">34</span> </li> <li class="list-group-item list-group-item-action justify-content-between"> <a href="">Steam аккаунты</a> <span class="badge badge-default badge-pill">23</span> </li> <li class="list-group-item list-group-item-info justify-content-between"> <a href="">Origin</a> <span class="badge badge-default badge-pill">21</span> </li> <li class="list-group-item list-group-item-action justify-content-between"> <a href="">Origin ключи</a> <span class="badge badge-default badge-pill">10</span> </li> <li class="list-group-item list-group-item-action justify-content-between"> <a href="">Origin аккаунты</a> <span class="badge badge-default badge-pill">11</span> </li> </ul><br> <ul class="list-group"> <li class="list-group-item justify-content-between active"> Реквизиты </li> <li class="list-group-item justify-content-between" style="text-align:center;"> <div style="display:block; margin:0 auto;"> Webmoney<br> Персональный аттестат<br> <img src="https://paynplay.pro/images/att.png" alt="Персональный аттестат"><br> WMID: <a href="https://passport.webmoney.ru/asp/certview.asp?wmid=343197855963" target="_blank">343197855963</a><br><br> <img src="https://paynplay.pro/images/yad.png" alt="Яндекс Деньги"><br> Пройдена идентификация<br> Номер кошелька: 410011363247780 </div> </li> </ul> </div> </div> <hr class="featurette-divider"> <!-- /END THE FEATURETTES --> <!-- FOOTER --> <footer> <p class="float-right"><a href="" onclick="return up()">Вернуться на верх</a></p> <p>© 2017 Pay'n'Play.PRO · <a href="/">Политика</a> · <a href="/">Соглашение</a></p> </footer> </div> <!-- /.container --> <!-- VK Widget --> <!-- VK Widget --> <div id="vk_community_messages"></div> <script type="text/javascript"> VK.Widgets.CommunityMessages("vk_community_messages", 146199849, { expandTimeout: "10000", tooltipButtonText: "Остались вопросы?" }); </script> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://paynplay.pro/js/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://paynplay.pro/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://paynplay.pro/js/bootstrap.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="https://paynplay.pro/js/holder.min.js"></script> <script> var t; function up() { var top = Math.max(document.body.scrollTop, document.documentElement.scrollTop); if (top > 0) { window.scrollBy(0, -100); t = setTimeout('up()', 20); } else clearTimeout(t); return false; } </script> <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" preserveAspectRatio="none" style="display: none; visibility: hidden; position: absolute; top: -100%; left: -100%;"><defs><style type="text/css"></style></defs><text x="0" y="25" style="font-weight:bold;font-size:25pt;font-family:Arial, Helvetica, Open Sans, sans-serif">500x500</text></svg></body> </html> 

A piece of code with a problem:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://paynplay.pro/css/bootstrap.min.css" rel="stylesheet"><!-- Custom styles for this template --><link href="https://paynplay.pro/css/carousel.css" rel="stylesheet"> <div class="row"> <div class="col-6 col-lg-4"> <h2>Tom Clancy's Ghost Recon® Wildlands</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1999р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Grand Theft Auto V</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1199р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Warhammer 40,000: Dawn of War III</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Tom Clancy's Ghost Recon® Wildlands</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1999р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Grand Theft Auto V</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1199р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Warhammer 40,000: Dawn of War III</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <div class="col-6 col-lg-4"> <h2>Warhammer 40,000: Dawn of War III</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <!--/span--> </div> 

Thanks in advance for your help.

  • Questions with requests for debugging should contain the code directly in question. ru.stackoverflow.com/help/mcve - Crantisz
  • @Crantisz, seemingly fixed, thanks! - Luzik

2 answers 2

Once using bootstrap4 with flexs, do it with the same flexs. If you use this answer, do not forget to add vendor prefixes.

 .item { display: flex; flex-flow: column nowrap; justify-content: space-between; } .item-header { flex-basis: 120px; align-items: center; display: flex; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://paynplay.pro/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="https://paynplay.pro/css/carousel.css" rel="stylesheet"> <div class="row"> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Tom Clancy's Ghost Recon® Wildlands</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1999р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Grand Theft Auto V</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1199р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Warhammer 40,000: Dawn of War III</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Tom Clancy's Ghost Recon® Wildlands</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1999р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Grand Theft Auto V</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1199р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Warhammer 40,000: Dawn of War III</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Warhammer 40,000: Dawn of War III</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <!--/span--> </div> 

  • Thank you very much for the help with the buttons. Is it possible to even the description? s8.hostingkartinok.com/uploads/images/2017/05/… - screenshot of the problem that remained. :) - Luzik
  • @Luzik, do you want them on the same level, relative to each other? - nueq
  • Yes, I would like the names, descriptions and buttons to be on the same level with each other in the same row. :) - Luzik
  • @Luzik, you can make the headlines as they are now, and the text was on the same level below, you can add parents' flex headings and center them) how to do? - nueq
  • @Luzik, added a variant where the headings are vertically centered, as for me it is nicer - nueq

The code that really helped me align the contents of the blocks. Thank you so much @nueq for the help!

 .item { display: flex; flex-flow: column nowrap; justify-content: space-between; } .item-header { flex-basis: 120px; align-items: center; display: flex; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://paynplay.pro/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="https://paynplay.pro/css/carousel.css" rel="stylesheet"> <div class="row"> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Tom Clancy's Ghost Recon® Wildlands</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1999р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Grand Theft Auto V</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1199р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Warhammer 40,000: Dawn of War III</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Tom Clancy's Ghost Recon® Wildlands</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1999р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Grand Theft Auto V</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1199р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Warhammer 40,000: Dawn of War III</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <div class="col-6 col-lg-4 item"> <div class="item-header"> <h2>Warhammer 40,000: Dawn of War III</h2> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary btn-block" href="#" role="button">1799р.</a></p> </div> <!--/span--> </div>