[Resolved] Bootstrap buttons

Home Forums Support [Resolved] Bootstrap buttons

Home Forums Support Bootstrap buttons

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #536556
    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

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #536575
    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

    #536609
    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;
    }
    
    #536771
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.