How to include bootstrap javascript and css in wordpress post

Bootstrap is pretty handy javascript and css library/layer over jquery which provides many useful pre-built functionalities like responsive design, transitions, modals, buttons, etc. In case you want to include twitter bootstrap in a wordpress blog, you may want to include minimum these files:

1. bootstrap.css
2. bootstrap-responsive.css
3. bootstrap.js (or alternatively you can include specific components like bootstrap-button.js, etc.)

To use bootstrap in wordpress for only specific posts (to keep html of other posts light), one approach is to use a custom variable and enqueue bootstrap css and js if that custom variable is set. Here are the steps to achieve this:

1. Create a new plugin wp-bootstrap-control-include with wp-bootstrap-control-include.php file and js and css folders containing bootstrap files. The plugin enqueues appropriate scripts and css based on custom variable wp-bootstrap-include (or any other variable you prefer). Here is how the code looks like for this:

   <?php
   function wbci_enqueue_js_css () {
     global $post;
     $post_bootstrap_include_value = get_post_meta($post->ID, 'wp-bootstrap-include', true);
     if (in_array($post_bootstrap_include_value, array('true', 'on', 'yes')) ) {
       wp_register_style( 'css/bootstrap-css', plugins_url('bootstrap.css', __FILE__) );
       wp_register_style( 'css/bootstrap-responsive-css', plugins_url('bootstrap-responsive.css', __FILE__) );
       wp_enqueue_style('bootstrap-css');
       wp_enqueue_style('bootstrap-responsive-css');
   
       wp_enqueue_script('bootstrap-js', plugins_url('js/bootstrap.js', __FILE__), array('jquery'), null, true);
     }
   }
   add_action('wp_enqueue_scripts', 'wbci_enqueue_js_css');
   ?>
   

   Note that we have included jquery as dependency for bootstrap.js which makes sure that jquery get included before bootstrap.js.
2. Install the plugin and activate it.
3. Set wp-bootstrap-include to true for the desired wordpress post as shown below:
   
4. To test include the following button toggle code (or any other bootstrap code) in a post which has wp-bootstrap-include set to true.
   

   <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
   

   Here is the outcome for the above code:
   1. Button (normal state)
      
   2. Button (pressed state)
      

Few points to note

1. I have not included bootstrap icons in this article. But you can easily add support for those by including icon files in img directory in the wordpress plugin.
2. You can also access a working version of the wp-bootstrap-control-include plugin on github. The plugin has bare minimum functionalities and you may want to add more stuff to it.