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.
Related
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">
I found this really cool plugin for Bootstrap that measures password strength. It looks good, and I want to use it, but I can't figure out how to make it work. According to the Github page, all you have to do to use it is "Just invoke the plugin on the password fields you want to attach a strength meter to.". Unfortunately, they don't tell you where to put the files, nor which javascript files you actually need to use.
I've been Googling every possible iteration of ways to add or install plugins for Bootstrap, and have come up empty each time. Does anyone have an answer here?
I guess the github pages can be confusing with all those source files. All you need to do is get the latest minified file from this page:
https://github.com/ablanco/jquery.pwstrength.bootstrap/tree/master/dist
Download it, upload it, and load it into your HTML somewhere after your original bootstrap javascript file using
<script type="text/javascript" src="file/location/pwstrength-bootstrap-1.2.3.min.js"></script>
When you've done that, add the following javascript code to invoke the plugin on a class or element:
$(document).ready(function(){
$(':password').pwstrength();
});
Just include the plugin css and javascripts after defining bootstrap in head of your html page.
something like this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="your plugin source"></script>
To add to previous solutions: also make sure to include jquery in your html because it's required by bootstrap's js.
I'm puzzled by what might be a really simple thing to do or understand.
So I downloaded jQuery UI package with the themeroller with these settings. I only chose datepicker and a custom theme. But when I try to use it the calendar doesn't look right:
I'v added these to my test page:
<link rel="stylesheet" type="text/css" href='Scripts/jqueryui/css/redmond/jquery-ui-1.10.4.custom.min.css' />
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jquery-1.11.0.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jqueryui/js/jquery-ui-1.10.4.custom.min.js") %>'></script>
After investigating more, I realized that the custom css file that was created for me doesn't include the class .ui-datepicker.
So the question is, is this by design? Do I need to add still another base jquery ui css-file? I did not see any mention of this if that is the case. And why is that not included in my package if I need to do that? Or is this a bug? What should I do to get a package that only includes the css/js I need for only datepicker?
Thanks!
Try using this Google Code source
EDIT:
got it. Simply u need to select the Widget tick like this page
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.
edit: I just realized the classes I was trying to have styled are NOT included in the ThemeRollers CSS. I was trying to style .ui-li elements, but these are not included in ThemeRoller. Very misleading and aggravating. I don't recall this ever being addressed on their website.
I have made my first custom theme through JQM's ThemeRoller. The JQM structure CSS that is to be included keeps overriding my custom ThemeRoller CSS. I've tried placing it in the <head> section of the HTML code above and below the JQM structure:
<link rel="stylesheet" href="myCustomTheme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
or
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="myCustomTheme.css" />
I've also tried the !important thing in the custom CSS for the elements that have the incorrect style, but this still is overridden by the structure CSS. Not sure why this is so. How can I use my custom ThemeRoller css so that it overrides the unthemed JQM Structure CSS?
Seeing the clarification in your question.Have you tried giving data-role="none" with the elements you want to give the customized css?
It will prevent those element from getting applied the jquery mobile structure css.
And also you are always allowed to edit the jquery mobile css to your customized styling. We need to use unminified version of jquery mobile css for debugging purpose.