Sistema Grid

Prefijo de clase para dispositivos muy pequeños como teléfonos de teléfonos < 768px

• .col-xs-

• .col-sx-

• .cols-xs-

Prefijo de clase para dispositivos pequeños como tablets ≥768px

• .col-ms-

• .col-sm-

• .cols-sm-

Prefijo de clase para dispositivos medianos y ordenadores ≥ 992px

• .cols-md-

• .col-dm-

• .col-md-

Prefijo de clase para dispositivos grandes ordenadores ≥ 1200px

• .col-lg-

• .cols-lg-

• .col-gl-

Utilizar anchura completa para todo el contenido

• <div class=“container”>

• <div class=“container-fluid”>

• <div class=“fluid”>

Utilizar una anchura limitada

• <div class=”container-fluid”>

• <div class=”fluid”>

• <div class=”container”>

¿Cuál sería el código correcto?

• <div class=“col-lg-4”> <div class=“col-lg-8”>

• <div class=“col-lg-8”> <div class=“col-lg-6”>

• <div class=“col-lg-9”> <div class=“col-lg-4”>

¿Cuál sería el código correcto?

• <div class=“col-md-4”> <div class=“col-md-4”>

  <div class=“col-md-6”>

• <div class=“col-md-4”> <div class=“col-md-4”>

  <div class=“col-md-4”>

• <div class=“col-md-6”> <div class=“col-md-6”> <div class=“col-md-2”>

¿Cuál sería el código correcto?

• <div class=“col-sm-2”> <div class=“col-sm-2”>

  <div class=“col-sm-2”><div class=“col-sm-6”>

• <div class=“col-sm-2”> <div class=“col-sm-2”>

  <div class=“col-sm-3”><div class=“col-sm-6”>

• <div class=“col-sm-2”> <div class=“col-sm-4”>

  <div class=“col-sm-4”><div class=“col-sm-4”>

¿Cuál sería el código correcto?

• <div class=“div class=“col-sm-10 col-xs-12”>

  <div class=“div class=“col-sm-4 col-xs-12”>

• <div class=“div class=“col-sm-4 col-xs-12”>

  <div class=“div class=“col-sm-9 col-xs-12”>

• <div class=“div class=“col-sm-8 col-xs-12”>

  <div class=“div class=“col-sm-4 col-xs-12”>