[Resolved] Bootstrap buttons

[Tanya]

Hi,
I’d like to use Bootstrap buttons on my site.

I am loading the CSS and JS as follows:

function enqueue_scriptsAndCSS() {
	wp_enqueue_script ('bootstrap.min.js','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',array(),'',true);
    wp_enqueue_style('bootstrap.min.css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
}

add_action( 'wp_enqueue_scripts', 'enqueue_scriptsAndCSS' ); 

Here is button code:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-primary">Primary</button>

The buttons look tiny and when clicked, they have dark grey background, which seems to come from generatepress/style.min.css file.

Looks like loaded bootstrap and generatepress styles compete. How could I solve 2 issues:
1. Bootstrap buttons display as normal size
2. Do not take background color from generatepress styles?

You can see blue buttons “Primary” on the home page.

Thank you

[Tanya]

I tried not loading
wp_enqueue_style('bootstrap.min.css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');

Buttons are of normal size, bootstrap 3.3 is loaded, but background is still dark, when I click the button. Looks like it is till taken from generatepress css

[Tanya]

Figured it out

1. One of my plugins loaded Bootstrap 3.3, which conflicted with Bootstrap 4.0
2. I added some CSS to fix :focus state color.

button.btn.btn-outline-primary:focus, button.btn.btn-primary:focus
{
	background:white !important;
	color:#007bff;
}

[Tom]

Glad you got it working! 🙂

[Author]

Posts