How to show Bootstrap Buttons inline instead of on

Question

I am building a new Wordpress Website and want to utilize Bootstrap.

However, when I copy the buttons code Straight from this Bootstrap Documentation, like this:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

All what I get is a series of buttons shown each one at in a separate line, like this:

The only way to make them show on the same line is to have the code as one continuous line, like this:

<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button> </div>

which is very problematic is the application I want to use them for, and also it is not how the Bootstrap documentation show the code.

I tried this code on several of my WordPress sites on the same server. All have the same problem.

Then I copied the same code and pasted it into a simple html file, this time it showed correctly. You can check the results by clicking here. So it is not a server problem, but also, I tried it in a clean WordPress environment with no other plugins active, and with multiple themes. Still showing the problem.

I found a similar question here called: Why my bootstrap buttons don't look so good?, where the suggested solution was to add the Bootstrap theme link (although other online resources suggested that this theme is not essential).

So I added a theme called: Cerulean a CDN, like this:

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet"/>

The only change in results is that the button colors changed, which means that my WordPress installation is reading the theme. However, the problem remains the same.

This problem differs from the referenced question as the other question does not depend on Wordpress platform. Please read the edit section below.

So, What could be the cause of such a problem? The workaround that I found (by making the whole code one line) is not a practical solution for me.

Thanks in advance.

EDIT: It seems that the problem is related to WordPress itself. This is because WordPress adds <br /> after each line. This <br /> does not appear to the post creator, however it does appear in the post code afterwards.

Please check these two codes, as suggested by @Andrei Gheorghiu.

Post 1: No Bootstrap CSS or JS sheets:

https://audio.coptic-treasures.com/no-bootstrap/

The buttons appear stacked. Here is the code on jsfiddle.net

Post 2: Using Bootstrap CSS and JS sheets:

https://audio.coptic-treasures.com/bootstrap/

The buttons appear stacked too. Here is the code on jsfiddle.net

So the question now is how to use the default Bootstrap code with the default WordPress behavior?

EDIT 2:

The only solution I found is to alter the defualt WordPress behaviuor by adding this function to the theme's function.php:

remove_filter( 'the_content', 'wpautop' );

Please refer to this WordPress codex reference.

This workaround solved the issue and displayed the buttons correctly. However, it makes editing posts problematic. Is there a way to write a function to limit this filter to certain html classes (so I can apply it to the Bootstrap classes)?

Thanks.

Answer 1

If you want WordPress not to add <br> tags for each carriage-return character and <p> tags for each group of consecutive carriage-return characters you have two options:

• disable the wpautop filter on the_content. You can do it globally, using

remove_filter( 'the_content', 'wpautop' );

...in your functions.php or on a post by post basis using toggle autop plugin (i haven't tested it). Keep in mind this will most likely change how the affected content looks (as it will no longer have <p> wrappers and <br> tags added to it).

• the second option is to deal with the problem locally, by changing the markup to no longer include carriage-return chars:

<div class="btn-group" role="group" aria-label="..."
  ><button type="button" class="btn btn-default">Left</button
  ><button type="button" class="btn btn-default">Middle</button
  ><button type="button" class="btn btn-default">Right</button></div>