0

Quiero lograr esto en un modal

introducir la descripción de la imagen aquí

Pero la imagen no se de que manera puedo ponerla en todo lo largo solo en una parte, este es mi codigo, el texto no es tanto problema es acomodar asi la imagen

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h5 class="modal-title text-center" style="font-weight: 700;" id="exampleModalLabel">Escuelas y Universidades</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="col-md-2">
              <img src="bennetts/Picture1.png" class="img-fluid" alt="">
            </div>
            <div class="col-md-10">
              <h3 class="text-center">Oferta de Valor</h3>
              <p class="text-center" style="color: orange; font-size: 20px;">Escuelas y Universidades</p>
              <ol>
                <li value="1">Perfil Especifico del Segmento</li>
                <li>Perfil Especifico del Segmento</li>
              </ol>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
1
  • Que es lo que has intentado,qué problemas tienes? Commented el 20 abr. 2020 a las 1:26

1 respuesta 1

0

Puedes tratar la imagen como un background. Dejo un pequeño ejemplo.

.img-left{
  background-image: url("https://lh3.googleusercontent.com/proxy/CCbFFt7qVhJzGLWFYnGI3WtfeTAVRITNN6klb5mu_4bYD_yEGHE3N9sygyOdxDCONeEfw9aBwuqVbXCA2_ATdaYJngSs7oVSmud97FrRuWjI7UEVxmRMYsvCWU1Mt7sedgStN7Hel1KP");
  height: 400px;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: left; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-3 img-left">
                      
          </div>
          <div class="col-9">
            Texto
          </div>
          </div>
          
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1
  • Por favor edita tu respuesta y coloca aquí mismo el código, la opción de Fragmento de código... te permite crear un ejemplo funcional.
    – Triby
    Commented el 20 abr. 2020 a las 16:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.