BuildBootstrap is a free online tool helping with common task of creating responsive layout utilizing Bootstrap 3 or latest Bootstrap 4 grid system.
You will get used to it in 3 minutes or less. Read below to learn basic workflow actions:
Click horizontal "+" buttons at the top and bottom to create rows before and after the current row.
Click vertical "+" buttons to the left and right to create new columns within the current row.
To change the width of the column, set a value in the "Width" dropdown at the bottom.
To delete a column, click "Delete column" button.
To delete a row, delete all contained columns one by one. When only one column is left, you will see a "Delete row" button.
To preview your layout on different devices use viewport switcher on the topbar. "xs", "sm", "md", "lg" and 'xl' (Bootstrap 4 only) correspond to "Extra small devices", "Small devices", "Medium devices", "Large devices" and "Extra large" - default Bootstrap grid breakpoints.
When you set a width for a column, it will be effective on currently active and wider viewports, which do not have another width explicitly set for this column. E.g., if you set "6/12" width on a "sm" viewport and "4/12" on "md", the column will get "col-sm-6 col-md-4" class applied.
Choose the version of Bootstrap you want to use in Settings on the topbar. Depending on your selection, you will see a different set of viewport sizes - 'xl' option is added for Bootstrap 4.
You may write content in cells in either Markdown or HTML. BuildBootstrap supports syntax highlighting for both modes and also autocomplete for HTML. You may select the editor mode in Settings.
To view a more closer presentation of the final output click the "Preview" button. This will show your content without grid manipulation elements.
To get the output click "Export" button. You will be presented with a HTML code, which you may copy to clipboard or download as a file. You may also export your layout as a "Full HTML document" with Bootstap Basic template used as a scaffold.
Absolutely. None of the data you put on this page is saved anywhere else except your browser. After the app is loaded, no further requests between your browser and our server are made.
This guide is available at http://buildbootstrap.com/help. For support and other issues reach us by email hello@buildbootstrap.com or twitter @build_bootstrap.