Bootstrap 3 hyperlink as button in navbar

Question

I am not possible to do button hyperlink in navbar, can you help me? I tried lot of options, but no one worked... When I use button, i can not use href, when I use <a> tag and btn classes with navbar-btn it does not look good.

Please give me advice.

Solution

EDIT: Your problem seems to have a more specific answer here: Bootstrap 3.0 Button in Navbar

Otherwise, here is my own observation:

Check out this fiddle: https://jsfiddle.net/8khzok9s/

Here you can see that

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

Looks exactly like

<a class="btn btn-default">Default</a>
<a class="btn btn-primary">Primary</a>
<a class="btn btn-success">Success</a>
<a class="btn btn-info">Info</a>
<a class="btn btn-warning">Warning</a>
<a class="btn btn-danger">Danger</a>

This applies to both standard, click and hover-styles, meaning when the mouse cursor is above, or activly clicking the button.

The problem in your case, is that there are some other css interfering with the standard bootstrap css. In your case it seems like something like this is present:

a{
    padding: 15px;
    color: light-grey;
}

note that your -button has the same text color as one of the other menu-elements. The error is here. What you need to do, is debug your other CSS, and make sure that the (expected) <a>-style is made specific for the elements you want it to affect, insted of being applied to all <a>-elements.

If you are using chrome, right click the element, and choose inspect element, to open a menu where you can access and view all of the different css-attributes that are affecting.

Comments

[jumps4fun]

This answer shows no effort of understanding the actual problem, you are just throwing out a standardized text-book answer, which doesn't help at all here...

[Atilla Arda Açıkgöz]

the question is just as simple as that answer.what kind of answer would i provide? write code for him?

[jumps4fun]

You should provide no answer, until more information is aquired. If you really want to answer a question, ask for more information.

[Atilla Arda Açıkgöz]

no. we should show them a direction and if they need more help they can ask in commends so we can help furthermore.Tbh, if asker would have checked the documentation there wont be any question here afterall.

[jumps4fun]

I disagree with absolutely everything you just wrote. The user has checked the documentation. It is clear that what he has already tried, is exactly what you tried to post as an answer. If you would have taken a little bit of time to ask for more information, it would have been easy to at least suspect that the issue was overriding css, and had absolutely nothing to do with incorrect html-markup, ergo your answer provides nothing more than noise. Your attempt to "show a direction" is futile when you do not understand the problem at all.