Bootstrap Grid Generator


  1. Select the number of rows, columns and container type.
  2. Resize your browser window to the smallest possible width(mobile first). The current width and bootstrap breakpoint are displayed in the top of the screen.
  3. Select a column and adjust its width via the field: "Column dimensions: xs".
  4. Repeat this step for the other columns.
  5. The order of columns can be adjusted in the same way via the field: "Column order: xs".
  6. Increase the width of your browser to the next breakpoint and repeat the proces for adjusting the width and/or order.
  7. Copy and paste the resulting html in your website or application.


xs(< 576px) sm(< 768px) md(< 992px) lg(< 1200px) xl(> 1200px)

xs(< 576px) sm(< 768px) md(< 992px) lg(< 1200px) xl(> 1200px)
HTML code: