Cómo diseñar CSS para dibujo en Bootstrap con medidas 50% y centrado

  • Autor Autor DiegoHeras
  • Fecha de inicio Fecha de inicio
D

DiegoHeras

Gamma
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas,

Quisiera saber si me pueden decir como diseñar el css del dibujo.

Normal:
Sin título.webp

Responsive:
Sin título1.webp

Lo de rojo es lo visible, lo de negro son indicaciones. Pero las medidas son todas 50% (intentar centrar todo)

Por favor ayuda.
 
Saludos, para ello debes revisar un poco la documentación de bootstrap. Necesitas usar 6 rejillas para cada caja, y en tema de móviles las 12.

Te ayudo un poco.

HTML: 
<div class="container">

 <!-- CAJA NRO 1 -->

  <div class="col-xs-12 col-sm-12 col-md-6">

    <div class="center-block">
	<img src="http://lorempixel.com/200/200/" class="center-block">
        <p class="text-center">Texto</p>
    </div>

  </div>

  <!-- CAJA NRO 2 -->

  <div class="col-xs-12 col-sm-12 col-md-6">

    <div class="center-block">
	<img src="http://lorempixel.com/200/200/" class="center-block">
        <p class="text-center">Texto</p>
    </div>

  </div>

</div> <!-- end row -->

Para centrar los textos dentro de las cajas usa la clase .text-center y para la imagen y/o bloque usa .center-block

Si tienes alguna duda, comentalo.
 
Última edición:
diseñopro.com dijo:
Saludos, para ello debes revisar un poco la documentación de bootstrap. Necesitas usar 6 rejillas para cada caja, y en tema de móviles las 12.

Te ayudo un poco.

HTML: 
<div class="container">

 <!-- CAJA NRO 1 -->

  <div class="col-xs-12 col-sm-12 col-md-6">

    <div class="center-block">
	<img src="http://lorempixel.com/200/200/" class="center-block">
        <p class="text-center">Texto</p>
    </div>

  </div>

  <!-- CAJA NRO 2 -->

  <div class="col-xs-12 col-sm-12 col-md-6">

    <div class="center-block">
	<img src="http://lorempixel.com/200/200/" class="center-block">
        <p class="text-center">Texto</p>
    </div>

  </div>

</div> <!-- end row -->

Para centrar los textos dentro de las cajas usa la clase .text-center y para la imagen y/o bloque usa .center-block

Si tienes alguna duda, comentalo.
Hacer clic para expandir...

Muy amable por tu aportación.
 
No me gusta usar Bootstrap, pero hice esto algo rapido, espero te sea util

HTML: 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body{font-size: 13px;}
		.grid{margin: 0 auto; width: 49%; float: left; border: 5px solid #000; box-sizing: border-box}
		.grid:nth-child(odd){margin-right: 2%;}
		.wrap{max-width: 500px; margin: 5px auto 5px auto; border: 5px solid #000;}
		.circle{border:5px solid red; border-radius: 150px; -ms-border-radius: 150px; -moz-border-radius: 150px; -webkit-border-radius: 150px; -o-border-radius: 150px; width: 200px; height: 200px; margin: 5px auto auto auto;}
		p{text-align: center;}
	 [MENTION=16931]medi[/MENTION]a only screen and (max-width: 768px){
			.grid{float: none; margin-bottom: 10px; width: 100%}
			.grid:nth-child(odd){margin-right: auto;}
			.wrap{max-width: 400px;}
		}
	</style>
</head>
<body>
	<div class="grid">
		<div class="wrap">
			<div class="circle"></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>

	<div class="grid">
		<div class="wrap">
			<div class="circle"></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>
</body>
</html>

Demo: Edit fiddle - JSFiddle
 
HTML
HTML: 
<main>
	<row>
		<circle></circle>
		<p>Texto</p>
	</row>
	
	<row>
		<circle></circle>
		<p>Texto</p>
	</row>
</main>

CSS:
HTML: 
html, body {width:100%; height:100%;}
* {box-sizing:border-box;}
main, p {display:block;}
row, circle {display:inline-block;}

main {width:100%; height:100%; background:red; text-align:center;}

row {width:49%; height:auto; border:1px solid black; padding:10px;}
circle {background:white; border-radius:50%; width:200px; height:200px;}
@ media(max-width:780px) {
	row {width:100%;}
}
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba