<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>Image Editor</title>
</head>
<body>
<nav class="navbar navbar-dark bg-info mb-5">
<div class="container">
Online Image Filter
</div>
</nav>
</body>
</html>
I'm trying to use bootswatch and I'm unable to. Do I have it sourced right? I'm currently unable to apply any of its css styles in my html file and I'd like some clarification as to why.
Related
I'm currently using GitHub to host a website. I'm using Font Awesome to get some icons. During testing, everything worked perfectly, but when deploying to Github, the icons disappear.
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous">
</head>
I tried to use a custom CSS file alongside my Bootstrap, but it's not working.
<!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.0">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="bootstrap.min.js"></script>
<title>NRRN Concrete Udhyog</title>
</head>
On this section of the document, I tried to use my own custom CSS:
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/Images /cover.jpg" id="slide-1-background" class="d-block w-100" alt="slide1">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
My CSS code:
#slide-1-background {
background-color: black !important;
}
You could try something like this. It overrides the classes of Bootstrap.
<!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.0">
<!-- bootstrap css link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* -- Your custom css goes here -- */
.custom{
background: #000;
font:10px 'Helvetica',sans-serif;
color:white;
}
</style>
</head>
<body>
<button type="button" class="btn btn-warning custom">Danger</button>
</body>
</html>
Here I can totally assure you that directory is working just fine but still the problem persists.
<!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.0">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../public/css/style.css">
<title>Helper</title>
</head>
<body>
<h1>Just click below </h1>
<button class="btn btn-success">Click Here </button>
<script src="../../node_modules/jquery/dist/jquery.js" type="text/javascript"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Here it should have been button success but it's showing simple button.
The problem is definitely from the bootstrap directory, there is no possible way that there is any other problem, please use a code editor to help you navigate to your directory correctly.
here is a Code with a cdn bootstrap and its working normally.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="col-xl-12 text-center">
<h1>Just click below </h1>
<button class="btn btn-success">Click Here </button>
<button class="btn btn-primary">Click Here </button>
<button class="btn btn-danger">Click Here </button>
</div>
</body>
</html>
This question already has answers here:
Font Awesome 5, why is CSS content not showing?
(6 answers)
Closed 2 years ago.
I am trying to use Awesome icons in a Laravel/Vue project. But for some reason the icon doesn't show properly, whatever I try.
I now tried the most simple thing with Awesome I could imaging: a simple HTML-page using a CDN. The code:
<!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">
<header>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</header>
<body>
<i class="fas fa-camera"></i>
</body>
</html>
But, like in my Laravel project, I am not seeing the camera icon, but some kind of dummy icon: a rectangle with F030 in it.
BTW: I run a Xampp stack under Windows.
What am I doing wrong?
<!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">
<header>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</header>
<body>
<i class="fas fa-camera"></i>
</body>
</html>
I just edited the link with a cdn link from the font-awesome page
, whatever you embed does not include your desired icon
taken from here
So, I've been trying to make the header responsive as it should but it does not seem to work at all.
Any help would be nice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>This is just a test page that does not work on three tested devices any help would be nice.</h2>
</body>
</html>
Enusure to add this <meta name="viewport" content="width=device-width, initial-scale=1">
You can use bootstrap head and it will do it for you.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
Bootstrap is amazing for creating websites: https://www.w3schools.com/bootstrap/default.asp