CODEWITHSUNDEEP
csstwitter-bootstrapcordova
Sujit Y. Kulkarni
Sujit Y. Kulkarni

Reputation: 1386

Bootstrap buttons not taking effect in phonegap

I'm using Twitter bootstrap's bootstrap.min.css for styling my phonegap app. But I do not see the desired UI of DOM elements affected by bootstrap. For example, in Base CSS it is shown that btn btn-primary classed button is colored blue and has some gradient on it. Looks nice. But this thing looks so ugly gray colored if I run this on emulator. Why is that so? Isn't bootstrap good for phonegap?

ADDING CODE AND SCREENSHOT Unpleasant UI rendering

<!DOCTYPE HTML>
<html>

  <head>
    <title>Call the cab</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="css/bootstrap-responsive.css" rel="stylesheet">
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="css/custom.css" type="text/css">
  <script src="js/bootstrap.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/heartcode.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
  </head>
  <body onload="onLoad();initialize()">
    <div id="wrapper" class="container row-fluid ">
    <div id="headerdiv" class="span12">
                <header style="vertical-align:middle;">
                <h1>App Name</h1>
                 </header>
    </div><!--End of header-->


    <div id="inputs" class="row-fluid"> 
            <form action="file:///android_asset/www/pickup.html"  onsubmit="return saveInputs()" class="form-inline form-actions">  
            <input type="text" id="pickup"  onblur="unlockDestiny();codeAddress(this.value)" class="input-block-level"/>
            <input type="text" id="destiny"  onblur="codeAddress(this.value)" class="input-block-level"/>
            <label class="checkbox">
<input type="checkbox" value="">
Remember this
</label>
            <button type="submit" class="btn btn-primary">Save changes</button>
            </form>
    </div><!--End of inputs-->

    </div><!--End of wrapper-->
     </body>

</html>

Upvotes: 1

Views: 1368

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

Have you double checked that the path to the CSS files is correct, and that there's nothing in css/custom.css that is overriding the Bootstrap button styling?

Upvotes: 1

Related Questions