1

Viendo la documentación de bottstrap, en específico la documentación del componente "cards" vi un una card de publicidad de slack. Dónde hay un recuadro con fondo gris, dentro de él una imagen del lado izquierdo y texto de lado derecho. Quiero hacer una así, pero paradójicamente no hay documentación de como hacer una así, solo se puede poner una imagen y el texto de bajo, no a un lado.

Me gustaría poner dos de esos en una fila.

<div class="row">
					<div class="col-md-6">
						<div class="col-lg-6 col-md-6 mb-sm-20">
							<div class="exprience-thumb" style="background: url(img/e1.jpg);"></div>
						</div>
						<div class="col-lg-6">
							<div class="exprience-content">
								<h2>From the root of experience <br> We dig out the best talent</h2>
								<h6 class="sub-exprience-title">Few would argue that, despite the advancements of feminism over the past three decades, women still face a double standard when it comes to their behavior. While men’s borderline.</h6>
								<p>inappropriate behavior is often laughed off as “boys will be boys,” women face higher conduct standards – especially in the workplace. That’s why it’s crucial that, as women, our behavior on the job is beyond reproach.Small Towns and Big StatesFor evidence of the double standard.</p>
								<a href="#" class="primary-btn">View Details</a>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="col-lg-6 col-md-6 mb-sm-20">
							<div class="exprience-thumb" style="background: url(img/e1.jpg);"></div>
						</div>
						<div class="col-lg-6">
							<div class="exprience-content">
								<h2>From the root of experience <br> We dig out the best talent</h2>
								<h6 class="sub-exprience-title">Few would argue that, despite the advancements of feminism over the past three decades, women still face a double standard when it comes to their behavior. While men’s borderline.</h6>
								<p>inappropriate behavior is often laughed off as “boys will be boys,” women face higher conduct standards – especially in the workplace. That’s why it’s crucial that, as women, our behavior on the job is beyond reproach.Small Towns and Big StatesFor evidence of the double standard.</p>
								<a href="#" class="primary-btn">View Details</a>
							</div>
						</div>
					</div>
				</div>

9
  • favor de leer Cómo preguntar, la idea no es solo poner lo que deseas hacer sino lo que has intentado y lo que ya no te quedó para apartir de ahi ayudarte
    – user75901
    Commented el 31 ene. 2019 a las 0:50
  • Saludos bro, de pura casualidad ¿conoces CSS?
    – fredyfx
    Commented el 31 ene. 2019 a las 0:51
  • Perdón, ahora agrego el código. Lo que intenté fue ignorar las cards, y hacer todo con divs, pero al momento de agregar lo que serían dos "cards" se mueve el texto hacía abajo. Commented el 31 ene. 2019 a las 0:56
  • fredyfx. Si ya se que es algo muy básico solo que no suelo usar bottstrap, y este proyecto está todo en bootstrap, y quería saber si ya tiene algo implementado, como por ejemplo Materializecss ya las implementa, las llama cards horizontales Commented el 31 ene. 2019 a las 1:01
  • No me refiero a que si es básico o no, sucede que muchos programadores nuevos quieren ir de frente a manejar frameworks sin pasar por un entrenamiento en lo básico, luego su nivel de estrés y frustración se eleva, para evitar todo esto, pregunto en si conocen lo básico y qué tanto conocen, de esta manera puedo dar enlaces de recursos más acorde con lo que se busca desarrollar o en el mejor de los casos, dar una buena respuesta, ¿me dejo entender?
    – fredyfx
    Commented el 31 ene. 2019 a las 1:05

1 respuesta 1

2

La mejor manera de hacerlo no es con las cards de Boostrap. Yo lo haría con el componente media-object

Te permite posicionar de forma fácil una imagen dentro de un wrap. Lee la documentación, es muy completa.

Aparte estoy usando las utilidades de espacio para añadir un padding al contenedor media

.media {
  background-color: #ebebeb;
  width: 400px;  
}

.media img {
  width: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-6">
<div class="media p-4">
  <img src="https://cdn4.buysellads.net/uu/1/41629/1547651715-slack-carbon-white_2x.png" class="align-self-center mr-3">
  <div class="media-body">
    <p>The easiest way to sign docs, forms and agreements online. Try it free today.</p>
    <span>Ads via Carbon</span>
  </div>
</div>
</div>

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.