How to mix bootstrap into the body of a page - wordpress

Question

i want to make a page that is NOT the homepage a bit different from the others. I want that in the "middle" of the page there is no simple text or images, but rather a "complex" structure made of an array of divs with hidden sections that can be shown or not, so not the average wordpress content. I kinda made it in a simple local HTML page using bootstrap as framework, now i have to incorporate this into the wordpress page, but i don't know if wordpress CAN do it, using a closed source theme.
What i should do to achieve this?

Answer 1

At first, need to enqueue the bootstrap file into your theme. Then create a page template where you implement design it. Goto your WordPress Theme Directory edit functions.php and enqueue CSS & JavaScript.
/**
* Proper way to enqueue scripts and styles
*/
function bootstrap_assets() {
wp_enqueue_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css' );
wp_enqueue_script('jquery');
wp_enqueue_script( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_assets' );
After enqueue assets then need to create a page template into your theme folder. you can set it's your preferred name. I use this time name of file test.php.
<?php
/**
* Template Name: Test
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
get_header();
?>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Your Custom Title here</h1>
<p>Your custom description here</p>
</div>
</div>
</div>
<?php
get_footer();
Successfully create page template after need to create a page then select your template & publish it.
If you want to push content via WordPress editor then use the below template.
<?php
/**
* Template Name: Test
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while (have_posts()) : the_post();
the_content();
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_sidebar('content-bottom'); ?>
</div><!-- .content-area -->
<?php
get_footer();