Bootstrap 3 Ignores custom.css on load - html

I have this very strange problem.
I'm trying to code with Bootstrap 3. in the <head> I declare links for CSS to be used. Although the HTML completely ignores my third link.
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/custom.css" rel"stylesheet">
</head>
As you can see, the third link refering to css/custom.css is there correctly. But on the website it's being completely ignored.
I have tried coding a simple button using
<button type="button" class="btn btn-primary">Default</button>
And in custom.css I have the .btn class
.btn{
border-radius: 0px;
}
So the button's border should be straight not rounded like it is in bootstrap3. Problem is that my custom.css doesn't want to work and it's just completely ignored.
Can anyone please help me with this?
Thank you.
Patryk.

Add '=' after 'REL'.
Your code:
<link href="css/custom.css" rel"stylesheet">
Should be:
<link href="css/custom.css" rel="stylesheet">

If custom.css is correctly loaded than bootstrap code has a higher precedence, so you might want to use button.btn.btn-primary{border-radius: 0px;} or .btn.btn-primary{border-radius: 0px!important;}
As #Damian says it, the custom.css file is not loaded at all.

Related

I have tried linking my CSS to my HTML but it doesn't seem to be working

I am trying to learn HTML and CSS. I have tried using my CSS but it doesn't seem to be working properly.
HTML:
<head>
<link rel="stylesheet" type="text/css" src="styling.css">
<script src="../(public)/js/js.js"></script>
<meta charset="utf-8" />
<title>MyPortfolio</title>
</head>
CSS:
body
{
background : (red);
}
<link rel="stylesheet" href="./styling.css">
The folder directory of your CSS file determines how you link it.
Its best practice to link your script at the end of your web page, before the end of the body tag.
Its not "src", its "href".
<link rel="stylesheet" href="style.css">
I suggest you put that script tag on the bottom of your page.
Oh and one last thing, that css is incorrect. Here's what you should use:
body{
background:red; /* Or #ff0000 */
}

some CSS stylesheet not linking to HTML

I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/bootstrap.css">-->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">

Why i can't use bootstrap and font link in same html file?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
I am using these two links but not applying to my file.
Could you be more specific, what is not working? have you tried changing font-family of the element you want to change font of? Here is font applied to the body.
body {
font-family: 'Lato', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
https://jsbin.com/wotusas/
You can use them both at the same time, that should not be a problem.
To make the font getting applied to your site, you also need some CSS rules. these also need to have higher precedence than the ones from the boostrap file, or the same precedence but applied after the bootstrap file.

My CSS is not working with boostrap 3 [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm starting to build a webpage using Bootstrap 3 (latest version) and for some reason I can't seem to add a background image.
The coding is correct, all files are in their proper folders, etc.
Finally I decided to create another webpage with the exact coding the only difference is that my css stylesheet is not in the css folder. I refresh and the background image appears. When i move the css file back into the css folder, the image is gone.
What is happening? the name of the file is correct, I have added the correct path and I added some other styling besides the background image and they seem to be working perfectly whether or not the css file is in or out of the folder.
HTML WHERE CSS FILE IS IN THE CSS FOLDER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Custom css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
</html>
HTML WHERE CSS FILE IS NOT IN THE CSS FOLDER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Custom css -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
CSS:
body {
background: url(background.jpg) no-repeat center center;
}
.container {
color: black;
font-weight: bold;
font-size: 2em;
}
Root FOlder
If you move the css file to the css folder the image url in the css file should be changed too. If your css file is in the css folder and image is in the root directory then the image url should be
background: url(../background.jpg)
Means go up one folder and search for image.

Import css without overlapping other css containers

Solution:
I asked this question way back with little knowledge in HTML and Javascript. I am sorry for that, anyway the solution here is to not use the same container name to prevent it overlapping other css containers.
Question asked way back ago with little knowledge in JS
How can I import an bootstrap.css file without overwriting other css files?? Is there any way to prevent this? I wish to safe time.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link href="style/shoppingcartstyle.css" rel="stylesheet" type="text/css">
</head>
Thanks in advance!
Change
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
to
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
Your issue after this lies with any !important declared tags in the bootstrap CSS, however anything you write into style.css will not be over-written by bootstrap otherwise, to ensure - if there's something that's important as you declare it in your style.css, add the !important tag, that overrules any previous declarations made by the bootstrap.css - it's a tag there to be used, great when working with UI frameworks.
Make sure to link to the bootstrap style sheet before every other one.
Should be
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link href="style/shoppingcartstyle.css" rel="stylesheet" type="text/css">
The rules for CSS rule cascading are complex -rather than trying to paraphrase them badly, I'll simply refer you to the specification:
Using the !important tag is a sign of a not very well put together website, however you can use this to over ride all other style rules.
Example
p{
color:#FFF !important;
}
What I mean, for instance if I have .btn-primary both inside style.css and bootstrap.css, it will overwrite eachother.