Bootstrap Practice Tasks

Task 1

Create a layout that shall have 4 info widgets. 
  1. On extra small devices, all shall be stacked
  2. On small and medium screen, there shall be 2 widgets in one row (hence there would be total two rows)
  3. On large and above, all columns shall come in single row

Task 2

Create a layout that shall have 3 cells:
  1. On extra small and small devices, all shall be vertically stacked
  2. On medium and above, first row should have 2 cells and 2nd row should have one cell.
  3. Cell in 2nd row should be of 50% width and it shall coe in center of row.

Task 3

Create a layout that shall have 6 cells.
  1. on extra small devices, all shall be vertically stacked. 
  2. On small and mediun devices, 2 cell per row. 
  3. On large and above, 3 cell per row

Task 4

There shall be one “row” with 3 cells, all shall be vertically stacked on all devices, except extra small devices (means on extra small devices, all cells shall be of equal width and come in single row).

Task 5

There shall be one “row” with 2 cells, each cell shall take 75% width on extra small, small, medium, and large devices, aligned at end. On extra large displays, both cells’ width shall be 25%, they shall come together (without any gap) with 25% offset.

Comments