Using Twitter Bootstrap With Ultimate Page Builder

Building WordPress themes using Twitter Bootstrap with Ultimate page builder has never been easier. UPB has simplified the process and brings an action hook as well as a filter to make it easy for WordPress theme developers to provide Bootstrap Framework support in their WP Themes with Ultimate Page Builder.

Ultimate page builder has grounded up using customized grid system like Twitter Bootstrap so that anyone can build theme without any complication. Here is the way to stop default grid system and provide support of default Twitter Bootstrap.

Adding Support for Twitter Bootstrap

Just copy and paste the following snippet in your theme's functions.php. The code will stop default grid system.

function your_theme_prefix_upb_theme_support() {
   // Supporting custom grid layout
   add_theme_support( 'upb-custom-grid-layout' );

add_action( 'after_setup_theme', 'your_theme_prefix_upb_theme_support' );

Adding Bootstrap Grid Classes

As Ultimate page builder uses a customized grid system and adds upb prefixes for container-fluid, container, row, and col. When you use Twitter Bootstrap grid system, you need to withdraw upb prefixes from the grid classes. Just add the following filter to your theme's functions.php, it removes upb prefixes and adds Bootstrap grid classes.

if ( ! function_exists( 'your_theme_prefix_upb_grid_system' ) ){
    function your_theme_prefix_upb_grid_system( $grid ) {
        $grid[ 'name' ]         = esc_html__( 'Twitter Bootstrap Grid', 'your_theme_textdomain' );
        $grid[ 'allGridClass' ] = 'column'; // default: upb-col
        $grid[ 'prefixClass' ]  = 'col'; // default: upb-col
        $grid[ 'groupClass' ]   = 'row'; // default: upb-row
        $grid[ 'groupWrapper' ] = array(
            'container-fluid' => esc_html__( 'Fluid Container', 'your_theme_textdomain' ), 
            'container'       => esc_html__( 'Fixed Container', 'your_theme_textdomain' ),
        ); // default upb-container & upb-container-fuild
            return $grid;
    add_filter( 'upb_grid_system', 'your_theme_prefix_upb_grid_system' );

HTML Grid Output Before Adding Filter

<div class="upb-container-fluid"> 
    <div id="" class="upb-row"> 
        <div class="upb-col upb-col-xs-4"></div> 
        <div class="upb-col upb-col-xs-4"> </div> 
        <div class="upb-col upb-col-xs-4"></div> 

HTML Grid Output After Adding Filter

<div class="container-fluid"> 
    <div id="" class="row"> 
        <div class="column col-xs-4"></div> 
        <div class="column col-xs-4"> </div> 
        <div class="column col-xs-4"></div> 

NOTE: Don't forget to enqueue Twitter Bootstrap Stylesheet and JavaScript files into your theme.

results matching ""

    No results matching ""