[Resolved] Bootstrap 4 and GP3.

[Matt]

Hi, I have been using the GeneratePress theme for a couple of years to develop in. I build my sites using bootstrap 4 and then add them in to a wordpress installation as templates. Since the flexbox option was added in, the sites have never displayed correctly until I checked the box that said use floats not flexbox. I notice on a new installation that I have just created that there is not option for this anymore. I understand from reading other forum posts that flexbox is better and floats are being depricated, however I like Bootstrap as a framework and don’t really want to stop using it. Is there a way I can use bootstrap for my content and flexbox for anything to do with the theme?
Thanks

[Matt]

Strangely enough I have used a template for a custom post type (single-projects.php) which contains bootstrap code and the bootstrap floats are displaying correctly.

When I create the page-XXXX.php files I am using
`<?php /**
* Template name: home
*
*/

get_header(); ?>

…….

I guess this is hooking into the get_header(); functions which is what the theme customiser is affecting. I am seeing all the content displayed side by side on the normal pages.

If this is correct do I need to use the bootstrap code for each page as a new template? If so what Generatepress page would I use to call this template? I imagine I would have to use get_template_part();

[David]

Hi there,

can you share a link to a page where i can see the issue ? It may be something like a width property thats required to stop containers from collapsing inside flexbox.

[Matt]

I managed to fix the problem by using your header and footer code from the page.php file. Before I was just using:

<?php /**
* Template name: home
*
*/

get_header(); ?>

Content here

?>
get_footer();

This above example was making all the divs collapse width-wise and was displaying them next to each other.

Now I have used the below example which makes everything display as it should:

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>

	<div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
		<main id="main" <?php generate_do_element_classes( 'main' ); ?>>
			<?php
			/**
			 * generate_before_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_before_main_content' ); ?>

content here
<?php
/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );
			?>
		</main>
	</div>

	<?php
	/**
	 * generate_after_primary_content_area hook.
	 *
	 * @since 2.0
	 */
	do_action( 'generate_after_primary_content_area' );

	generate_construct_sidebars();

	get_footer();

and it all seems to be working fine.

[David]

Glad to hear you found a solution

[Matt]

Thanks David for your ace support!

[Author]

Posts