So I'm building a website with Bootstrap and I also have a local CSS stylesheet I'm using for specific cases. It has worked alright so far, but for some reason, new classes I'm adding won't work. I've tried a number of things already and nothing gives. The class is not even showing up in the inspector (see picture).
What I've tried:
Clearing cache
Trying to be more specific than Bootstrap
Adding type text/css and media all
Here's the basic CSS:
p.description {
color: red;
}
And here is a snippet of the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../public/css/auto-complete.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../public/css/style.css?rnd=28" media="all" />
<link rel="stylesheet" type="text/css" href="../public/css/all.css" media="all" />
</head>
<body class="bg-light">
<div class="container">
<main>
<div class="row g-5">
<div class="col-md-8 col-lg-12">
<form class="needs-validation" action="dbcmds/ajout-outil.php" method="post" enctype="multipart/form-data" name="activity" autocomplete="off">
<div class="row g-3">
<div class="col-sm-6">
<p class="description">Description</p>
</div>
</div>
</form>
</div>
All suggestions welcome! I could inline the CSS but I'd rather do it properly... and understand what's going on!
Many thanks!
Edit------
Here's the structure of the project. The current page is in the admin directory.
Go straight for the route method:
<link rel="stylesheet" href="/public/css/auto-complete.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/public/css/style.css?rnd=28"/>
<link rel="stylesheet" type="text/css" href="/public/css/all.css"/>
Also, I have never seen the media="all" used before, try without.
The CSS file is not able to take effect in the HTML files. What could be the reason if I ask please?
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\Desktop\Header\header.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<div class="header">
</div>
<div class="inner_header">
<div class="logo_container">
<h1>MY<span>APP</span></h1>
</div>
</div>
<ul class="navigation">
<a><li>Home</li></a>
<a><li>About</li></a>
<a><li>Portfolio</li></a>
<a><li>Contact</li></a>
</ul>
</div>
</body>
</html>
Am I making mistake to include CSS file?
The issue is in the path where your css is being called from.
Replace this
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\code\hussain\src\header.css">
with
<link rel="stylesheet" type="text/css" href="header.css">
I cannot connect bootstrap's files from my index.html.as my code file belong ; my index.html file locates in /var/www/html as "localhost" . but when i start to localhost/bootstrap/index.html , i can access my website only without any CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bilsay Mavi
</title>
<link href=../css/bootstrap.min.css rel="stylesheet">
</head>
<body>
<h1>DENEME</h1>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">Bilsay</a>
</div>
</nav>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
I tried <link href=localhost/bootstrap/css/bootstrap.min.css rel="stylesheet"> and <link href=/var/www/html/bootstrap/css/bootstrap.min.css rel="stylesheet">
but I can't access with CSS file .how can i solve this error?
I'm having difficulty with ScrollSpy on my web page. I've tried to put the class file indicators into the correct locations but they are still not showing up.
fiddle
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Unix Command Crib Sheet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="command-crib-sheet.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".thingy">
<div class="navbar-fixed-top">
<h2>Unix Command Crib Sheet</h2>
</div>
<div class="container">
<div class="col-md-3">
<div id="centered-nav" class="bs-sidebar hidden-print affix">
<nav id="thingy" class="nav bs-sidenav">
<li>
...
Yes, just add a class 'thingy' to
<div class="container thingy">
added new css to highlight the text(change style accordingly)
li.active a {
color: red;
}
and finally add this script to page
<script type="text/javascript">
$('body').scrollspy({
target: '.thingy'
});
</script>
last but not least i have changed <nav> to <ul>
<nav id="thingy" class="nav bs-sidenav">
to
<ul id="thingy" class="nav bs-sidenav">
That's it..!
I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.
How would I go about resolving this- my code is attached bolow. ?
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<html>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Website</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog
</div>
</html>
As others have mentioned, using a CDN is usually as easy as adding:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
into your HTML. But this doesn't work when you are loading your html from a local file.
The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.
This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating private HTML that will be loaded from your disk, then you should add the protocol and use the CDN like this:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
I hope this will be useful to someone...
Hi Akkatracker I appreciate your question; it helped me. You can use a CDN for Bootstrap. Here is a simple complete html example where you do not have to download bootstrap since you are linking to a public content distributed network of the css & js files.
Simple Bootstrap CDN HTML Example
<html>
<head>
<title>Bootstrap CDN Simple Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Bootstrap CDN Simple Complete HTML Example</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Please note JQuery needs to come before bootstrap.js. The order of our JavaScript libraries is significant.
Hope this helps
follow this fiddle cdn usage http://jsfiddle.net/MgcDU
css
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
html
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn btn-primary btn-large" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
Learn more about Bootstrap
</a>
</p>
</div>
Make your HTML look like this:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog </div>
</body>
</html>
I am new to using Twitter Bootstrap as well as BootstrapCDN. I did some brief experimenting tonight and I made my site look correct, well almost, using the following 'Head'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
<!-- my custom stylesheet -->
<link href="/word/css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
</head>
So I have replaced the old style sheets with the ones provided at BootstrapCDN.com. I am not sure if it is proper to replace the existing stylesheets, but here goes to experimentation and my result is so so...
This gets everything styled almost right; well maybe its styled totally right. I am still stepping through the DOM tools to see why my modals are non-functional. I suspect my issue with the modals is the JavaScript and the fact the site was just migrated from a local folder.
Using Microsoft Ajax Content Delivery Network as Bootstrap CDN:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Demo</h1>
</div>
</body>
</html>