Cajas de Contenido

Cajas de Íconos

En este ejemplo, las cajas de iconos se fijan en 4 columnas de basadas en el sistema de grilla de Bootstrap, utilizando row-fluid y span3.

Título 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Título 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Título 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Título 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="row-fluid">
  <div class="iconbox span3">
    <div class="iconcircle">
      <i class="fa fa-twitter"></i>
    </div>
    <div class="iconbox-content">
      ...
    </div>
  </div>
  <div class="iconbox span3">...</div>
  <div class="iconbox span3">...</div>
  <div class="iconbox span3">...</div>
</div>


<div class="row-fluid">
<div class="iconbox span3">
<div class="iconcircle">
<i class="fa fa-twitter"></i>
</div>
<div class="iconbox-content">
<h4>Título 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-default" href="#">Leer más</a>
</div>
</div>
<div class="iconbox span3">
<div class="iconcircle">
<i class="fa fa-sliders"></i>
</div>
<div class="iconbox-content">
<h4>Título 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-default" href="#">Leer más</a>
</div>
</div>
<div class="iconbox span3">
<div class="iconcircle">
<i class="fa fa-flag"></i>
</div>
<div class="iconbox-content">
<h4>Título 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-default" href="#">Leer más</a>
</div>
</div>
<div class="iconbox span3">
<div class="iconcircle">
<i class="fa fa-book"></i>
</div>
<div class="iconbox-content">
<h4>Título 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-default" href="#">Leer más</a>
</div>
</div>
</div>

Cuadros de texto

Algunas categorías

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<div class="text-box">
  <div class="text-box-heading">Algunas categorías</div>
  <div class="arrow-down"></div>
  <p>Lorem ipsum ...</p>
</div>

Cajas de imágenes

En este ejemplo, las cajas de iconos se fijan en 3 columnas mediante el sistema de grilla de Bootstrap, utilizando row-fluid y span4.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

$img3$

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<div class="row-fluid">
  <div class="image-box span4">
    <img src="..."  class="img-responsive">
    <div class="image-box-content"><p>Lorem ipsum ...</p></div>
  </div>
  <div class="image-box span4">
    ...
  </div>
  <div class="image-box span4">
    ...
  </div>
</div>


<div class="row-fluid">
<div class="image-box span4">
<img src="http://placehold.it/600x300" alt="img1" class="img-responsive">
<div class="image-box-content"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="text-align:center;"><a class="btn btn-default" href="#">Leer más</a></p></div>
</div>
<div class="image-box span4">
<img src="http://placehold.it/600x300" alt="img2" class="img-responsive">
<div class="image-box-content"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="text-align:center;"><a class="btn btn-default" href="#">Leer más</a></p></div>
</div>
<div class="image-box span4">
<img src="http://placehold.it/600x300" alt="img3" class="img-responsive">
<div class="image-box-content"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="text-align:center;"><a class="btn btn-default" href="#">Leer más</a></p></div>
</div>
</div>

Cajas de Promoción

Utilice cajas de promoción para captar la atención de sus visitantes:

heading prom-box-default

Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.

heading prom-box-info

heading prom-box-warning

heading prom-box-danger

<div class="prom-box prom-box-default">
  <h3>...</h3>
  <p>...</p>
</div>

<div class="prom-box prom-box-info">
  <h3>...</h3>
  <p>...</p>
</div>

<div class="prom-box prom-box-warning">
  <h3>...</h3>
  <p>...</p>
</div>

<div class="prom-box prom-box-danger">
  <h3>...</h3>
  <p>...</p>
</div>

Las cajas de promociones son muy personalizables y pueden contener cualquier contenido HTML:

heading prom-box-default

Botón

<div class="prom-box prom-box-default">
  <h3>...</h3>
  <a class="btn btn-danger pull-right" href="#"><i class="fa fa-share fa-lg"></i> Button</a>
  <p>...</p>
</div>

Puede incluso agregar sombras:

shadow1

shadow2

<div class="prom-box prom-box-default shadow1">
  <h3>...</h3>
  <p>...</p>
</div>

<div class="prom-box prom-box-default shadow2">
  <h3>...</h3>
  <p>...</p>
</div>