<h1 class="h1name" style="" ><bold><%= #user %></bold><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></h1>
I don't know why I'm getting a fat glyphicon-pencil instead of the correct one as seen in the Bootstrap Components website. http://getbootstrap.com/components/#glyphicons-how-to-use
gem 'twitter-bootstrap-rails'
Is the bootstrap version I'm using on my ruby on rails project
I am using roboto for fonts
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
Another Sample with the envelope glyphicon
without the roboto font it looks like this (still very different from the desired one)
I faced the same problem, I tried by replacing the local file with cdn path. And it works.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Related
I have checked external css file doesn't work in Flask framework etc. other SO questions and my original Udemy source tutorial, but I still can't seem to get my Flask Boostrap app. to pick up my custom CSS file.
From base.jinja2 HTML template file:
{% include 'html_dependencies.jinja2' %}
</head>
<body>
Entire CSS test file in Source/static/css/style.css:
body {
background-color: yellow;
}
(This is test file, body does not change to yellow currently, therefore my CSS appears not to be loading.. I don't really want a yellow background if any style police reading!)
Complete HTML Dependencies file below code, which is loading the main bootstrap files fine, my custom CSS is last file, with url_for and static format syntax as I understand should be correct. Maybe I got the order wrong or some interference from one of Bootstrap files here? Also, I have problem with Bootstrap collapsed nav menu not functioning when window minimised, not sure if this is same cause, the standard lines in box icon shows for navigation when window is below cutoff width, but nothing happens when I click on it.:
<!-- Latest versions available at 31-8-17 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" -->
<!--Font Awesome from https://www.bootstrapcdn.com/fontawesome/ on 31/8/17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Flatly theme from bootstrapcdn.com on 31/8/17 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- do I need jquery as well for the pop-up to work? Maybe already in the JS import -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- custom changes / over-rides to Boostrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
I'm quite a Bootstrap newbie, any suggestions grateful.
I found it is the browser caching that is the problem. On the server this code works fine for me. In both IE and Chrome on my local computer, if I change the custom CSS code, it doesn't pick it up, unless I open code inspector in the browser, click on "Disable cache" option in the code inspector, and keeping code inspector window still open, then reload the localhost website. The below SO question finally sorted me out, and now I am downloading the Chrome extension Cache Killer as per second answer here, otherwise extremely irritating to have to open window and disable cache to check every change in custom CSS! Disabling Chrome cache for website development
I did also fix other mentioned error of collapsed menu issue was due to Bootstrap jQuery import line being below the Bootstrap min.js file. Opening the code inspection in browser showed this error, so moved jQuery line above js line and it loads properly.
Thanks again #senaps pointing me in right direction, confirming to me that posted code itself seems right.
I have a little problem with Angular2 and a CSS-Stylesheet.
I included boostrap in the index.html file of the Angular2-App.
It is no problem in the whole application...
Then I included another library (Bootstrap-switch) in the same way:
<!-- Load external Libraries / Modules -->
<!-- Bootstrap & JQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap Toggle Switch -->
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/bootstrap-toggle.min.js"></script>
<!-- eigener Stylesheet -->
<link rel="stylesheet" href="css/custom.css">
But now I have a little problem:
While the "normal" Bootstrap is functional over the entire application, the Bootstrap Toggle I can only use at the index.html.
If I use it there, no problem, but if I use it at any other page, the styles won´t apply...
Here is how I use the toggle-switch:
<div class="checkbox">
<label><input type="checkbox" data-toggle="toggle" value="">Passwort
speichern (Auto-Login)</label>
</div>
Can someone can help me? Thanks!
I'm using BOOTSTRAP via the CDN hosted by MAXcdn. But now I want to change something in the CSS files, but it's not on my server.
So my question is, how to deal with additional CSS when you are embedding your files via a CDN solution?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Create a new file called custom.css and include it inside <head></head> after the CDN versions.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Your Custom theme -->
<link rel="stylesheet" href="your/path/to/custom/css/file">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
The best possible solution is overwriting CSS rules from bootstrap.css file into custom.css file.
for eg
If you include your css (custom.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Your Custom CSS code should go in this file-->
<link rel="stylesheet" href="css/custom.css">
tip: make sure to add your custom.css file after bootstrap CDN file into your HTML document.
I am trying to use bootstrap to style my page, and I have it linked with
<link href="css/bootstrap.min.css" rel="stylesheet"> which is what given on the website. But bootstrap won't apply when I run my code. I have them in the same folder.
Bootstrap should be the first css link in your head tag, after that the other css links. I don't really know what you mean with "I have them in the same folder." but I hope you mean that you have the bootstrap css files in your css folder.
Try putting it at the top like this:
<head>
<title>Title</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- General CSS -->
<link href="css/general.css" rel="stylesheet">
<!-- font awesome CSS link -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Javascript here -->
</head>
You can also try to use the bootstrap.css file. This will probably be the one you'll be editing as well.
I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.
If you could help me I would really appreciate it it - a lot!
I have done this so far (mocking up the example from codecademy)
What I want:
What I did so far
Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the js/vendor folder
jquery.js (v2.1.1)
bootstrap.js (v3.1.1)
bootstrap-markdown.js (v2.5.0)
he.js (v0.4.1)
to-markdown.js (no version number)
markdown.js (no version number)
index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).
But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?
So far I can get it this way
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
Which is good. But I want to be able to access via the Post button instead.
I tried without luck:
var post;
$(".status-box").markdown( post = e.getContent() );
e represent the markdown edit only inside the onSave function.
So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)
If you want to access it inside your post click function you have to access it in this way:
get the markdown element
get the markdown instance via data('markdown')
use the parseContent function
Code:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
Demo: http://jsfiddle.net/IrvinDominin/fdpM4/
Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.
UPDATE
HI #Norfeldt,
For This you have to follow Below Instructions.
1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.
2.Maintain Correct root Directory path.
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
must be
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
3. Which version of bootstrap-markdown.js lib you are using.
Check this one
Version Compatibility with Bootstrap
Bootstrap Markdown v2.x only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x only compatible with Bootstrap 2.x
Note: Download bootstrap files from Here add add to your html file.
Change path of these js file
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
To
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Hope this will help you...