We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
If this tool helped you, you can buy us a coffee ☕
Build Bootstrap grid layouts with drag and drop. Create page structures fast—no hand-coded HTML or CSS needed.
Preview the current grid at the MD / Desktop breakpoint
Switch the output format, then copy the code directly into an HTML or React project.
A student can drag and drop a responsive résumé page in five minutes, then copy the generated code straight into an assignment. If you want clean web layouts without writing code from scratch, this tool is made for you.
The Bootstrap Visual Layout Builder is a browser-based editor for building page structures with drag and drop. It uses Bootstrap’s 12-column grid system: each row is divided into 12 units, so you can choose how many units each section occupies and have widths adapt automatically across phones, tablets, and desktops. The left panel includes components such as containers, rows, and columns. Drag them onto the canvas to create common layouts like navigation bars, sidebars, content areas, and card lists, while matching HTML is generated live on the right.
Open the tool to see the component panel on the left and a blank canvas in the center. Follow these steps:
.container (fixed width) or .container-fluid (full width), depending on whether the page should span the full viewport.col-md-6 takes up 6 columns (half the row) on medium screens. Set sm, md, lg, and xl breakpoints together for responsive layouts.Let’s create a classic three-part admin page: a top navigation bar, a left menu, and a right content area.
.container-fluid) to the canvas, then add a row.
Top Navigation
Sidebar Menu
Main Content Area
Paste this code inside the <body> of your HTML file, make sure Bootstrap CSS is loaded, and refresh the page to see the result.
col-* values in a row exceed 12, extra columns wrap onto the next line and break the layout. Check each row’s total after dragging items in.col-md-6, columns stack full-width on phones. Use a mobile-first approach and give each column at least a col-* or col-sm-* setting..row can cause missing negative margins and horizontal scrolling. Always add a row before adding columns..container when you need a full-screen background leaves space on both sides. Use .container-fluid instead.order classes are set, items remain in source order. Adjust order breakpoints in the column properties.offset-* may differ and require manual adjustments.<!DOCTYPE html> or <head>. Paste them into the appropriate template yourself.alt attributes before publishing.ms-*/ml-*, differ and may need small updates based on the official migration guide.class or id to generated HTML elements and write custom styles in your own stylesheet to override Bootstrap defaults.col-* or col-sm-*, columns default to 12 columns wide and stack. Add at least one width definition to each column, such as col-12 col-md-6.d-none d-md-block hides an element on mobile and shows it on medium screens and above. The tool does not currently offer a visual toggle, but you can enter these classes directly in the HTML attributes.Now use the visual layout builder at the top of the page to drag in components, design your own Bootstrap page, and copy the code for your project.