Bootstrap Tutorial - Layout Example








Method

  1. Align to vertical center
  2. Create a row with span4 span4 span4
  3. Create even columns with col-6
  4. Create Fixed Layout
  5. Create fluid grid
  6. Create fluid inner navbar
  7. Create Fluid Layout
  8. Create fluid layout with span3
  9. Create Full page image
  10. Create Full width element inside nested bootsrtap 3 grid
  11. Create nested column layout
  12. Create nested responsive grid
  13. Create Nested rows
  14. Create row with span2 and span10
  15. Create row with span4 and span8
  16. Create row with span4 span4 span4
  17. Create Small Grid Layout
  18. Create two columns with col-4 anc col-8
  19. Grid Layout
  20. Layout banner with span6
  21. Card layout
  22. Column ordering
  23. Layout for different size screen
  24. Screen Size
  25. Layout header with search bar
  26. Large screen
  27. Layout main content before sidebars
  28. Marketing Page
  29. Mobile and desktop
  30. Bump layout column
  31. Nesting columns
  32. Offsetting columns
  33. Three column layout
  34. Mobile, tablet, and desktop
  35. Mark double column
  36. Mark full height column
  37. Mark response span3 layout
  38. Mix grid and ungrid together
  39. Nested row with fluid grid
  40. Nested span6 cell
  41. Nest columns
  42. Offset to indent columns
  43. Pull and push to reorder columns
  44. Pull element right
  45. Pull left and right
  46. Responsive grid for three size devices
  47. Responsive grid layout
  48. Set hover background color
  49. span12 for entire row
  50. Help text
  51. Use fluid row and span12