es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Bootstrap 4 col-md-4 con borde sombreado.

28 Jul, 2023 Programación

Utilizo este carrusel:

https://mdbootstrap.com/snippets/jquery/temp/3549496

enter image description here

Como puedes ver, hay un borde alrededor de cada bloque.

En el primer slide, no se puede ver la sombra izquierda, en el tercer slide no se puede ver la sombra derecha.

Cuando le agrego un margin-left: -5px al <div class="col-md-4 clearfix d-none d-md-block"> de la derecha, puedo ver la sombra, pero eso no es un código bonito y limpio.

¿Alguien sabe cómo puedo modificar el col-md-4 para mostrar la sombra también en los bloques izquierdo y derecho?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para modificar col-md-4 y mostrar la sombra en los bloques izquierdo y derecho, puedes agregar la clase “mx-1” a los divs que rodean a los divs col-md-4. Esta clase agrega un margen de 0.25rem en ambos lados del div, lo cual creará suficiente espacio para que la sombra sea visible.

    Aquí tienes un ejemplo:

    <div class="row mx-1">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Slide 1</h4>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Slide 2</h4>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Slide 3</h4>
      </div>
    </div>
  </div>
</div>

    Al agregar la clase “mx-1” a los divs que rodean, se crea espacio para que aparezca la sombra en todos los lados de cada div col-md-4, sin necesidad de márgenes negativos. Esto resultará en un código más limpio y fácil de mantener.

Comments are closed.