Выравнивание кругов по горизонтали в бутстрапе

Question

У меня пока нет такого превосходства над бутстрапом, и я не могу понять, как правильно позиционировать эти круги одинаково под заголовком. Любая помощь была бы замечательной, я пробовал много вещей. Думаю, я пропустил что-то глупое, что я должен был видеть.

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-2 col-md-2 col-lg-2"> 
      <div id="dif1"></div> 
     </div> 

     <div class="col-xs-2 col-md-2 col-lg-2"> 
      <div id="dif2"></div> 
     </div> 

     <div class="col-xs-2 col-md-2 col-lg-2"> 
      <div id="dif3"></div> 
     </div> 

     <div class="col-xs-2 col-md-2 col-lg-2"> 
      <div id="dif4"></div> 
     </div> 
    </div> 
</div> 

CSS

#dif1 { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    display: inline-block; 
    color: white; 
    background: rgb(41, 168, 224); 
    padding-top: 100px; 
} 

#dif2 { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    display: inline-block; 
    color: white; 
    background: rgb(221, 126, 81); 
} 

#dif3 { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    display: inline-block; 
    color: white; 
    background: rgb(175, 79, 122); 
} 

#dif4 { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    display: inline-block; 
    color: white; 
    background: rgb(138, 166, 90); 
} 

Answer 1

Просто Удалить padding-top: 100px; свойство из #dif1 Селектор

#dif1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    color: white; 
 
    background: rgb(41, 168, 224); 
 
} 
 

 
#dif2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    color: white; 
 
    background: rgb(221, 126, 81); 
 
} 
 

 
#dif3 { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    color: white; 
 
    background: rgb(175, 79, 122); 
 
} 
 

 
#dif4 { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    color: white; 
 
    background: rgb(138, 166, 90); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<div class="container"> 
 

 
    <div class="row"> 
 

 
    <div class="col-xs-2 col-md-2 col-lg-2"> 
 
     <div id="dif1"></div> 
 

 
    </div> 
 

 
    <div class="col-xs-2 col-md-2 col-lg-2"> 
 
     <div id="dif2"></div> 
 

 
    </div> 
 

 
    <div class="col-xs-2 col-md-2 col-lg-2"> 
 
     <div id="dif3"></div> 
 

 
    </div> 
 

 
    <div class="col-xs-2 col-md-2 col-lg-2"> 
 
     <div id="dif4"></div> 
 

 
    </div> 
 
    </div> 
 
</div>