Bootstrap Studio 6.7.3 — Mac version

Six breakpoints and a grid that snaps to them — that is the quiet engine behind any layout you build here. You drag in a navbar, a spacer, a gallery block from the sidebar, and the DOM tree on the left lets you nest components without losing track of parent–child relationships. For an experienced user, that tree view is where speed really lives.

Custom components and the component library

Once you have built a section you like — a footer with a particular button group, say — you can save the lot as a custom component. It then sits in the online library alongside community-created headers, slideshows and divs, ready to drop into the next project. The app also reads raw HTML, CSS and JS files you drag in, so importing an old site to cannibalise its parts is straightforward. That same drag-and-drop logic works for importing entire existing websites; the app pulls in the HTML, stylesheets, scripts and images in one go.

SCSS and the behaviour tweaks

Full SCSS support means you write or edit partials directly in the editor, not in a separate tool, and the compiled output is clean, semantic HTML. The latest release adds a Sticky On option for navbars — pick the exact breakpoint where a bar pins itself to the viewport — and a Click Outside to Close setting for modals, so a stray tap on the backdrop dismisses the overlay without extra scripting. Between those two, a lot of small JavaScript annoyances simply go away.

Building a landing page, start to finish

Say you need a product landing page with a hero, three feature cards, a pricing table and a contact form. Open a new Bootstrap 5.3 project and drag a Navbar component into the canvas first. Use the Options panel to set its brand text, then drag three Nav Link items into the list and name them Features, Pricing, Contact. Tick the new Sticky On box and choose md — the bar now pins itself once the viewport hits tablet width.

Next, drop a Jumbotron beneath the navbar. Swap its placeholder image from your own files, edit the heading and lead text, and drag a Button component into the button slot. For the feature cards, drag a Row onto the stage, then drop three Card components inside. The DOM tree lights up with nested col-md-4 columns automatically. Select each card in turn and add an icon from the Icon Dialog — the panel now tells you the icon count per set, which saves hunting through Font Awesome when you just want a quick checkmark.

The pricing table is a Table component with striped rows ticked. Drag it in, type your tiers, then head to the SCSS editor and add a .pricing-highlight class for the middle column. The live preview pane shows the green border as you type. Finally, a Form with three input fields and a submit button slots into a Container at the bottom. Hit Cmd+E to export — the output folder holds clean HTML, a single CSS file and minified Bootstrap JS. No leftover inline styles, no wrapper divs you did not put there.

Browsable component library versus building your own in Pinegrow

Pinegrow shares the desktop-editor, multi-page approach and also reads Bootstrap's grid natively. Where they differ is the component library: Pinegrow expects you to build most repeatable bits yourself or pull from snippets, while Bootstrap Studio ships with a browsable online library of community headers, footers and blocks. For quick mockups, that catalogue saves real time.

RapidWeaver feels friendlier to someone who wants a finished theme and a page inspector, but it wraps Bootstrap inside its own framework. If you need to hand off clean, framework-standard markup to a developer, Bootstrap Studio's export is closer to what you would write by hand. RapidWeaver themes add their own class names and structure; Bootstrap Studio sticks to vanilla Bootstrap conventions.

Blocs is slick for single-page sites and has the fastest drag-and-drop flow of the three, yet its component nesting is shallower. Building a deeply nested layout — a card inside a column inside a row inside a container — feels more natural in Bootstrap Studio because the DOM tree shows every level and lets you drag components between branches without ungrouping anything. For a bootstrap studio mac user who wants direct control over the markup, that transparency matters.

Cold launch time and memory use on an Intel Mac

On an Intel Mac with 8 GB of RAM, the app opens cold in under four seconds. A five-page project with custom SCSS and twenty-odd components sits at around 400 MB of memory — heavier than a code editor but lighter than a full IDE with a live preview plugin running. The live preview across multiple browsers uses WebKit under the hood; toggling between phone, tablet and desktop breakpoints is instant, with no recompilation pause.

In daily work, the editor stays responsive even with the SCSS panel open and the preview refreshing on every keystroke. The only noticeable CPU spike comes when exporting a large site with many images, and that passes in a few seconds. Crashes are rare — one in a fortnight of heavy use, usually when dragging a malformed HTML file into the import zone. Autosave has your back, and the backup file sits in the project folder, not buried in a library directory.

• Fixed an issue with the OpenAI API key entry dialog not accepting some keys
• The Icon Dialog now lists the number of icons and type for each icon set
• Added a Sticky On option for sticky navbars
• Added a Click Outside to Close option for Bootstrap modals
• Added gpt-4o-mini and gpt-4o to the AI Assistant

• macOS 10.13 or later
• Intel or Apple Silicon Mac