Question

I’m using bootstrap 2.0 to make a fluid layout. However, I find it break bad when the browser is resize or when I see it from a iPhone:

This is my markup:

      <div id="features" class="row-fluid">
        <div class="span12">
          <ul class="thumbnails">
            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Orders" />
                <h3>Pedidos</h3>
                <p>Genera ordenes de pedidos para su facturacion posterior</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Invoices" />
                <h3>Facturas</h3>
                <p>Factura las ventas realizadas</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Customers" />
                <h3>Clientes</h3>
                <p>Ingrese & actuelize los datos de los clientes</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Products & Stock" />
                <h3>Productos</h3>
                <p>Ingrese & actuelize los datos de los productos y su inventario</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Sincronization with ERP" />
                <h3>Impresion</h3>
                <p>Genera impresion de tiquets en papel con la impresora P25</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Sincronization with ERP" />
                <h3>Sincronizacion</h3>
                <p>Sincroniza los datos con ERPs seleccionados</p>
              </div>
            </li>
          </ul>
        </div><!--/span-->   
      </div><!--/row-->

(The same markup with zero CSS aplied break bad too)

I have tried by CSS to put a width/height but that break the flow.

Answer 1

Bootstrap now have responsive support, and the 3.0 Branch will have it by default.