Archived topic
Bootstrap buttons
3 replies · Started by Tanya on March 30, 2018
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
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
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;
}
Glad you got it working! :)
