Unable to get bootstrap tabs and pills to work

This topic has 3 replies, 3 voices, and was last updated 7 years by Radu.

Author
March 20, 2017 at 01:29 #156018

labber
Participant

Hello,

We have in-house developed plugins that we use for a specific client that rely on bootstrap. For some reason when I enable you theme non of the bootstrap css seems to work. A good example are pills and tabs, when I put the example code below on a custom page or even in a WordPress page on a fresh install they do not work. I can see bootstrap3.x being included so I’m not sure what’s causing the issue. I installed your theme on a fresh WordPress install on my local machine and only installed the 2 plugins it says it requires and the code below till would not work on a WordPress page.

https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
March 20, 2017 at 01:46 #156019

labber
Participant
This is the specific code I’m having an issue with. I’ve also noticed other bootstrap styles not working such as .list-unstyled.
COPY CODE
```
<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>
```
March 20, 2017 at 22:10 #156152

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
March 21, 2017 at 17:35 #156217

Radu
Moderator
Hi,

The BuddyApp theme it uses only the Grid System and Responsive utilities.

But you can access this link and to http://getbootstrap.com/customize/?id=6c26404ea30172be9961 uncheck the grid system and responsive utilities then you should check what you need to be included on your site for tabs and pills to work, from example you need to have the next components checked (see screenshot)

And also this from jQuery plugins (see screenshot)

Then from bottom of the page you should click download and compile and after unzip the arhive and upload into your buddyapp child theme ( wp-content/themes/buddyapp-child/custom-bootstrap/ ) the bootstrap.min.css and bootstrap.min.js files.

Now you should load those files thru theme using the next functions
COPY CODE
```
function load_css_js() {
    wp_enqueue_style( 'my_custom_bootstrap_css', get_template_directory_uri() . '/custom-botostrap/bootstrap.min.css', false, NULL, 'all' );
    wp_register_script( 'my_custom_bootstrap_js', get_template_directory_uri() . '/custom-botostrap/bootstrap.min.js', array( 'jquery' ), NULL, false );
    wp_enqueue_script( 'my_custom_bootstrap_js' );
    
}
add_action( 'wp_enqueue_scripts', 'load_css_js' );
```
That’s all

Good luck

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts