Responsive inline div Bootstrap

Question

Ich versuche, meinen Text innerhalb der div in der Mitte für xs Größe zu machen. Es funktioniert für Desktop-Größe, aber nicht für mobile Geräte Unten ist mein Code:

<div class="row"> 
     <div style="background-color:lightblue;color:#33CAFF" 
       class="col-lg-2 col-md-2 col-xs-3">STEP 1 
     </div> 
     <div style="background-color:#33CAFF;color:white" 
       class="col-lg-4 col-md-4 col-xs-5">2.SELECT VEHICLES & EXTRAS 
     </div> 
     <div style="background-color:white;color:gray" 
       class="col-lg-2 col-md-2 col-xs-2">STEP 3 
     </div> 
     <div style="background-color:white;color:gray" 
       class="col-lg-2 col-md-2 col-xs-2">STEP 4 
     </div> 
     </div> 

Answer 1

Bootstrap möglicherweise nicht Klasse unterstützen diese für

Sie können eine benutzerdefinierte Klasse hinzufügen und ein wenig css so schreiben.

HTML

<div class="row"> 
    <div style="background-color:lightblue;color:#33CAFF" 
    class="col-lg-2 col-md-2 col-xs-3 xs-text-center">STEP 1 
    </div> 
    <div style="background-color:#33CAFF;color:white" 
    class="col-lg-4 col-md-4 col-xs-5 xs-text-center">2.SELECT VEHICLES & EXTRAS 
    </div> 
    <div style="background-color:white;color:gray" 
    class="col-lg-2 col-md-2 col-xs-2 xs-text-center">STEP 3 
    </div> 
    <div style="background-color:white;color:gray" 
    class="col-lg-2 col-md-2 col-xs-2 xs-text-center">STEP 4 
    </div> 
</div> 

CSS

@media (max-width: 768px) { 
    .xs-text-center { 
    text-align: center; 
    } 
}