Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Bootstrap and GP

Home Forums Support [Resolved] Bootstrap and GP

Home Forums Support Bootstrap and GP

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #181736

    Hey Tom,

    I have a question. I have experience building website using bootstrap. My client has a WP website and he wants me to re-design and redo it based on the BOOTSTRAP sample I sent him.

    Now, his site is huge. And one of the things I suggested him was to have the home page with sign-up form and others call to action.

    Is it possible to simply copy and paste all html and css codes to a WP page in GP and set it as static page as it’s normally done? I mean, I’ve tried, but the result is a complete mess. I have to edit and re-write a lot of code and I see that the bootstrap css file may create some conflict with GP. This is the page I want to set as the home page.

    (Look also the custom navbar)


    • This topic was modified 7 years, 8 months ago by Nat.
    Lead Developer
    Lead Developer

    Hi Nat,

    It probably won’t be that simple, but if the HTML and CSS is all present, it shouldn’t be hard to remove/overwrite the conflicting styles to get a very similar look.


    Hey Tom,

    Well, by copying and pasting the HTML and CSS happens this..

    BTW, I’m using the GP sections here.

    The only way to “fix it” is to remove all the HTML comments and <br> tags. Then I have switch to VISUAL and start editing there (i.e. backspace, etc.)

    Here’s the CSS of the form.

    <section class="optin-form">
    <h2 class="title-benefits">Join the <span class="product-name">Free Mindfulness</span> Newsletter</h2>
    <p class="cta-p">Join today and receive daily mindfulness strategies to increase CALM and FOCUS to become<span class="focus"> Unstoppable!</span></p>
    <div class="row">
    <div class="col-md-8 col-md-offset-2"><form class="form-inline" accept-charset="utf-8" action="" method="post"><!-- Name -->
    <div class="form-group form-name"><input class="form-control" name="name" type="text" placeholder="First Name" /></div>
    <!-- Email field (required) -->
    <div class="form-group form-email"><input class="form-control" name="email" type="text" placeholder="Email Address" /></div>
    <!-- Campaign token -->
    <!-- Get the token at: -->
    <input name="campaign_token" type="hidden" value="token-here" />
    <!-- Thank you page (optional) -->
    <input name="thankyou_url" type="hidden" value="" />
    <!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
    <input name="start_day" type="hidden" value="0" />
    <!-- Forward form data to your page (optional) -->
    <input name="forward_data" type="hidden" value="" />
    <!-- Subscriber button -->
    <button class="btn btn-default" type="submit">SIGN UP TODAY!</button>
    Lead Developer
    Lead Developer

    Hmm, not sure what I can do to help here. You’ll have to make sure all of the HTML is correct and that the necessary CSS has been loaded into GP in order for things to look as they should.


    Thanks Tom,

    I figured that out even though the code looks nasty haha.

    Lead Developer
    Lead Developer

    Awesome! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.