I am beginner to bootstrap and building a website using HTML5 and bootstrap.
It was working fine. After 2 days, some page contents are not displaying. That particular section and container is not displaying.
What may be the issue and solutions?
enter image description here
I think you are using some online css file. In this case if you are offline, your browser can't loud the css files.
for example: if you are using css like this,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
please download bootstrap file and put in your project folder and use like this to can use this in offline mode too;
<link rel="stylesheet" href="../css/bootstrap.min.css">
Related
I developed a website using HTML and CSS which is working fine on desktop but when I copied my site folder into mobile it didn't load my CSS and JS files.so what should I do?
<head>
<title>mobile</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./scripted.js"></script>
</head>
You can use the Chrome DevTools "Remote Debugging Android Devices" as described here:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
In my opinion, this is the most convenient way to test your HTML page.
Another way to open an HTML file on your mobile, with all the scripts and styles, is to deploy a local server that will be accessible within your local network and configure it to return an HTML page with all its dependencies.
As far as I know, just opening an HTML file with styles and scripts that are rendered into other files will not work.
By the way, you can place your CSS and JS code in a file with HTML, but it seems to me that this is not a very good solution.
So I just discovered the bootstrap and I'm trying to implement it into my small webpage/app so that I can make my form/console box more visually appealing.
After integrating bootstrap as an external resource in jsfiddle, the prototype of my app/page still works. See:
code to make the red box go away
jsfiddle
As you can see, the jsfiddle version of my app is working properly
But when implementing bootstrap into the actual site, everything is out of wack...
Actual site
As you can see, the main image and output of text is completely gone and the structure of the form/console is also gone.
Can anyone explain what's going on here?
Am I integrating the CSS file incorrectly or am I just implementing bootstrap incorrectly, in general? Here's some the of the HTML file uploaded to the server:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="textualizer.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Or does it have something to do with the CSS selectors and maybe they get altered after integrating bootstrap and that's why it's not working in the actual site? I'm totally lost here as to why it works in the jsfiddle but not with the actual site. (usually when I'm completely lost on something of this magnitude, the answer ends up being the most simple thing that I just happen to overlook)....
As you can see in bootstrap docs, it has some markup with css classes to get what you wanted. example, <div class="container"> </div>, <button type="button" class="btn btn-default">Submit</button> etc. It will not get applied automatically to your html page by just adding the css reference. Since you used your custom css styling in jsfiddle it works fine. However, since you have not used your custom css in your website, it will render as plain html markup without any styles.
Hence, please change the markup with bootstrap layout and classes for your website and see the result. If you wish to override colors, etc, you can use a custom css file just after the bootstrap core css file as:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mycustomstyle.css">
You can make overrides to the bootstrap core styles in mycustomstyle.css file. Just read bootstrap docs thoroughly to get an idea about using it in a website/web application.
I am trying to make a small app in angular and am trying to include the Bootstrap CDN into the head section. My current head section looks like this:
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
</head>
When I go to refresh the page none of the bootstrap changed have been made. Is this something going on with Angular or am I just making a dumb mistake?
You have the wrong URL. You can plug it into your browser to see where it takes you.
yours:
http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css
correct one:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
To make sure you have the correct one, always get it from here: http://getbootstrap.com/getting-started/
For me, Instead of using CDN, Adding and referencing the bootstrap css file locally in dist folder(or whatever folder you have generated via Angular fixed the issue.
I am using extjs 4.0.7 library in my project. I noticed that if i use web link reference to css file like :
<link rel="stylesheet" type="text/css"
href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
The screen displays fine, but if I just include same ext-all.css file in my project
<link type="text/css" rel="stylesheet" href="css/ext-all.css"/>
The screen comes out distorted. This happens in IE browser only and works fine in FF and Chrome. Did anyone have this problem before? Any solution?
I am creating an application using jquerymobile framework.
My application works as desired on localhost but once I upload my application on server, Javascript and css does not work and my application user interface and functionalities are being destroyed.
If I replace the javascript and css relative path
<link rel="stylesheet" href="webroot/css/jquery.mobile.css" />
<script src="webroot/js/jquery.js"></script>
<script src="webroot/js/jquery.mobile.js"></script>
to absolute jqueryMobile framework path
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="http://jquerymobile.com/test/js/jquery.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>
. It works.
But on localhost the JS and CSS files relative path is working.
Please suggest, where is the bug, in my application or in jqueryMobile js and css files.
maybe if you try this:
<link rel="stylesheet" href="/webroot/css/jquery.mobile.css">
<script src="/webroot/js/jquery.js"></script>
<script src="/webroot/js/jquery.mobile.js"></script>
note the slash at the start?
While uploading file on server using filezilla, I think file was not uploaded successfully. Then I changed the filezilla default transfer type setting to Binary. Not it is working fine.
If you want to change this setting then go to Edit > Settings > Connections > Transfers > File Types
Change "Default transfer type" Auto to Binary. Press OK button
It worked for me.