[Resolved] Bootstrap and GP

[Nat]

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)

natguitar.com

Thanks,
Nat

• This topic was modified 8 years ago by Nat.

[Tom]

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.

[Nat]

Hey Tom,

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

http://natguitar.com/index.php/generatepress-test-1/

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="https://app.getresponse.com/add_subscriber.html" 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: https://app.getresponse.com/campaign_list.html -->
<input name="campaign_token" type="hidden" value="token-here" />

<!-- Thank you page (optional) -->
<input name="thankyou_url" type="hidden" value="http://natagosta.com/blog/confirmation/" />
<!-- 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>

</form></div>
</div>
</section>

[Tom]

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.

[Nat]

Thanks Tom,

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

[Tom]

Awesome! 🙂

[Author]

Posts