This is probably extremely simple but I can't figure it out. I am trying to have a pill show up as it appears in the Bootstrap documentation, however it is simply showing up as basic html text with a bullet next to it. I've looked through the documentation and other similar questions asked here but can't seem to figure out what is wrong.
My code:
<div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
</ul>
</div>
What it shows up as:
Home
Included in my header is:
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
Using Bootstrap 3.3
This seems to be a CSS problem. It is difficult to help you without your full code. Are using local files or do you load bootstrap from CDN?
Make sure Bootstrap is loaded correctly (CSS & Js).
Try replacing your link code with the following to see if it works
<!-- 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">
If it does, your link has a problem.
Related
All of the answers I've seen on here with respect to overriding Bootstrap (v4) with SCSS assume Bootstrap (or Bootstrap's CSS file?) is downloaded to a site directory.
I'm importing bootstrap via the CDN link into my layout.html page and have links to all other CSS files after it. The one linked to SCSS is listed dead last. I'd link to override Bootstrap with SCSS this way.
As a quick example, I couldn't change the font used as the title for every page. The section in layout.html is like so:
<head>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
<!-- Additional CSS use of static dir structure require w/ jinja-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<div class="container siteTitle h-100">
<div class="row h-100 mx-auto">
<div class="col-md-12" >
<h1 id="siteName">Foo</h1>
<h3 id="siteSubTitle">Bar</h3>
<h6 id="siteTagLine">Baz</h6>
</div>
</div>
</div> <!-- end header container -->
</body>
And the SCSS looks like this at the moment:
$siteFont: 'IM Fell English SC', serif;
#siteName, #siteSubTitle, #siteTagLine {
$font-family-serif: $siteFont !default;
}
Other variations (e.g., ditching the $siteFont variable and placing the font name directly in the CSS rule) have been tried. How do I pull this off?
So the short answer to this is - you can't.
That is, you can't change any SASS variables and still use Bootstrap from the CDN. This is because that version of Bootstrap has already been compiled, so the variables (such as $font-family-base or $enable-responsive-font-sizes) have already been substituted in.
As in the discussion above, if you want to change any SASS variables, you need to compile your own version of Bootstrap.
For simple changes this does of course feel like overkill. So it's not wrong to continue using the CDN version and just override things at the CSS level instead. For more extensive changes, SASS is of course the way to go.
So I have been wracking my brain trying to figure out why my CSS file cannot be read by my Xampp server. I think everything is written correctly and all the references are where they should be but I'm not getting different results.
body {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ETB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ">
<a id="logo" href="homepage.html"><img src="media/logotext.png" class="wtv"></a>
<ul id="navigation" class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The bootstrap link is overriding your css link so just put the css link below the bootstrap and it will work.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
Put the link to your css/theme.css after all other references as shown below (it looks like the property was overridden by Bootstrap css):
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
The problem is, I think, that the <body> is only the space between the open and close <body> tags, which is immediately overlaid by the <nav> bar, so the black is being set, it's just that you cannot see it. To set the whole page background, you can use this:
html
{
background-color: black;
}
See this JSFiddle - the body rule does nothing, but the html rule sets the whole page bar the toolbar.
There are two options here:
When you are deploying, whatever the code you are using to deploy is either changing the path of theme.css, or it's not actually copying it over.
Bootstrap.min.css is overriding your css styles (see answer by alex-bell)
Checking #1... I'm honestly not sure, never used your deployment system. Usually I would just check the files on disk and make sure I can access them. Another choice is wherever you access your .html, try accessing css/theme.css through your browser. It should attempt to download the file. If it doesn't attempt to download the file, this is likely your issue.
Checking #2 is easy. Simply open up the page in any browser (let's use chrome for this example) and open Web Developer tools. Inspect the body element, and you will see how specific styles are being applied or overridden.
Get familiar with the Developer tools in your browser. They are very handy at helping solve these kinds of issues.
Using Chrome as an example hit f12 to bring up the developer tools
Go to the Network Tab and reload the page. Check that your css file is being loaded. I suspect not, as your path is css/themes/theme.css is going to resolve to http:\\yoursite.com\folder-where-the-page-is\themes\theme.css. You more than likely want to use /css/theme.css which will resolve to http:\\yoursite.com\themes\theme.css
Once you have confirmed you have the path correct using the Network Tab, you can use the Elements Tab to inspect the various elements of the page. Here you can see what styles are being applied to an element and where they are coming from.
Finally, and unrelated to the Dev Tools, learn about CSS Specificity
I had the same problem. I just decided to put the CSS code on the same document as my html code. All you need to do is type this:
<style>
body {
background-color:black;
}
</style>
I assume you do, but just incase you do not know each html document can contain multiple <style> tags.
I have a private (not public) website. In this website I want to use Lightbox2 (image gallery), but when I run lightbox2, the links of my home page and my background picture don't work.
There is a style.css in my template, and there is also one in lightbox2. I think this is the problem, but I'm not sure. Can anyone help me please?
Simply load in your own stylesheet and the one lightbox uses in the header
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/my_style.css">
At the end of the page you must also load in the javascript that comes with lightbox:
<script src="js/lightbox-plus-jquery.js"></script>
Don't forget to set the right attribute for all your pictures:
<a href="./pic.jpeg" data-lightbox="lightbox">
<img src="./pic.jpeg" style="width:100%">
</a>
I have made a website in dreamweaver using bootstrap 3 and less.
I have used navbar default and customised it.
I have just added some extra pages to my site, such as about.html and blog.html
however, on these extra pages the dropdown menu doesn't seem to work. It does work fine on the homepage, with exactly the same code.
I have wrapped with a < li > already and just copy and pasted all the html into my new html files as follows, to have the navbar there on each page. Please advise if I have done something wrong, I am pretty much a complete beginner.Thanks!
<div class="header clearfix">
<nav class="text-center">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li>
Our Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>jhdhalbalb</li>
<li>hdjdjjdj</li>
<li>bdjdshbd</li>
</ul>
</li>
<li role="presentation">About us</li>
<li role="presentation">Blog</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</div>
Add this to the head section of all your pages:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Sometimes bootstrap local files don't work - doing this will let you know if you should re-download them. This is something that has happened to me before.
Also your HTML is very messy, making it hard to really look through. Try cleaning it up a bit and making sure you're following W3 standards so you can follow your code and others can read it.
You should also read this: http://getbootstrap.com/javascript/#dropdowns Bootstrap dropdowns require an extra .js plugin.
I'm creating an interface using Bootstrap and CSS,but when I run this page without including the project in nodejs program the page appears very well but when I include the bootstrap folder in nodejs program,some icons didn't appear such as the logout icon and login icon(I got a recatngle in place of the suitable icon).Does any one know what is the problem??
Are you using font awsome for the icons? if so have you included those in you code ie,the following code into the head section of your site's HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">?
I added this two tag to the header:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>