How to use and customize Bootstrap 4 Blocks | Pinegrow Web Editor
Home/ Documentation/ Bootstrap Blocks/ How to use and customize Bootstrap 4 Blocks

How to use and customize Bootstrap 4 Blocks

Pinegrow features a library of Bootstrap 4 blocks to make assembling a page quick and easy. These blocks are non-opinionated and easily altered to give your pages a custom look.

Not sure about what are Bootstrap Blocks? Read the introduction first.

Adding Bootstrap 4 Blocks

Pinegrow Blocks are now a built-in part of the Pinegrow Bootstrap 4 framework. They allow you to very quickly put together great looking pages.

The Blocks are automatically added to all Bootstrap 4 projects. In situations where Bootstrap is not automatically detected, they can also be added to existing projects by opening the file menu and selecting “Manage libraries & plugins…”.

Pinegrow file menu

Next, from the pop-up window activate the “Bootstrap 4 Blocks”, no other steps required!

Activate Pinegrow Blocks from the manager popup.

Once activated, the Blocks will show up in the Library Panel.

Pinegrow Blocks index

If the Blocks tab isn’t visible, or is closed it can be reopened by clicking on the plus sign to the right of the tabs in the Library and then selecting the “Blocks” tab.

The Pinegrow Library panel add tab control

Blocks can be selected in several ways. When the Blocks tab is first selected it will appear as an index of all the different block types. You can scroll down this list until the correct type of block appears. Clicking on any of the block types will open a graphical list of all the blocks of that type.

Screenshot of Pinegrow Blocks index

As an alternative to scrolling through the index there is a dropdown menu at the upper right corner that allows for the selection of any of the block types. Selection of “Home” from the top of the menu will bring the tab view back to the index.

Pinegrow Blocks dropdown menu

Within the individual component types the magnifying glass can be used to look at how each block will look on different size screens without having to expand and collapse the width of the Library panel.

Pinegrow Library zoom level

Adding Blocks to a Page

In order to add a new Block to a page, all you have to do is drag-and-drop to either the Page View or the Tree panel. Hovering over the Block will add a blue outline to show what will be added to the page.

Highlighting Pinegrow Team Block

Pinegrow also gives the option to swap existing content out with a Block selected from the Library. Simply select the content to be replaced in either the Page View or the Tree panel. Now when you hover over a block you will get an additional “REPLACE IT” tag at the upper-right. Clicking on this will change out the element for the new one.

Note: you can swap between different blocks of the same type, different types, or even replace non-Block content.

"Replace it" tag in the Pinegrow Blocks Library

For some complex Blocks, you can elect to only add part of the Block to the page. There are two ways to accomplish this. Double-clicking on the Block will split it apart into components. Hovering over the split components will again cause a blue border to appear, identifying what parts of the component will be added to the page. Note that the parental nodes of the selected item will also be highlighted with blue to aid selection.

Pinegrow Blocks can be broken down to individual components

The other option is to add the entire component to the page and then delete any undesired parts of the Block.

Editing Blocks

Blocks are fully editable using the Properties and Styles panels. All of the Bootstrap framework options can be added through the Properties panel. For example, changing the background and text colors.

Pinegrow Blocks can be edited in the Properties panel

Text within the block can be edited by either double-clicking or by selecting the text edit icon from the helper menu. Like other Bootstrap elements, column widths and responsiveness can be adjusted through the Properties panel.

Adding Background Images

The Blocks add an additional section to the Properties panel. This section allows you to add background images to Block elements or content added manually. This section also allows you to set the background image position and toggle the cover property.

Pinegrow Blocks adds an extra control to the Properties panel

Finally, this section also has controls not normally found in Bootstrap 4 for controlling the width of borders and for setting the opacity of items, like overlay text.

Dividers

In addition to Blocks containing content, there are also a number of dividers to select from in the Library. They can be placed directly on the page to span the entire width, or within containers to only span a portion of the page. The symbols within the dividers can be edited for size, or replaced with icons, or SVG images.

Pinegrow Blocks line dividers

There are also several dividers composed of SVG shapes. These dividers can be easily re-colored and transformed, for example rotated, to give a variety of different looks.

Pinegrow Blocks SVG dividers

SVG Icons

The Blocks library also contains two sets of SVG icons. One set is the official Bootstrap 4 icon set. The other is the Remix icon set. Icons from both set can be added to the page simply by dragging them to either the Tree panel or the Page View. They can be styled using the Properties panel Text and Background controls, as well as the normal SVG controls.

Pinegrow Blocks SVG icons

Customizing the Bootstrap Theme

As with other aspects of the Bootstrap framework, changing the theme colors of the Blocks is simple with Pinegrow. From the page menu select “Customize & update Bootstrap Theme” to convert your project to use the SASS version of Bootstrap.

Bootstrap SASS theming is activated in the Page menu

Several modals will appear asking for confirmation of the conversion. Once completed, your page(s) will now have a “custom.scss” stylesheet. You can open this within the Styles panel by clicking on the stylesheets dropdown menu at the upper-right of the panel and then clicking on the stylesheet name.

Opening a stylesheet in the Pinegrow Styles panel

The custom stylesheet already has a number of common variables for colors and fonts. To use these variables or fonts they first need to be made active by hovering next to them and clicking on the eye icon.

Toggling rule visibility in the Pinegrow Styles panel

New variables or @import statements can be added in the Styles panel by hovering at the location that you want the new rule inserted and clicking on the orange plus sign that appears.

Adding a styling rule in the Pinegrow Styles panel

You can also edit the stylesheet using the Pinegrow built-in code editor. If the stylesheet is already opened in the Styles panel, clicking on the code icon in the upper-right will open it in the Editor.

Toggling rule visibility in the Pinegrow Styles panel

It can also be opened from the stylesheets dropdown by hovering next to the stylesheet name and clicking the code icon. Finally, it can be opened if the file is selected in the Project panel.

The code icon opens the sheet for editing

In the code editor, any of the variables can be made active by removing the preceding // or /*.

Note: Importing new fonts, either through the Styles panel or in the code editor, typically requires a page refresh. This can be accomplished by either clicking on the refresh top bar icon or typing the hot key (either CMD+R or CTRL+R).