Skip to content
pinegrow.com
Docs menuBootstrap
Docs

Bootstrap Visual Editor

Updated

No more guessing the correct Bootstrap class name and copy-pasting code from Bootstrap docs. Pinegrow includes everything you need to easily work with Bootstrap-based projects.

On this page

Pinegrow comes with complete support for Bootstrap:

Start a new Bootstrap Project

Bootstrap is a CSS framework with some additional JavaScript features that helps in putting pages together quickly.

Activating Bootstrap Tools

The Pinegrow Web Editor has extensions that implement support for Bootstrap. To start working with the Bootstrap Visual Editor we have to first activate it for the page.

Customizing a Bootstrap 5 theme

Pinegrow makes using SASS to customize Bootstrap easy.

Visual controls

Tools that transform 100s of Bootstrap classes into easy-to-use visual controls.

Starter templates

Starter templates that let you quickly start a new Bootstrap project.

Display helpers

Display helpers like column resizers, grid and column overlays.

Component library

The rich library of ready-to-use Bootstrap components, including dynamic ones like modals and sliders.

Bootstrap Design Panel

Customizing your Bootstrap theme just got easier with an all new interface for setting fonts, colors, and more.

Bootstrap Floating Tools

Add the most common styling classes without leaving the Page View.

Update projects to the latest Bootstrap version

Learn how to easily update projects to the latest Bootstrap version (Bootstrap 3.x to the latest Bootstrap 3 and Bootstrap 4.x to the latest Bootstrap 4).

Customize Bootstrap 4 Themes

Easily customize your Bootstrap 4 theme by modifying Bootstrap SASS variables and adding CSS rules.

Video tutorials

Watch short videos about working with Bootstrap in Pinegrow. Note, this is a playlist with 7 videos.

All of these features are available for both Bootstrap 3 and Bootstrap 4. A lot of functionality is common to both version, so this guide applies to both versions, and any points specific to either version will be marked as such.

Bootstrap tools

  • Activate Bootstrap tools for your page

    In most cases, Pinegrow will correctly detect the Bootstrap version used on your page. If that fails, manually activate Bootstrap Pinegrow support for your page.

  • Bootstrap Design panel

    The Pinegrow Design panel for the Bootstrap framework allows you to easily set up a custom theme without editing any base files or setting up a complex compiler…

  • Bootstrap Floating Tools

    The Floating Tools panel allows you to style your Bootstrap page with many of the common classes directly within the Page View, speeding up page construction and design…

  • Customize Bootstrap 5 themes

    See how you can use Pinegrow to customize your Bootstrap 5 theme by modifying Bootstrap SASS variables and adding CSS rules.

  • Display helpers

    Grid lines, column overlays and column resizers help you visualize and edit the page layout.

Older content

  • Legacy: Bootstrap 3 and 4

    Bootstrap Blocks

    Quickly build HTML or WordPress based landing page with a rich collection of website blocks…

  • Legacy: Bootstrap 4

    Customize Bootstrap 4 themes

    See how you can use Pinegrow to customize your Bootstrap 4 theme by modifying Bootstrap SASS variables and adding CSS rules.