I'm new to the Bootstrap world and I am following an online class to learn Bootstrap.
From there I learnt that I can have custom CSS classes that I can use in my webpage.
So I have created a folder called my project folder and I have linked the path in head of my page.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" herf="css/styles.css">
But now the CSS effects sre not reflected in the webpage
.footer{
background-color: #D1C4E9;
margin: 0px auto;
padding: 20px 0px 20px 0px;
}
I have used sublime as an editor, linux(ubuntu20)
EDIT 1.1 This is the Bootstrap get started template not the one you linked.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
It's a blank slate template, open for you imagination. Try looking at the component section on the Bootstrap website # https://getbootstrap.com/docs/4.5/components/. Adding component in between the body tag will get you started.
Bootstrap uses CDN's Content Delivery Network to load stylesheets and javascript files. CDN's have minimize delays in loading web page content by reducing the physical distance between the server and the user. CDN's don't use local path and have better performances most of the time.
It's common and best practice to use CDN's with a local fallback in case the CDN connection fails. In your case, your problem is probably coming from your local url path. If you don't want to use CDN's make sure your local pathing is right.
You have a typo in your CSS link. the word href is spelled wrong. that's why your CSS can not be detected.
Wrong:
<link rel="stylesheet" herf="css/styles.css">
Right:
<link rel="stylesheet" href="css/styles.css" />
Related
For whatever reason I can't seem to get my custom stulesheet to link to the HTML index. Bootstrap and Font Awesome styles work perfectly though
My HTML IS is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!-- start of scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jquery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- (bootstrap3) Latest compiled and minified JavaScript -->
<!-- end of scripts -->
<!-- start of stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- (bootstrap3) Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- (bootstrap3) Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- end of stylesheets -->
</head>
<body>
</body>
</html>
CSS is:
body {
background-color: lightblue;
}
And the File structure is:
/root
/css
-style.css
/js
-scripts.js
-index.html
Place your custom stylesheet after the bootstrap stylesheet in your head. The browser will read down, so custom stuff always comes last. In your code, Bootstrap would always take precedence over your custom style.
<link rel="stylesheet" type="text/css" href="css/style.css">
Or you can mark your custom css as !important:
body {
background-color: lightblue !important;
}
More on specificity here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There is something you need to know about CSS. your style sheets are read by the order you have added them. so you should add your own CSS file at the end for keeping them from overriding by previous CSS files.
if you have
.bg{background:red} in your first CSS file, and
.bg{background:green} in your last CSS file.
whenever you add .bg to the elements , the background color will be green not red.
On my meteor project, I embed bootstrap CDN on the header. But due to the merged stylesheet is embedded right after the <head> tag, some of my styles are overwritten by the bootstrap. Here is the rough HTML looks like on browser
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=e4358d3b8494bc13eda6b965c33b5902cd562a07">
<meta ..>
<title>...</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
How can I setup the merged stylesheet to be embedded after the CDN or right before </head> closing tag?
That's currently a Meteor caveat, discussions are on-going here: https://github.com/meteor/meteor-feature-requests/issues/24
The possibility to change it will probably come in a future release
I downloaded a premake template of a ecommerce platform that contains css js views and such to apply to my Laravel framework project. It looked very nice but I would like to make some changes, for example color of the background. However once I tried to modified any part of the css file and then undo the modification, the website views gone really bad. the changes were undone but some of the effects seems no longer working after I made such modification, any explanation or solution for me to undo my modification?
I used MarkUps-dailyShop. Modified style.css lets say delete the below code in it
#aa-header {
display: inline;
float: left;
width: 100%;
}
even though i undo such change, the homepage was of some sliding bar and dropdown menu before but now all these effects just gone and left with just words and colors.
I use Laravel 5.2
I place css and js script in the layouts.app as shown below
<!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">
<title>Soyegg</title>
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Bootstrap -->
<link href="{{public_path('css/bootstrap.css')}}" rel="stylesheet">
<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="{{public_path('css/jquery.smartmenus.bootstrap.css')}}" rel="stylesheet">
<!-- Product view slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/jquery.simpleLens.css')}}">
<!-- slick slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/slick.css')}}">
<!-- price picker slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/nouislider.css')}}">
<!-- Theme color -->
<link id="switcher" href="{{public_path('css/theme-color/default-theme.css')}}" rel="stylesheet">
<!-- <link id="switcher" href="css/theme-color/bridge-theme.css" rel="stylesheet"> -->
<!-- Top Slider CSS -->
<link href="{{public_path('css/sequence-theme.modern-slide-in.css')}}" rel="stylesheet" media="all">
<!-- Main style sheet -->
<link href="{{public_path('css/style.css')}}" rel="stylesheet">
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!-- datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<!-- datepicker end -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- contents-->
#include('layouts.navbar')
#yield('content')
#include('layouts.footer')
<!-- jquery-2.2.4.min.js -->
<script src="{{ public_path('/js/jquery-2.2.4.min.js') }}"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Bootstrap.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- JavaScripts -->
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="js/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap Addon -->
<script src="js/jquery.smartmenus.bootstrap.js"></script>
<!-- To Slider JS -->
<script src="js/sequence.js"></script>
<script src="js/sequence-theme.modern-slide-in.js"></script>
<!-- Product view slider -->
<script src="js/jquery.simpleGallery.js"></script>
<script src="js/jquery.simpleLens.js"></script>
<!-- slick slider -->
<script src="js/slick.js"></script>
<!-- Price picker slider -->
<script src="js/nouislider.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
I just found where the problem is. It worked again after I change public_path('css/style.css') to url('css/style.css')
Is Laravel not supposed to read css by local directory?
This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)
<!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">
<title>Bootstrap 101 Template</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
I am attaching the of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.
Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.
Try:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
without the ./ instead.
or the CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Try to use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
in your HTML head.
I have this page
<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", initApp, false);
</script>
</head>
<body>
<div data-role="page" id="start">
...
</div>
</body>
I read here that I can apply styles for the whole data-role="page" container by doing this
.ui-page {
background: #eee;
}
but it doesnt work. My background for the page is always white. I dont want to use JQM styles. How can I apply my body-styles to the jquery mobile "page"?
.ui-content will style the data-role=content area. So for example if you want to style the whole page area you would do this:
.ui-content, .ui-page{background: #eee;}
Keep in mind you will have to move your css underneath the JQM style sheet as someone else already suggested.
Here is an example of it working http://jsfiddle.net/codaniel/7M4Pg/1/
You need to move the application.css header below the framework css files, because your styles are being overwritten by the framework loading. Alternatively, you can add !important to the background rule, like background: #eee !important;, to prevent being overwritten by later stylesheets.