How to Create BoldGrid Blocks - The Structure
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 behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px
Class prefix.col-xs-.col-sm-.col-md-
# of columns12
Column widthAuto~62px~81px
Gutter width30px (15px on each side of a column)
NestableYes
Column orderingYes

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.

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

Leave a Reply

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