How to setup Bootstrap to work as expected?

Question

The code looks as following:

As you can see, it's Vue.js application where we use "pug" template engine and BootstrapVue component library. I'm trying to make the app responsive using b-col with Bootstrap's col-xs-, col-sm-, and so on.

The main page with different screen's width looks as following:

I'm not sure why the screenshots with "It's not OK" look as they are.

How can I fix it?

UPDATE:

This is code that works fine except for screen's width <576px.

The compiled HTML code (BootstrapVue) looks as following:


    
        
            LICOTA® — ПРОФЕССИОНАЛЬНЫЙ ИНСТРУМЕНТ ВЫСШЕГО КЛАССА ДЛЯ АВТОСЕРВИСОВ И ПРОМЫШЛЕННЫХ ПРЕДПРИЯТИЙ
        
    
    
        
            
                Имеет TUV сертификат ISO 9001:2008. Соответствует требованиям GS, CE, EAC и превышает нормы DIN и ГОСТ
            
        
        
            
                Один из ведущих производителей инструмента в мире с трехуровневым контролем качества
            
        
        
            
                Инструмент адаптирован к российским условиям и имеет пожизненную гарантию на брак изготовителя
            
        
        
            
                Наши клиенты из автомобильного сегмента, которые выбрали Licota®
            
        
        
            
                Эти промышленные предприятия уверенно работают с Licota®
            
        
        
            
                Дилеры Licota® по всей России, от Калининграда до Камчатки
            
        
    
    
        
            О ПРОИЗВОДИТЕЛЕ
        
        
            КАТАЛОГ ТОВАРОВ
        
        
            ГДЕ КУПИТЬ?

terrymorse · Accepted Answer

You have broken up the 6 cards into two rows, so when the screen is too narrow for 3 columns of cards, the third card is moved to a new line, all by itself.

The simplest fix: put all 6 cards into a single row.

Here is the HTML version of your markup, having placed all the cards into a single row:

.info-block {
      font-size: 16px;
      text-align: center;
    }

    .info-block__column {
      padding: 10px;
    }

    .info-block__card--no-border {
      border: none;
    }

    .info-block__button {
      background-color: #eee;
      background-image: -webkit-linear-gradient(bottom, #ccc 0%, #eee 100%);
      border: 1px solid #cccccc;
      color: black;
      font-size: 18px;
      font-weight: bold;
      line-height: 2;
      text-shadow: 0.5px 0.866px 0 white;
    }

    .info-block__middle-button {
      background-color: #007dfa;
      background-image: -webkit-linear-gradient(bottom, #00468c 0%, #007dfa 100%);
      border: 1px solid rgb(0, 70, 140);
      color: white;
      font-size: 18px;
      font-weight: bold;
      line-height: 2;
      text-shadow: 0.5px 0.866px 0 rgb(0, 30, 60);
    }






  

    
      
        LICOTA® — ПРОФЕССИОНАЛЬНЫЙ ИНСТРУМЕНТ ВЫСШЕГО КЛАССА ДЛЯ
        АВТОСЕРВИСОВ И ПРОМЫШЛЕННЫХ ПРЕДПРИЯТИЙ
      
    

    
      
        
          
          
            Имеет TUV сертификат ISO 9001:2008. Соответствует требованиям GS, CE, EAC и превышает нормы DIN и ГОСТ
          
        
      
      
        
          
          
            Один из ведущих производителей инструмента в мире с трехуровневым контролем качества
          
        
      
      
        
          
          
            Инструмент адаптирован к российским условиям и имеет пожизненную гарантию на брак изготовителя
          
        
      
      
        
          
          
            Наши клиенты из автомобильного сегмента, которые выбрали Licota®
          
        
      
      
        
          
          
            Эти промышленные предприятия уверенно работают с Licota®
          
        
      
      
        
          
          
            Дилеры Licota® по всей России, от Калининграда до Камчатки

Screenshots:

How to setup Bootstrap to work as expected?

Answers (1)

Related Questions