Good afternoon, I wanted to ask you how to put the logo in the center of the site. Instead of searching, put a logo, and put the search itself in the upper part where there are social buttons. Honestly, I’m writing only after breaking my head, until I understand exactly what I’ll not do due to lack of knowledge. Site

Here is a diva

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 logo-inner"> <div class="logo-store"> <a href="http://masterskaya55.ru/index.php?route=common/home"> <img src="http://masterskaya55.ru/image/catalog/logo5.png" title="Мастерская 55 - обувная мастерская" alt="Мастерская 55 - обувная мастерская"> </a> </div>

But CSS style

 .logo-inner { position: relative; z-index: 99;

I just wanted to get in the end here as in the picture enter image description here

    2 answers 2

    You are welcome :-)

     .logo-inner { display: flex; justify-content: center; } 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 logo-inner"> <div class="logo-store"> <a href="http://masterskaya55.ru/index.php?route=common/home"> <img src="http://masterskaya55.ru/image/catalog/logo5.png" title="Мастерская 55 - обувная мастерская" alt="Мастерская 55 - обувная мастерская"> </a> </div> </div>

      You have a <div class="row"> element there. It contains elements with classes col-xx-y . In the first is the logo. In the second - search. Just rearranging them in places you can get what you want.

      enter image description here

      You can then adjust the width of the columns by changing y to col-xx-y

      You can read more about how the Grid concept works here .

      With a good deal in styles do not have to climb. That's what CSS frameworks are designed to automate the process of layout as much as possible.

      How to align the grid?

      col-xx-offset-y is responsible for the “alignment” of the grid, which allows you to shift elements from the left edge by a specified number of columns.

      Practical example:

      html

       <div class="col-lg-4 col-md-4 col-sm-5 col-xs-12 col-sm-offset-4 logo-inner"> <div class="logo-store"> <a href="http://masterskaya55.ru/index.php?route=common/home"> <img src="http://masterskaya55.ru/image/catalog/logo5.png" title="Мастерская 55 - обувная мастерская" alt="Мастерская 55 - обувная мастерская"> </a> </div> </div>

      Please note that I deleted the .hidden-xs class and now the element will not be hidden in the mobile version.

      CSS

       .logo-inner { display: flex; justify-content: center; }

      PS: thanks to the grizzly bear for CSS

      • Thanks for the decision, but do not tell me why in the mobile version it disappears altogether? - Blacksmith Pa
      • @PashaDark Access to the site is currently closed and I can not check for sure, but I suspect that there is a class .hidden-xs bootstrap-3.ru/css.php#responsive-utilities - Viktor
      • Opened the site, another question is how all such align the grid) - Blacksmith Pa
      • @PashaDark can be more specific, what do you mean by "align"? - Viktor
      • Look at the site) you will understand) - Blacksmith Pa