{"id":10467,"date":"2017-11-06T16:29:13","date_gmt":"2017-11-06T21:29:13","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=10467"},"modified":"2020-10-01T14:52:26","modified_gmt":"2020-10-01T18:52:26","slug":"create-block-structure","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/create-block-structure\/","title":{"rendered":"How to Create BoldGrid Blocks – The Structure"},"content":{"rendered":"\n

While we include an extensive selection of Blocks you can use within your site in the WordPress page editor<\/a>, there is always going to be an instance where the look you envision is something that requires you to use a custom Block<\/b> 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<\/strong> works, how to add content to a Block<\/a>, and how to style the content with Custom CSS<\/a>.<\/p>\n

The BoldGrid Block Structure<\/h2>\n
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<\/a>. 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.<\/p>\n
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<\/b> is shown below.<\/p>\n