Блог

У меня есть row с 3 col , в каждом col у меня есть один image , исходный размер которого равен: 197px 197px

У меня строка выровнена по центру с помощью mx-auto, вы можете увидеть здесь.

Проблема в том, что я не хочу, чтобы изображение заполняло 100% контейнера col. Я попытался добавить отступы влево и вправо с pl-5 pr-5 максимумом, который дает bootstrap, но этого недостаточно, и я не хочу создавать новый стиль, я хочу чистый способ с bootstrap, есть ли какой-нибудь способ сделать image измененный размер, как 32px 32px с bootstrap , и поддерживать horizontal alignment вкл center ?

   <section>
<div class="container-fluid">
<div class="row">
 <div class="header-section bg-rosa">
        <div style="max-width: calc(34em   5vw);">
          <h1>¿DÓNDE ESTAMOS?</h1>
          </div>
          </div>
        <div class="map-responsive">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3105.7869420542415!2d-7.016885748766864!3d38.88311615529015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd16e38ab4d4e259:0x9a38319e3a49cfca!2sResidencia Universitaria Caja Badajoz!5e0!3m2!1ses!2ses!4v1554163852202!5m2!1ses!2ses" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
        <div class="row">
  <div class="col-sm-4"><img class="img-fluid" src="img/contacto/UBICACION-02.png"/></div>
  <div class="col-sm-4"><img class="img-fluid" src="img/contacto/TELEFONO-02.png"/></div>
  <div class="col-sm-4"><img class="img-fluid" src="img/contacto/RELOJ-02.png"/></div>
</div>
          </div>
    </div>
  </section>
  

Я не вижу смысла не добавлять пользовательский css, потому что, насколько я знаю, вы не сможете выполнить это просто с помощью bootstrap, вы можете просто добавить класс к img тегам:

<div class="col-sm-4"><img class="img-fluid p32" src="img/contacto/UBICACION-02.png"/></div>
<div class="col-sm-4"><img class="img-fluid p32" src="img/contacto/TELEFONO-02.png"/></div>
<div class="col-sm-4"><img class="img-fluidp32" src="img/contacto/RELOJ-02.png"/></div>

и добавление простого правила css (после тега импорта bootstrap) :

p32{
max-width: 32px;
}