I am reading a book on bootstrap to learn it. I downloaded the bootstrap files and included them in my test file: test.html. The issue is that a class "navbar-toggle" is not recognized by my browser and not displayed in firebug. I tried to put the external link to access "bootstrap.min.css", I checked that this class does exist in this local and external file, but nothing works as expected. I have other issues with another class, for example with the "navbar-brand" class which is recognized in firebug but in the "_navbar.scss" file that comes from nowhere, and after having checked, this class is different from the one I should have in "navbar-brand.css". I take another example: The class "icon-bar" is not recognized and displayed in firebug. I can see in firebug that there are some css rules coming from the three files I included (bootstrap.min.css, bootstrap-grid.min.css, bootstrap-reboot.min.css) that are displayed in firebug, but not the three one I discussed above.
Here is the file test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="./bootstrap-4.4.1-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet" media="all" crossorigin="anonymous">
<link href="./bootstrap-4.4.1-dist/css/bootstrap-grid.min.css" rel="stylesheet" type="text/css">
<link href="./bootstrap-4.4.1-dist/css/bootstrap-reboot.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello, world!</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Mon Logo</a>
</div>
<div class="collapse navbar-collapse" id="collapse-1">
<ul class="nav navbar-nav">
<li class="active">Lien actif</li>
<li>Lien 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Lien 3</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Maybe you're simply not looking at the mobile view? ctrlshift+m in FireFox if I'm correct and downsize to <768px.
Guide on mobile view
On another note, you don't need the reboot and grid included if you already have the bundle. These files are used if you only require a reboot style (similar to a reset) or if you only use the grid to give your document structure.
More info on Bootstrap grid
More info on reboot and reset
Make sure the file path's to your assets (css, js, img, ...) are correct by monitoring the network tab in your developer tools (F12 in most browsers) or similarly check the console for 404 errors.
Guide on network tab
On the scss files, I'm not entirely sure if you're watching the result on a local environment? It's a common practice to generate CSS files from SCSS and then pushing the generated files to your local environment. The browser doesn't need the SCSS files but lately is perfectly capable of handling them. In your developer tools are settings to disable sourcemaps and I believe that's what you're experiencing.
plausible duplicate question
For most of us this information comes by experience but I sense a bit this is what you need to move forward. So hopefully this is helpful to you.
Related
I wrote the following for a page in Foundation. I relocated some of the standard files and folders, hence the amended file paths.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="../css/foundation.css">
<link rel="stylesheet" href="../css/app.css">
</head>
<body>
<!--
<div class="row">
<ul class="pagination" role="navigation">
<li class="menu-text">Understood</li>
<li class="disabled">First</li>
<li class="disabled">Previous</li>
<li class="disabled">Next</li>
<li class="disabled">Last</li>
</ul>
</div>
-->
<div class="row">
<div class="large-4 columns">
<!--
<ul class="menu vertical">
<li><button class="button">Home</button></li>
<li><button class="button">Map</button></li>
<li><button class="button">1. Prehistory</button></li>
<li><button class="button">2. Ancient</button></li>
<li><button class="button">3. Classical</button></li>
</ul>
-->
<p>First Bunch</p>
</div>
<div class="large-8 columns">
<p>Text</p>
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/vendor/what-input.js"></script>
<script src="../js/vendor/foundation.js"></script>
<script src="../js/app.js"></script>
</body>
</html>
I've left in some comments because, when I rendered the code in the comments, except for the stuff that is supposed to render columns, it works. However, I'm slowly building up to trying to learn how to make menu bars, and the row containing columns was supposed to be a first attempt at it--so I want the first <div class="large-4 columns"> to contain the menu bar on the left, and the second div to contain the page body. However, as it is now, this renders as just
First bunch
Text
rather than placing them in a left column and right column. As far as I can tell I'm following these instructions correctly:
https://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html
I'm also doing this on my desktop computer so I don't think it should be regarding the screen size as anything but large. I'm using the latest version of Firefox on a Linux machine to view it, and the developer console shows no errors.
it seems like your css file is not loading, try this <link rel="stylesheet" href="css/foundation.css" /> and delete the ../ part.
i hope it will work :-)
best regards, georg
Your code seems correct compared with foundation documentation and I haven't been able to find different documentation about the grid implementation for the Foundation version you seem to be using.
What I can think is if you're sure using the same version of foundation than the link you shared (5.5.3). The latest version docs says Foundation 6 comes with the layout grid disabled by default. It also recommends to use the XY grid, if you don't need to support IE 10.
That would look like this:
<div class="grid-x">
<div class="cell large-4">First element</div>
<div class="cell large-6">Next element</div>
</div>
Cheers,
I was trying to style a php file called dashboard.php with bootstrap. I only wrote some html code in the file to begin. When I test it, I found the styling in 'ul' tag was wrong. However other classes such as 'class="col-sm-2"' 'class="row"' are working as expect.
This is code in the dashboard.php:
<?php ?>
<!DOCTYPE>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" >
<li><a href="dashboard.php">
<span class="glyphicon glyphicon-th"></span>Dashboard</a></li>
<li><a href="#">
<span class="glyphicon glyphicon--list-alt"></span>Add New Post</a></li>
<li>Categories</li>
<li>Manage Admins</li>
<li>Comments</li>
<li>Live Blog</li>
<li>Logout</li>
</ul>
</div><!-- End of side area-->
<div class="col-sm-10">
</div><!-- End of main area-->
</div><!-- End of raw-->
</div>
</body>
</html>
This is the screen shot I made when testing the dashboard.php:
enter image description here
If you chack the image. The left side with words in blue belongs to 'ul' tag. The style is completely wrong. It also failed to add glyphicon icons. I checked the syntax of my html code , there seems nothing wrong.
I also want to add more information:
the extension of the file is .php
I opened the XAMPP with Apache opened
the url that opens the file dashboard.php is correct:
http://localhost/studyexample/PHPCMS/dashboard.php
Can you help me to find why the styling in 'ul' tag is completely wrong? Thank you so much.
The problem here may be that you are using relative URLs for your assets, but have not used a base tag. The easiest thing to do is just add a forward slash to the path to your assets. When I run your code in CodePen it looks like it should:
https://codepen.io/anon/pen/vpWLqo
So, what I mean is, for the following assets:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Add a forward slash so the URLs are absolute:
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
Once you do that, I think you'll find that things start looking different for you. If not, you'll need to specify more of a complete path to the assets, meaning you may need to have the full path, like:
<link rel="stylesheet" type="text/css" href="/studyexample/PHPCMS/css/bootstrap.min.css">
<script src="/studyexample/PHPCMS/js/jquery-3.2.1.min.js"></script>
<script src="/studyexample/PHPCMS/js/bootstrap.min.js"></script>
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 am using arrow up glyph-icon using Bootstrap. when i applied downloaded css in HTML it is not working, but if used full HTTP css path in online it works.below is my code, tell me where is wrong in my code,is it browser version is dependent? if I used https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css. this complete path it works.but I need to add offline.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<body>
<div class="w3-container">
<button class="w3-button w3-xlarge w3-circle w3-red w3-card-4"> <span class="glyphicon"></span></button>
</div>
</body>
</html>
Replace this
<span class="glyphicon"></span>
with
<span class="glyphicon glyphicon-arrow-up"></span>
More information :
https://getbootstrap.com/docs/3.3/components/
Got it! Well, at least if you use the µBlock plug-in in your browser.
For me it worked when checking the "Ignore generic cosmetic filter"-option (or whatever it is called in English) on the "Prepared Filters"-page (or whatever it is called in English).
I tried to figure out where the source of this feature is located to see how that cosmetic filter works, but couldn't find it. I mean there might be a way to work around that cosmetic filter if the element with the glyphicon would be coded differently.
I'm trying to design a website for the first time in bootstrap and I've run into a problem I can't get my head around.
I have 5 pages inside the same directory including the index page.
HTML
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Rules
</li>
<li>
Want to Join?
</li>
</ul>
When I load About and Join from my index page, they load fine but when I try to open the Rules page, it redirects to parked-domain.org.
Similarly, when I am in the Join page and try to open the About or Rules Page, I run into the same problem.
I have all the html files in the directory and I can't understand what's the problem?
Any suggestions?
Similarly skeptical as putvande is about if this is the actual HTML you are using in all of those files so I'd recommend you triple check that but here are some thoughts.
If this is actually what is happening, you may be running into a browser/OS bug, what browser and OS are you testing in?
You may want to try adding in ./ before the links to explicitly say you want it to be a relative URL in the same directory, like
<a href="./rules.html">
I tried to simulate the problem. I don't get any problems in opening any page from anyother page. Please try the following code in all pages. Then try.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WWW- WEB</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Index</li>
<li>About</li>
<li>Rules</li>
<li>Join</li>
</ul>
</div>
</nav>
THIS IS INDEX PAGE..!!
</body>
</html>
If i understand correctly, your rules.html page redirects by itself??
Try directing your URL to the rules.html page by entering: yourdomian.com/rules.html
If it redirects im guessing there is a redirect link in your rules.html page. Hope this helps..
Maybe you want your href link to be relative to your base directory (absolute path)? If you are at www.example.com/folder/thispage.html and your base url is www.example.com/ then a link with a leading forward slash href="/anotherpage.html" will actually point to www.example.com/anotherpage.html
If you do want a relative link, try to make the href link an absolute path href="/folder/anotherpage.html" and see if it works. Perhaps you may want to change the base URL by adding the base tag to your HTML header. See here