Referencing Bootstrap CSS and custom CSS - html

I am trying to reference my own CSS and Bootstrap CSS in my personal website. But I only can reference to Bootstrap's styles and my CSS background color is gone. Why does that happen?
<!DOCTYPE html>
<html>
<head>
<link href="bio.css" rel="stylesheet">
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-home"></span>Home</li>
<li><span class="glyphicon glyphicon-user">About me</li>
<li><span class="glyphicon glyphicon-home"></span>Resume</li>
<li><span class="glyphicon glyphicon-inbox"></span>Contact </li>
</ul>
<body>
<a href="bio.css">
<div class="row">
<div class="col-sm-12">
<h1><a href="bio.css"> Bio </h1>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<a href="#"><img src="propic.jpg" alt="Propic" width="354" height="354">
</div>
<div class="col-sm-7">
<p><a href="#"> paragraph 1 </p>
<p><a href="#"> paragraph 2</p>
<p><a href="#"> paragraph 3</p>
</div>
</div>
</body>
</html>

Just put your own bio.css after bootstrap.css framework so that your css can overwrite bootstrap.css.
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bio.css" rel="stylesheet">

Your head css calls should be in the right order, bootstrap first, and your stylesheet last so it will override anything in bootstrap css:
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bio.css" rel="stylesheet">
Also make sure not to call a css file in a href tag inside the body as you have done, it's semantically incorrect, unless you want to show that stylesheet, but I don't think you ever would:
<body><a href="bio.css">

Set <link href="bio.css" rel="stylesheet"> after <link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
Check if the color is white

You should put you own css sheet after bootstrap, otherwise the bootstrap will cover you own css since "The last rule defined overrides any previous, conflicting rules". Your head css should be write in that order:
<head>
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bio.css" rel="stylesheet">
</head>
And here is a nice article about css specificity(priority), you can find more rules there: http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Put you own css sheet after bootstrap, otherwise the bootstrap will override your own css and simply change your css name to custom.css.
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Related

HTML doesn't recognize css file and doesn't import it

No idea why I can't seem to be able to import a styles.css file into a standard HTML page.
The code compiles, but my page doesn't receive any changes whatsoever from the css file.
src/main/resources/templates/page.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<div class="card text-center">
<div class="card-header">
<h4 class="new-header">New header</h4>
<a class="btn btn-primary new-button">New button</a>
</div>
</div>
</body>
src/main/resources/static/css/styles.css
.new-button{
float:right;
}
.new-header{
float: left;
}
I've tried switching the href directory link to several others, such as :
/css/styles.css (the one used by a similar project);
/static/css/styles.css (the IDE considers this to be the best one)
You are looking in the wrong directory. Change the href to
<link rel="stylesheet" type="text/css" href="../static/css/styles.css"/>
the double dot at the start are necessary:
../static/css/styles.css

Text is overflowing when using Bootstrap Grid

I'm trying to make a display heading with an image to the left and to the right of the heading. It works great om lg-display but when i make the display smaller the heading text seems to overflow the column to the right making it asymetrical. I would like the images and the text to stay even with smaller screens. Am I doing something wrong with the grid system?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="display-4 text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
I assume you want the text to always fit in the middle div, one way you can achieve this is using vw for length instead of rem
rem:
Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
vw:
Equal to 1% of the width of the viewport's initial containing block.
Check length for more info on this.Final result would be:
.heading {
font-size: 5vw;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="heading text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
i think this is the default behavior of h1 tag
you can change this behavior with overflow-wrap overflow , etc in css

Simple a href to a div not working

This is my HTML and the nav is not working.
This is new to me, the only thing I am doing different this time is using Angular. When I click in any nav button the address bar goes like
http://localhost:8018/#/WebDev
insted of
http://localhost:8018/#WebDev
What am I doing wrong here?
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>DevMash</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto+Mono" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js\angular.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>
WebDev
</li>
<li>
Android
</li>
<li>
Python
</li>
<li>
FAQs
</li>
</ul>
</nav>
<div id="WeDev"><ng-include src="'WebDev.html'"></ng-include></div>
<div id="Android" ng-include="'android.html'"></div>
<div id="Python" ng-include="'python.html'"></div>
<div id="faq" ng-include="'faq.html'"></div>
</body>
</html>
Update: I just want it to work as it does normally in HTML,ie, when tag is clicked, the page should be directed to the target div.
You are supposed to do it in AngularJs Way if you are in an AngularJs environment. if you want to do it in a native way, then remove angularJs from your script.
For more detail, please see https://docs.angularjs.org/api/ng/service/$anchorScroll
I replaced from href="#target" to href="##target". Seems to work.

Banner image doesn't display after directory change

I have a banner header that display's its banner image when in the main directory of the site but once I move the HTML file to a sub folder and update all the links to reflect the folder change the banner image no longer displays. In all of my code editors, the path to the image is set correctly. Below you will find the code in my header and also the section of code that isn't working properly. top-banner.jpg is the question at hand here. All other images on the page work and are in the same directory as the banner image. Any suggestions would be greatly appreciated.
<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>Products</title>
<meta name="description" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/flaticon.css" rel="stylesheet">
<link href="../css/fopen-sans.css" rel="stylesheet">
<link href="../css/raleway-webfont.css" rel="stylesheet">
<link href="../css/lato.css" rel="stylesheet">
<link href="../css/idangerous.swiper.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../img/favicon.ico" rel="shortcut icon">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/responsive.css" rel="stylesheet">
</head>
<div class="wpc-top-header overlay img-bg">
<img src="../img/top-banner.jpg" alt="banner" class="hidden">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="wrapper">
<div class="heading">Our Products</div>
<div class="subheding">
home<span class="round"></span>
pages<span class="round"></span>
Our Products
</div>
</div>
</div>
</div>
</div>
</div>
remove class="hidden" in <img src="../img/top-banner.jpg" alt="banner" class="hidden">
Edit: As can be seen from the provided links, the file /htmltest/js/scripts.js contains:
/*-------------------------*/
/* ADD BACKGROUND IMAGE */
/*-------------------------*/
$(".img-bg").each(function(){
$(this).css("background-image", "url("+$(this).find("img").attr('src')+")");
});
However, the path js/scripts.js is not updated to ../js/scripts.js, and this script is not executed. So just replace all js/into ../js/ in the HTML file.
Your old version adds a style into the div tag with class overlay. Its adding:
style="background-image: url("img/top-banner.jpg");"
So add that to your new <div> but obviously with the new path. That fixes it for me, so to clarify the line should now be:
<div class="wpc-top-header overlay img-bg" style="background-image: url('../img/top-banner.jpg');">

Scrollspy highlighting not working in Bootstrap 3

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..!