CSS Framework

Page Builder Framework doesn’t rely on Bootstrap or any other CSS framework to reduce load time. Instead it comes with its own, minimalistic CSS framework. Take a look at the helper classes below to easily customize the look of your website.


Grid

To create the grid container, add the .wpbf-grid class to a parent element. To determine the child elements width, add the class .wpbf-* to the elements inside the main grid container.

<div class="wpbf-grid">
    <div class="wpbf-1-2"> ... </div>
    <div class="wpbf-1-2"> ... </div>

    <div class="wpbf-1-3"> ... </div>
    <div class="wpbf-1-3"> ... </div>
    <div class="wpbf-1-3"> ... </div>

    <div class="wpbf-1-3"> ... </div>
    <div class="wpbf-2-3"> ... </div>
</div>
wpbf-1-2
wpbf-1-2
wpbf-1-3
wpbf-1-3
wpbf-1-3
wpbf-1-3
wpbf-2-3

Available Width

The width-classes below can also be used outside the grid component, for instance in combination with the container component (sections). Read more about that below.

ClassDescription
wpbf-1-1100% of the available width
wpbf-1-2divides grid into halves
wpbf-1-3 to wpbf-2-3divides grid into thirds
wpbf-1-4 to wpbf-3-4divides grid into fourths
wpbf-1-5 to wpbf-4-5divides grid into fiths
wpbf-1-6 to wpbf-5-6divides grid into sixths
wpbf-1-10 to wpbf-9-10divides grid into tenths

Responsive Width

Page Builder Framework provides a number of useful responsive width classes. They work just like the usual width classes, except they are prefixed, so that they only come to effect at certain breakpoints. This is great to adjust your layout and content for different device sizes.

ClassDescription
wpbf-*No responsiveness
wpbf-small-*Affects device widths above 480px. Grid columns will stack on 480px & smaller sizes.
wpbf-medium-*Affects device widths above 768px. Grid columns will stack on 768px & smaller sizes.
wpbf-large-*Affects device widths above 1024px. Grid columns will stack on 1024px & smaller sizes.
wpbf-xlarge-*Affects device widths above 1200px. Grid columns will stack 1200px & smaller sizes.

Examlpe

In the example below, the first 2 columns will be stacked at 480px, meaining they’re displayed in halves above 480px. In the second row, the 3 columns will be stacked at 768px, meaning they’re displayed in thirds above 768px.

The third row takes it to an extreme to show you what’s possible by declaring a separate width for each breakpoint. Let’s break it down:

  • on devices above 1200px, the container is using the 100% of the available space
  • on devices above 1024px, the container takes 3/5 of the available space
  • on devices above 768px, the container uses one third of the available space
  • on devices above 480px, the container uses 50% of the available space
  • on devices at 480px or below, the container falls back and uses 100% of the available space.

Otherwise, if we also had declared wpbf-1-3 for the last row, we’d see one third of the space being used on devices at 480px and below with no full-width fallback.

wpbf-small-1-2
wpbf-small-1-2
wpbf-medium-1-3
wpbf-medium-1-3
wpbf-medium-1-3
wpbf-small-1-2
wpbf-medium-1-3
wpbf-large-3-5
wpbf-xlarge-1-1

Grid Gutter

You can change the space between the grid by simply adding a class to the grid container.

<div class="wpbf-grid wpbf-grid-large"> ...

wpbf-1-2
wpbf-1-2

<div class="wpbf-grid wpbf-grid-medium"> ...

wpbf-1-2
wpbf-1-2

<div class="wpbf-grid wpbf-grid-small"> ...

wpbf-1-2
wpbf-1-2

<div class="wpbf-grid wpbf-grid-collapse"> ...

wpbf-1-2
wpbf-1-2

<div class="wpbf-grid wpbf-grid-divider"> ...

wpbf-1-2
wpbf-1-2

Sections

On full-width pages, you can easily create a centered boxed section that receives its width from the width setting in the Customizer under General -> Layout -> Page Width (default: 1200px).

CSS-class: wpbf-container & wpbf-container-center

<div class="wpbf-container wpbf-container-center">Hello World</div>


Elements

Button

You can display buttons throughout your site using the code examples below. These buttons will inherit the styling defined in the WordPress customizer under General -> Theme Buttons.

CSS-class: wpbf-button

<a class="wpbf-button" href="#">click me</a>

click me


Primary Button

Add the wpbf-button-primary modifier class to change the look of the default button above.

CSS-classes: wpbf-button wpbf-button-primary

<a class="wpbf-button wpbf-button-primary" href="#">click me</a>

click me


Modifier

Button modifiers are classes that can be added to the button element above to change its look.

Small button: wpbf-button-small

click me

Large button: wpbf-button-large

click me

Full-width button: wpbf-button-full

click me


Notices

There are classes available in Page Builder Framework that allow you to display notices.

CSS-classes: wpbf-notice

This is a regular notice

Modifier

Add the following classes to your notice to change the style of your notice.

Primary: wpbf-notice-primary

This is a primary notice

Warning: wpbf-notice-warning

This is a warning

Error: wpbf-notice-error

This is an error

Success: wpbf-notice-success

Success message

Full-width & inline notices:

Notices can be displayed as full-width from the block settings
You can also display
2 notices next to each other

Tables

To use the theme’s default table styling, add the wpbf-table class to your table element.

CSS-class: wpbf-table

<table class="wpbf-table"> ... 

In the example below, we see a table that has been modified through helper classes.

CSS-classes: wpbf-table-small & wpbf-table-striped

<table class="wpbf-table wpbf-table-small wpbf-table-striped"> ... 

In this example we display a larger table with hover effect.

CSS-classes: wpbf-table-large & wpbf-table-hover

<table class="wpbf-table wpbf-table-large wpbf-table-hover"> ... 

Visibility

You can show or hide content based on specific viewport widths/devices. The default breakpoints and can be changed with the Premium Add-On.

CSS ClassSmall (Phone)
until 768px
Medium (Tablet)
from 769px to 1024px
Large (Desktop)
above 1024px
wpbf-visible-smallVisibleHiddenHidden
wpbf-visible-mediumHiddenVisibleHidden
wpbf-visible-largeHiddenHiddenVisible
wpbf-hidden-smallHiddenVisibleVisible
wpbf-hidden-mediumVisibleHiddenVisible
wpbf-hidden-largeVisibleVisibleHidden
wpbf-hiddenHiddenHiddenHidden

Helpers

Full width images

This is handy if you’re working on your blog layout for instance. With this helper class your image will set to 100% width so they fit its parent container.

CSS-classes: wpbf-img or wpbf-image

<img class="wpbf-image" src="https://wp-pagebuilderframework.com/wp-content/uploads/2017/03/wpbf-clean-design.jpg">

Floats

CSS-classes: wpbf-float-left or wpbf-float-right


Clearfix

CSS-classes: wpbf-clearfix


Text Modifiers

Left aligned: wpbf-text-left

Right aligned: wpbf-text-right

Center aligned: wpbf-text-center

Justify: wpbf-text-justify

Uppercase: wpbf-text-uppercase


Show Element after Pageload

Under certain circumstances, you may want to show a specific type of content only after page load. To do that, simply apply the CSS-class opacity to your element. This will set the opacity to 0 and trigger a js animation (FadeIn) after the page has loaded.

CSS-Class: opacity


Body Classes

Page Builder Framework adds unique body classes to each post/page for maximum customizability.

  • wpbf
  • wpbf-{page/post slug}

For even more flexibility, we dynamically add body classes based on the current breakpoint. These classes will change if the screen is resized.

  • wpbf-is-desktop
  • wpbf-is-tablet
  • wpbf-is-mobile

Last updated on: May 27th, 2022


Related Articles

Scroll to Top

Download

Download Page Builder Framework and be the first to get informed about new features & updates!

OR

Get 10% off our Premium Add-On (yearly plan).
Coupon Code to enter during checkout: 10OFF View Pricing