Last updated on

While we include an extensive selection of Blocks you can use within your site in the WordPress page editor, there is always going to be an instance where the look you envision is something that requires you to use a custom Block builder to fill the need. If you have a working knowledge of HTML and CSS, creating a Block of your own can be easily accomplished. This goal of this 3 part article is to familiarize you with how the Block structure works, how to add content to a Block, and how to style the content with Custom CSS.

The BoldGrid Block Structure

BoldGrid uses a grid system that is based on Bootstrap. To fully understand the structure and Grid System BoldGrid uses, we recommend you review the documentation for Bootstrap 3.3. We will provide an overview of what is needed to accomplish creating your own, but there are a lot of responsive utilities and classes within Bootstrap that can be used within your design.

Since BoldGrid uses Bootstrap for a foundation, having a good knowledge of the predefined classes is essential to creating Blocks that behave as expected across different sized screens. The basic structure of a Block is shown below.

BoldGrid requires a containing element to wrap site contents and house our grid system. When using “container-fluid”, the row is full width, whereas the class “container” indicates a fixed width, which would be dictated by the CSS being used in the theme you are using.

container vs container-fluid

A fluid container (aka container-fluid) is a container that takes up the full width. When you hear “fluid”, think of water. Pour water into a container and it will expand to the full width of the container. Container on the other hand, is a fixed width container that will be centered.

Here are two screenshots that show the difference:

<div class="container-fluid">

<div class="container">

Here’s a 3 minute video that explains the difference and shows you how to change this setting within the Post & Page Builder:

The Content

The content in a Block for BoldGrid should rest inside of columns that are within the 3 divs explained previously. Bootstrap uses a system of rows and columns for layout. Each row has a total column width of 12. This can be divided into one or more columns as illustrated here:

While Bootstrap does have an additional class larger than col-md-*, it is not used within the BoldGrid system since the need to break from >1000 px is not required. Here is table with information about the three separate breakpoints included in the Grid System for BoldGrid.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px
Class prefix .col-xs- .col-sm- .col-md-
# of columns 12
Column width Auto ~62px ~81px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

The following code is an example of how to create a single full width content section in your Block, that will show full width on all devices, such as phone, tablet and desktop.


The following code is an example of how to create a content section in your Block that will show 4 full width columns on your phone, 2 rows of 2 columns on your tablet, and 1 row with 4 columns on your desktop.

Congratulations! You now know how to create a basic BoldGrid Block, and how the structure of a Block is composed. Now its time to add content to your Block

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

8 thoughts on “How to Create BoldGrid Blocks – The Structure

  1. I use Bold Grid because it’s ease of use (at least that’s what has been dubbed). But have difficulties in modifying blocks, columns, rows, etc and now we have to use codes 🙁

    So there’s no way to modify the blocks we get from the library without coding mastery?

    • Hi Andy!

      One technique you can use to create the layout shown in your example link is Inner Rows. Inner Rows function exactly the same as regular ones in terms of layout responsiveness, but are treated as content objects when manipulated in the Post and Page Builder’s Visual editing mode.

      You can build the example layout by starting with a blank Section with 2 columns in it. Then create your 2 Inner Rows and drag them into the right column so they are stacked on top of one another.

      Hopefully you can use Inner Rows to achieve your design goals and please let us know if you have any other questions for us!

Leave a Reply

Your email address will not be published. Required fields are marked *