skip to Main Content

I have datetime picker, The problem is no icon appear in the page. But if I disable line (comment out) from local bootstrap.css then add hyperlink bootstrap.css from http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css its worked perfectly. So why? I want to local css file that I used to offline, I dont want to online css rendering.
Here my code :

    <link href="css/bootstrap.css" rel="stylesheet"/>
    <link href="css/bootstrap-datetimepicker.css" rel="stylesheet"/>

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/moment.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>


<script src="js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
 <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' data-date-format="MM/DD/YYYY HH:mm" class="form-control" />
                        <span class="input-group-addon">
                           <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker1').datetimepicker();
               format : 'MM/DD/YYYY'
                });
            </script>
        </div>
    </div>
        </form>
    </body>
    </html>

So its work if with this line,

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

I was downloaded that css then I used for offline but it not working. Please Help
Thank you,

2

Answers


  1. Place all the contents of bootstrap package in the folder including fonts provided by bootstrap

    bootstrap folder structure is like

        bootstrap/
        ├── css/
        │   ├── bootstrap.css
        │   ├── bootstrap.css.map
        │   ├── bootstrap.min.css
        │   ├── bootstrap.min.css.map
        │   ├── bootstrap-theme.css
        │   ├── bootstrap-theme.css.map
        │   ├── bootstrap-theme.min.css
        │   └── bootstrap-theme.min.css.map
        ├── js/
        │   ├── bootstrap.js
        │   └── bootstrap.min.js
        └── fonts/
            ├── glyphicons-halflings-regular.eot
            ├── glyphicons-halflings-regular.svg
            ├── glyphicons-halflings-regular.ttf
            ├── glyphicons-halflings-regular.woff
            └── glyphicons-halflings-regular.woff2
    

    you have not included the Font folder. Just Download the whole whole bootstrap package from there official site and keep the folder structure same and then include the css file as

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
    
    Login or Signup to reply.
  2. Make sure you not only download the css stylesheet but also the glypicons included with it, when you donwload boostrap, it comes with a fonts folder, put that folder in the same directory as the boostrap css.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search