How to show Bootstrap Buttons inline instead of one per line in Wordpress Specifically?

admin

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

However, when I copy the buttons code <a href="https://getbootstrap.com/docs/3.3/components/#btn-groups-single" rel="nofollow noreferrer">Straight from this Bootstrap Documentation</a>, like this:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override">
Code:
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;

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


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

<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here"></a>

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

Code:
&lt;div class="btn-group" role="group" aria-label="..."&gt;
  &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;&lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;&lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
&lt;/div&gt;

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. <a href="https://test.coptic-treasures.com/wp-content/uploads/books/z.html" rel="nofollow noreferrer">You can check the results by clicking here.</a> 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 <a href="https://stackoverflow.com/questions/23160549/why-my-bootstrap-buttons-dont-look-so-good">similar question here called: Why my bootstrap buttons don't look so good?</a>, 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:

Code:
&lt;link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet"/&gt;

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.

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

<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here"></a>

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.

<strong>EDIT</strong>:
It seems that the problem is related to WordPress itself. This is because WordPress adds
Code:
&lt;br /&gt;
after each line. This
Code:
&lt;br /&gt;
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:

<a href="https://audio.coptic-treasures.com/no-bootstrap/" rel="nofollow noreferrer">https://audio.coptic-treasures.com/no-bootstrap/</a>

The buttons appear stacked. <a href="https://jsfiddle.net/von2jvj2/" rel="nofollow noreferrer">Here is the code on jsfiddle.net</a>

Post 2: Using Bootstrap CSS and JS sheets:

<a href="https://audio.coptic-treasures.com/bootstrap/" rel="nofollow noreferrer">https://audio.coptic-treasures.com/bootstrap/</a>

The buttons appear stacked too. <a href="https://jsfiddle.net/mtp6pnk3/" rel="nofollow noreferrer">Here is the code on jsfiddle.net</a>

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

<strong>EDIT 2:</strong>

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

Code:
remove_filter( 'the_content', 'wpautop' );

Please refer to this <a href="https://developer.wordpress.org/reference/functions/wpautop/" rel="nofollow noreferrer">WordPress codex reference.</a>

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.