Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved How To Make Bootstrap Labels And Badges Become A Link (Like Button).


Question

Posted · Report post

Hi,

PL 2.3.5

I like this tiny look of Labels and Badges, so I want them to be clickable.

I know I can use Buttons but still want labels and badges for design purpose.

Is there a way to customize colors in them?

tnx

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi,

Labels like Buttons and Badges come in multiple colors, you can view all the colors available here - http://demo.pagelines.me/tools/

Although, Labels and Badges don't support the function to be used as a link "Out of the Box", you could add HTML to create a link. However, you could simply use the button shortcode and use the mini button to have a similar effect.

Share this post


Link to post
Share on other sites

Posted · Report post

thank u for ur answer.

there are only 6 colours available.

and yes, Id like to have clickable badges and labels.

what exactly needed to make them links?

ty

Share this post


Link to post
Share on other sites

Posted · Report post

Well the Labels and Badges do not support links, so in doing this you will need to apply some custom CSS.


.label a, .badge a {
color: white;
}
[/CODE] To add a link to a label or badge you will need to use actual HTML and not the shortcode. See the example below.
[CODE]<span class="label label-purple"><a href="http://www.pagelines.com/">Purple Label</span>
To create custom colors, use the code above to add your custom class ( see label-purple ) this is a custom class and then use the custom CSS below to style the label and badge.


.label-purple, .badge-purple {
background-color: purple;
}


[/code]

If you need to see other HTML code for labels and badges, visit this page - http://twitter.github.com/bootstrap/components.html#labels-badges

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

wow thank you, worked like a charm

resolved

Share this post


Link to post
Share on other sites