CSS isn't being applied, can't figure out why. Trying to change the font. This has worked before so don't know why it isn't now. CSS and html files are in the same folder. Working in python/bootstrap/flask/VSC. Here is my css:
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Staatliches');
.container-fluid {
color: red;
font-family:'Staatliches', cursive;
}
body {
font-family: 'Staatliches', cursive;
}
And here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('hello_world')}}"><img src="{{url_for('static', filename='img/logo.png')}}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crap</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crud</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cheesey Potato</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Scorpion</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{url_for('static', filename='img/background.png')}}">
<div class="carousel-caption">
<h1 class="display-2">HELLO!</h1>
<h3>WELCOME</h3>
<button type="button" class="btn btn-outline-light btn-lg">click here</button>
<button type="button" class="btn btn-primary btn-lg">no click here actually</button>
</div>
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background2.png')}}">
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background3.png')}}">
</div>
</div>
</div>
<!--- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">This is an example site.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button>
</div>
</div>
</div>
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Morning!</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Welcome to my website</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-fish fa-5x text-danger"></i>
<h3>Fish</h3>
<p>Browse freshwater and exotic fish</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fas fa-dog fa-5x"></i>
<h3 class="text-danger">Dogs</h3>
<p>Browse our pedigrees</p>
</div>
<div class="col-sm-12 col-md-4">
<i class="fas fas fa-otter fa-5x"></i>
<h3>Otters</h3>
<p>Check out our new range of otters</p>
</div>
</div>
<hr class="my-4">
</div>
<!--- Two Column Section -->
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>If you build it...</h2>
<p>According to Platts estimates and to thermal coal traders who spoke to Platts,
Russian producers continue to seek domination on the European market and have been
putting in a lot of effort to grab more market shares on the Asian markets such as South
Korea and Taiwan.</p>
<p>Last year, the average free on board (FOB) coal prices for the Atlantic and Pacific markets were
both higher compared to 2017, which could be a big incentive for Russia to continue producing and
exporting more coal to seaborne destinations, according to Platts.</p>
<p>Russia’s Energy Minister Alexander Novak briefed on Thursday President Vladimir Putin on the Russian
energy sector production in 2018, saying that the coal production of around 433 million tons was
planned to be reached in 2020. Russia plans to invest around $22.4 billion
(1.5 trillion Russian rubles) in its coal industry and port infrastructure, Novak told Putin.</p>
</div>
</div>
</div>
No changes are being applied when I reload the page in localhost. Any changes made to the HTML are applied, its just the css. Any help is appreciated, thanks.
Just try to request css files for font from header, not by importing them
<head>
...
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
and then check in network panel that the file is being loaded
Seems to be working in my CodePen:
Are you sure that not having a closing </body> and </html> tag are not the cause?
Maybe declaring the same relative directory for your style.css file like:
<link href="./style.css" type="text/css" rel="stylesheet">
Have you checked the style.css file permissions?
Related
I am trying to build a responsive website with bootstrap 4 that shows the sidebar links as a button toggle. My current implementation, when reduce to mobile screen dimensions, shows the sidebar links at the top of the page. Appreciate any help in converting them to a toggle.
Below is my html code:
<!DOCTYPE html>
<html lang="en-US"><head>
<link rel="stylesheet" href="https://themes.getbootstrap.com/wp-content/themes/bootstrap-marketplace/style.css?ver=1590611604">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body class="page-template-default page page-id-49440 woocommerce theme-dokan woocommerce-js dokan-theme-dokan">
<main id="main" class="site-main main">
<section class="section">
<div class="container">
<div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav123" aria-controls="nav123" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section class="section pt-10 mt-md-10">
<div id="the-guide" class="container-fluid">
<div class="row justify-content-between pb-0 pb-lg-2" >
<!--<div class="col-md-3 col-xl-2 d-none d-lg-block" id="inside">-->
<div class="col-md-2 col-xl-3" id="inside">
<ul id="nav123" class=" nav flex-column ">
<li class="nav-item nav-item-heading">
Theme 1
</li>
<li class="{{ 'active' if active_page == 'page1' else '' }}" >
Page 1
</li>
<li class="{{ 'active' if active_page == 'page2' else '' }}" >
Page 2
</li>
</ul>
</div>
<div class="col-lg-9 mb-4 mb-lg-0 order-lg-2">
<h2> this is a test</h2>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</main>
<style>
.pagelink{
color: hotpink;
}
.active {
font-weight: bold;
<!--background-color: lightgray;-->
}
</style>
</body>
</html>
An example implementation where a navbar was converted to a button navbar toggle is below:
<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.0">
<title>Net Ninja Pro - the Book</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
section{
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light pt-5 pb-4">
<div class="container-xxl">
<!-- navbar brand / title -->
<a class="navbar-brand" href="#intro">
<span class="text-secondary fw-bold">
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row g-4 justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dignissimos?</p>
Buy Now
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img src="/assets/ebook-cover.png" class="img-fluid" alt="ebook">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<!-- topics at a glance -->
<!-- reviews list -->
<!-- contact form -->
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
I have tried multiple things that I have read trying to correct this issue, the big one that I've seen says that when you load you will see an error in the console, there is no error so I don't believe that one is my problem. My navbar will collapse as the screen gets smaller, but when you click on the hamburger nothing happens.
Here is my HTML
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<div class="container-fluid">
<div class="d-none d-lg-block center">
<p class="navbar-brand d-none d-lg-block nav-quote">"She believed she could so she did." -R.S. Grey
</p>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#aboutmelink">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html">My Resume</a></li>
<li class="nav-item"><a class="nav-link" href="index.projects.html">My Projects</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html.html">Contact Me</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions
and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and
we no longer hosted websites so my next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img
src="./assets/sylvan_home_logo.png"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego"
href="https://www.sylvanlearning.com/stem/robotics-science"
target="_blank"><img
src="./assets/lego.jpg"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img
src="./assets/tynker.png"
height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
Try this. The main thing here is Navigation bar. I haven't changed the rest. It seems that your markup was not in proper order. I have solved it for you.
Also I have used scripts from your question. I haven't changed their order.
Run the code Snippet
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and we no longer hosted websites so my
next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img src="./assets/sylvan_home_logo.png" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego" href="https://www.sylvanlearning.com/stem/robotics-science" target="_blank"><img src="./assets/lego.jpg" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img src="./assets/tynker.png" height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
I have a pretty simple website HTML, but when I run it in localhost, all the text that isn't within something such as the navbar, jumbotron, etc, automatically appears as a link (shows up blue, underlined, clickable and goes to the top of the page) and I can't see any reason for this. I'm working in Python/Flask/Bootstrap/Virtual Studio Code. Here is a screenshot showing what I mean:
And here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('hello_world')}}"><img src="{{url_for('static', filename='img/logo.png')}}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crap</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crud</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cheesey Potato</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Scorpion</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{url_for('static', filename='img/background.png')}}">
<div class="carousel-caption">
<h1 class="display-2">HELLO!</h1>
<h3>WELCOME</h3>
<button type="button" class="btn btn-outline-light btn-lg">click here</button>
<button type="button" class="btn btn-primary btn-lg">no click here actually</button>
</div>
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background2.png')}}">
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background3.png')}}">
</div>
</div>
</div>
<!--- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">This is an example site.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
</div>
</div>
</div>
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Morning!</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Welcome to my website</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-fish fa-5x text-danger"></i>
<h3>Fish</h3>
<p>Browse freshwater and exotic fish</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fas fa-dog fa-5x"></i>
<h3 class="text-danger">Dogs</h3>
<p>Browse our pedigrees</p>
</div>
<div class="col-sm-12 col-md-4">
<i class="fas fas fa-otter fa-5x"></i>
<h3>Otters</h3>
<p>Check out our new range of otters</p>
</div>
</div>
<hr class="my-4">
</div>
<!--- Two Column Section -->
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>If you build it...</h2>
<p>According to Platts estimates and to thermal coal traders who spoke to Platts,
Russian producers continue to seek domination on the European market and have been
putting in a lot of effort to grab more market shares on the Asian markets such as South
Korea and Taiwan.</p>
<p>Last year, the average free on board (FOB) coal prices for the Atlantic and Pacific markets were
both higher compared to 2017, which could be a big incentive for Russia to continue producing and
exporting more coal to seaborne destinations, according to Platts.</p>
<p>Russia’s Energy Minister Alexander Novak briefed on Thursday President Vladimir Putin on the Russian
energy sector production in 2018, saying that the coal production of around 433 million tons was
planned to be reached in 2020. Russia plans to invest around $22.4 billion
(1.5 trillion Russian rubles) in its coal industry and port infrastructure, Novak told Putin.</p>
</div>
</div>
</div>
I don't have any links I haven't closed so I can't see why it'd do this. If anyone could help it'd be great, thanks. The link issue is in the 'three column' and 'two column' sections in the code.
Seems like you forgot to close an anchor tag somewhere. On a side note,
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
Did you close the </a> tag here?
Not an html expert but i noticed on line 84
Web Hosting
you haven't closed
as i said not html expert but i hope i helped :D
There's an extra div and missing tag. Have left comments which highlight where issues are. C
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></div>
// Missing an </a> tag in above line, also incorrect by html5 spec to include a button within an a tag but that's a separate problem.
</div>
</div>
</div> // Extra div here
Please see the following code. I just want to center content with a footer that appears at the bottom, all of which is inside a background cover image. I've tried doing this with Bootstrap4 containers as well as d-flex configurations, all of which has been an abysmal fail. :(
Presently I'm using two columns that are stacked on top of each other but it doesn't work when you make the screen smaller in height. I'm hoping for the proper way to do this by actually centering content using the entire screen while maintaining a footer.
Also see here for a working demo: https://jsfiddle.net/m05heusn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>t-rex</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!-- bootstrap4 css should load first to be available globally -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js" integrity="sha384-vGq6VlJ/rGDK5hwCZhgtrb5j4nOanwgWgBSe9anrJGQHqCgkBo45u6lAxlVR0U+Q"
crossorigin="anonymous"></script>
<style>
html,
body {
font-family: 'Josefin Sans', sans-serif;
height: 100%;
}
#cover {
background-attachment: scroll;
background-image: url('http://source.unsplash.com/9euUL1nE9aA/1920x1080');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=xyz"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'xyz');
</script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light afixed-top py-4">
<div class="container">
<a class="navbar-brand" href="#">
t-rex
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div> <!-- navMenu -->
</div> <!-- container -->
</nav>
<div id="cover" class="h-100">
<div class="container-fluid h-100">
<div class="row h-100 text-center">
<div class="col-12 align-self-center text-center">
<div class="display-1 d-none d-sm-block">
t-rex
</div>
<div class="display-3 d-block d-sm-none">
t-rex
</div>
</div>
<div class="col-12 align-self-end p-2">
<div class="d-none d-sm-block text-right">
Copyright © 2018 t-rex. All rights reserved.
</div>
<div class="small d-block d-sm-none text-center">
Copyright © 2018 t-rex. All rights reserved.
</div>
</div>
</div>
</div>
</div>
<!-- cover
<script src="https://code.jquery.com/jquery-3.3.1.min.js " integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT "
crossorigin="anonymous "></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo "
crossorigin="anonymous "></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy "
crossorigin="anonymous "></script>
</body>
</html>
In this code block there is "text-right" class:
<div class="d-none d-sm-block text-right">Copyright © 2018 t-rex. All rights reserved.</div>
So, change it to "text-center".
I am trying to figure out why my container is overlapping my header when it comes to the small screen section. My goal is for the container (and all the contents inside of it) to be underneath my header on the page. It works perfectly for the extra small screen part, but the small screen is where it all goes wrong. I am just beginning my journey into bootstrap so please ignore my sloppy code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="css/grid-system-test.css">
</head>
<body>
<header>
<div class="d-sm-none"> <!-- Navbar is only viewable on extra small screens -->
<div class="white-block">
<img class="comp-logo mx-auto d-block" src="img/logo.png" alt="company logo">
</div>
<nav class="text-center">
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
<div class="col-12">
<ul class="nav xs-nav">
<li class="nav-item">
<a class="nav-link" href="#"><p>SERVICES</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>WORK</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>BLOG</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>CONTACT</p></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-sm-block"> <!------------------------ NAVBAR FOR SMALL SCREEN STARTS HERE -------------------------->
<nav class="white-bg text-center small-nav">
<ul class="nav justify-content-center">
<li class="small-nav-item">
<a class="small-nav-link" href="#">SERVICE</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">WORK</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#"><img class="comp-logo comp-logo-small" src="img/logo.png"></a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">BLOG</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">CONTACT</a>
</li>
</ul>
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
</nav>
</div>
</header>
<!-------------------------------------------- CONTAINER STARTS HERE -------------------------------------------------->
<div class="container-fluid text-center">
<h2>VISUAL DESIGN & WEB DEVELOPMENT</h2>
<h4 class="park-city-text">FROM PARK CITY, UTAH</h4>
<div class="row">
<div class="col-6">
<div class="circle-big red-bg ml-4">
<h6 class="text-light center-txt">DESIGN</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big orange-bg mr-4">
<h6 class="text-light center-txt">DEVELOP</h6>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="circle-big green-bg ml-4 circle-margin-top">
<h6 class="text-light center-txt">SUPPORT</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big blue-bg mr-3 circle-margin-top">
<h6 class="text-light center-txt">HOST</h6>
</div>
</div>
</div>
<!-- end of circle images -->
<p class="selectW">SELECTED WORK</p>
<img class="ipad rounded" src="img/apple-ipad.jpg" alt="apple on ipad">
<div class="row">
<div class="col-6">
<p class="float-left ml-3">FEATURED PROJECT</p>
</div>
<div class="col-6">
<div class="circle-sm red-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm orange-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm green-bg small-circle-text float-right mr-2"><p class="font-weight-bold">S</p></div>
<div class="circle-sm blue-bg small-circle-text float-right mr-2"><p class="font-weight-bold">H</p></div>
</div>
</div>
</div>
</body>
</html>