Tell us what you are trying to do?
Trying to customize custom post with bootstrap. For now, I want to know how to use bootstrap with custom fields
Here is the HTML for a custom field on my site which I am trying to turn into a button on the front end:
<p>[types field='learn-more'][/types]</p>
How do I apply a button class to it?
<button type="button" class="btn btn-primary">Primary</button>
I found the above on bootstrap docs
1.After a bit of experimentation, the following worked to bring up buttons:
<p><a class="btn btn-primary btn-lg btn-block" target='_blank' href="[types field="demo" output="raw"][/types]">Demo</a></p>
The colours are basic using bootstrap. How do use a colour of my choice for buttons?
2. When the URL field is filled without hidden link, it returns a 404 page in my own website
Is filling the url with http:// mandatory? Is there a workaround it?
How does the attribute 'no_protocol' work with this?
Dear Siddardha,
It is custom CSS codes questions.
Q1) How do use a colour of my choice for buttons?
I suggest you follow Bootstrap document to apply different color to the button：
hidden link
Q2) Is filling the url with http:// mandatory? Is there a workaround it?
According to HTML document:
hidden link
Attribute Values
Value Description
URL The URL of the link.
Possible values:
An absolute URL - points to another web site (like href="hidden link")
A relative URL - points to a file within a web site (like href="default.htm")
Link to an element with a specified id within the page (like href="#top")
Other protocols (like hidden link, hidden link, mailto:, file:, etc..)
A script (like href="javascript:alert('Hello');")
if you only input text "www.google.com" in the URL, the HTML A link will not work:
<a href="www.google.com">Link to Google</a>
And the no_protocol should work as below:
<a href="//www.google.com">Link to Google</a>,
there is "//" in the attribute "href"
See similar thread:
https://stackoverflow.com/a/8951636
So in your case, filling the url with protocols is mandatory.
Thank you for the detailed explanation
