Como desenhar CSS para desenho no Bootstrap com medidas 50% e centralizado

DiegoHeras · 28/04/2017

Buenas,

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

Normal:

Responsive:

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

Por favor ayuda.

Don Vito Corleone · 03/05/2017

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.

DiegoHeras · 05/05/2017

diseñopro.com disse:
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">  <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 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> 

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.

Muy amable por tu aportación.

XxMarkxX · 05/05/2017

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

ZoroRoronoa · 08/05/2017

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%;}
}

Como desenhar CSS para desenho no Bootstrap com medidas 50% e centralizado

DiegoHeras

Don Vito Corleone

DiegoHeras

XxMarkxX

ZoroRoronoa