Twitter Bootstrap buttons lacking border?

Question

Im testing Bootstrap on an empty website but I have a strange problem.

I have a website document with the code <a href="#" class="btn">Download</a> wich should make a nice gradient button but to me, that isn't the case.

The button is gradient gray but there is no border and the padding bottom and top seems wrong.

To the left - My button

To the right - How it SHOULD look like

Im using the bootstrap.css and bootstrap-responsive.css files.

Can anyone please tell me why this is happening?

Answer 1

add btn-default or any other btn-styling css class (enter link description here):

<a href="#" class="btn btn-default">Download</a>

Answer 2

Check which version of Bootstrap you are using. I just upgraded to Bootstrap 3-something from 2-something and buttons did indeed look different than I was expecting - it seems to be what they've decided is the new style! Personally I prefer the old style as well...

Answer 3

When I changed the stylesheet link to "bootstrap.min.css" it started looking like it should. :O

Can this be a bug in the stylesheet I have maybe? Think im using the latest version..

But anyhow, now it works like it should.

I just have to say something about Bootstrap btw. I really love to use Bootstrap just for the graphical interface icons, buttons, styles and classes Bootstrap adds.

Answer 4

If you are not referencing another css file other than the bootstrap and bootstrap-responsive files, then you should check to ensure that you are correctly referencing the files in your html document (check your Link tag in the html).

I tried to replicate the problem, but it works fine for me. Also, make sure that you downloaded the full version of bootstrap (remember that you can customize bootstrap).

You can debug the web page by using the chrome or firefox "Inspect Element" feature or F12 in IE to see when the css rule being applied is coming from.