0

Quiero diseñar una columna como esta con bootstrapintroducir la descripción de la imagen aquí

Pero me quedan así

introducir la descripción de la imagen aquí

Y este es mi código

<div class="row">
    <div class="col-sm-6 col-md-4">

        <div class="thumbnail">

            <img src="..." alt="...">

            <div class="caption">

                <h3>Thumbnail label</h3>

                <p>...</p>

                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
                </p>

            </div>

        </div>

    </div>
    <br />
    <div class="col-sm-6 col-md-4">

        <div class="thumbnail">

            <img src="..." alt="...">

            <div class="caption">

                <h3>Thumbnail label</h3>

                <p>...</p>

                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
                </p>

            </div>

        </div>

    </div>
</div>
1

2 respuestas 2

1

Recuerda que la pantalla esta dividida en 12 en este ejmplo la divido en 2, En la primera le pongo 6, la dejo vacia sin contendio luego coloco otra division de 6, a esta le coloco la columna que quieres si la primera division no te es util solo borrala y donde esta con tamaño 6 solo ponle 12

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<div class="row"> 
 <div class="col-xs-6">
 </div>
 <div class="col-xs-6">
 <div class="row">
<div class="col-sm-12 col-md-12">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
 </div>
 </div>

1
0

Te pongo un ejemplo

.lg {
	color: #3333FF;
	font-weight: 700;
}
 
.md {
	color: red;
	font-weight: 700;
	margin-top: 20px;
}
 
.sm {
	color: green;
	font-weight: 700;
	margin-top: 60px;	
}
 
.xs {
	color: purple;
	font-weight: 700;
	margin-top: 90px;	
}
 
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4, 
.col-lg-5, 
.col-lg-6, 
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
	border: 1px solid #3333FF;
}
 
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4, 
.col-md-5, 
.col-md-6, 
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
	border: 1px solid red;
}
 
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4, 
.col-sm-5, 
.col-sm-6, 
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
	border: 1px solid green;
}
 
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4, 
.col-xs-5, 
.col-xs-6, 
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
	border: 1px solid purple;
}
<!DOCTYPE html>
<html>
<head>
	<title>columnas Bootstrap  </title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
	<body>
		<!--agrega tus columnas-->
    <p class="lg">Tamaño lg (large) </p>
		<div class="row">
			<div class="col-lg-2">.col-lg-2</div>
			<div class="col-lg-10">.col-lg-10</div>
		</div>
 
		<p class="md">Tamaño md (mediano)</p>
		<div class="row">
			<div class="col-md-7">.col-md-7</div>
			<div class="col-md-5">.col-md-4</div>
		</div>
 
		<p class="sm">Tamaño sm (small - pequeño)</p>
		<div class="row">
			<div class="col-sm-9">.col-sm-9</div>
			<div class="col-sm-3">.col-sm-3</div>
		</div>
 
		<p class="xs">Tamaño xs (extra small - extra pequeño)</p>
		<div class="row">
			<div class="col-xs-8">.col-xs-8</div>
			<div class="col-xs-4">.col-xs-4</div>
		</div>
	</body>
</html>

1

Tu Respuesta

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

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