CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
kmansoor
kmansoor

Reputation: 4345

Why my bootstrap buttons don't look so good?

I'm following the set up outlined in the following:

http://getbootstrap.com/getting-started/

However, my buttons don't look too good, here is the html:

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

Here is how they look:

my buttons

Compare these to the following from:

http://getbootstrap.com/examples/theme/

enter image description here

Mine just don't look as sleek, what am I missing? Thanks.

Upvotes: 2

Views: 1699

Answers (4)

Rexor the Inexorable
Rexor the Inexorable

Reputation: 9

After: 

<title>your title</title>

You should have" 

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

Now Just put this because you are missing this:

<!-- Bootstrap theme -->
<!-- Necessary for buttons to look good -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">

Upvotes: 1

Lucas S.
Lucas S.

Reputation: 702

If you do not set any class to your <div> tags, they're interpreted as CSS blocks, their default behaviour.

In order to obtain an inline result you'd better use the col-lg-* with * a number between 1 and 12 (On bootstrap 3), which will make them inline elements.

Example :

<div class="row">
    <div class="col-lg-2"><button type="button" class="btn btn-lg btn-primary">Primary</button></div>    
    <div class="col-lg-2"><button type="button" class="btn btn-lg  btn-success">Success</button></div>
    <div class="col-lg-2"><button type="button" class="btn btn-lg  btn-info">Info</button></div>
    <div class="col-lg-2"><button type="button" class="btn btn-lg  btn-warning">Warning</button></div>
    <div class="col-lg-2"><button type="button" class="btn btn-lg  btn-danger">Danger</button></div>
</div>

Hope this helps you !

Upvotes: 1

patricksweeney
patricksweeney

Reputation: 4022

You are most likely missing the "bootstrap-theme.min.css" file - it would be helpful if you told us if you were getting console errors.

Upvotes: 5

Dragutescu Alexandru
Dragutescu Alexandru

Reputation: 175

At a first glance i think it has something to do with the css ,your missing something in the your css build . Try to enter in the dev tool and see what your missing .

Upvotes: 0

Related Questions