I am trying to use bootstrap to style my page, and I have it linked with
<link href="css/bootstrap.min.css" rel="stylesheet"> which is what given on the website. But bootstrap won't apply when I run my code. I have them in the same folder.
Bootstrap should be the first css link in your head tag, after that the other css links. I don't really know what you mean with "I have them in the same folder." but I hope you mean that you have the bootstrap css files in your css folder.
Try putting it at the top like this:
<head>
<title>Title</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- General CSS -->
<link href="css/general.css" rel="stylesheet">
<!-- font awesome CSS link -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Javascript here -->
</head>
You can also try to use the bootstrap.css file. This will probably be the one you'll be editing as well.
Related
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <!--Supporting All devices width-->
<meta name="description" content="Lowa State University Library">
<meta name="keywords" content="For a Web Design Assignment">
<meta name="author" content="Tharuka Dananjaya">
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
</head>
<body>
<header>
<div class="container">
<div id="head_top">
<h1>LOWA STATE UNIVERSITY | <span class="highlight"> LIBRARY</span></a></h1>
</div>
<nav>
<ul>
<li>
<li class="current">Home</li>
<div class="dropdown">
<button class="button_book">Books</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
<!--Login
Register-->
Student Info
</ul>
</nav>
</header>
<section id="search_bar">
<div class="container">
<form>
<input type="text" placeholder="Search">
<button type="search" class="button_1">search</button>
`I have external CSS file and Bootstrap. i already link my CSS style in my page and it's work perfect. so I'm try create a table using bootstrap. but after linking bootstrap files in page change every styles. ex. header fonts, everything. So how do i link both Styles and i need both styles.After Linking Bootstrap file
Please first add bootstrap style and then your style.css.
Like
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
in your index.html file in the head section.
The priority of css works from bottom to top.
If you're importing your custom styles BEFORE Bootstrap; as soon as you import bootstrap it will override the classes you may have created in your CSS file.
Try importing bootstrap before your own CSS and see if that makes a difference.
Without any code it's all I can help you at this moment.
Edit
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
As I can see you were indeed importing bootstrap after your own CSS rules. That way Bootstrap is going to override your classes in your CSS files. To get around this flip the order of these two statements so your CSS has prevalence over what Bootstrap states.
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
Also, if you're not providing any font-family attributes in your CSS it's going to use Bootstrap's default. Don't forget to override all necessary classes AND elements (body, p, div...).
Further info on how to apply theming in your own Bootstrap instance can be found here, in the official Bootstrap docs.
Extra tip while debugging: Check in the developer environment you're not getting any 404 in the network requests regarding your links to your own stylesheets since it feels like your styles are not working but actually they are never reaching the browser
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
Compiler tends to read code from line 1. If you put bootstrap.css after the style.css. Definitely bootstrap.css will overwrite style.css.
hi Tharuka Dananjaya,
the problem was totally made from bootstrap external css only.
how to solve?
1. first to check which section is breaking and inspect the element, you can see
the browser take the boostrap css not your style.
so what to do , make that particular css as !important
eg: color:red!important;
make your style high priority!
copy your whole code from style.css, and paste in your html page
as internal css styling way, which means put in b/w head and body.
I have a view for showing my products in it I've used rPage plugin for responsive pagination.but i have a problem with it.when I add bootstrap in top of page. all of element are being mess but rPage has good style.and vice versa when I remove bootstrap link rpage plugin is being mess. I add two images for better understanding.
these are css links in _AdminLayout.
<link href="~/content/materialpro/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- chartist CSS -->
<link href="~/content/materialpro/assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
<link href="~/content/materialpro/assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
<link href="~/content/materialpro/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
<link href="~/content/materialpro/assets/plugins/css-chart/css-chart.css" rel="stylesheet">
<!--This page css - Morris CSS -->
<link href="~/content/materialpro/assets/plugins/c3-master/c3.min.css" rel="stylesheet">
<!-- Vector CSS -->
<link href="~/content/materialpro/assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="~/content/materialpro/css/style.css" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="~/content/materialpro/css/colors/blue.css" id="theme" rel="stylesheet">
Currently rPage is for Bootstrap 3. It's not compatible with Bootstrap 4, and kind of obsolete since Bootstrap 4 has the same functionality's and rPage.
I have generated an navbar colors for my website through:
http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0
I have copied LESS code and input that into my less file and compiles it into style.css. As you can see below my style.css is below bootstrap however colors do not apply to my navbar. Anyone had similar problem and know how to fix it?
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../build/css/style.css" rel="stylesheet" type="text/css" />
This is because on your website you use navbar-inverse class instead of navbar-default.
I'm using BOOTSTRAP via the CDN hosted by MAXcdn. But now I want to change something in the CSS files, but it's not on my server.
So my question is, how to deal with additional CSS when you are embedding your files via a CDN solution?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Create a new file called custom.css and include it inside <head></head> after the CDN versions.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Your Custom theme -->
<link rel="stylesheet" href="your/path/to/custom/css/file">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
The best possible solution is overwriting CSS rules from bootstrap.css file into custom.css file.
for eg
If you include your css (custom.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Your Custom CSS code should go in this file-->
<link rel="stylesheet" href="css/custom.css">
tip: make sure to add your custom.css file after bootstrap CDN file into your HTML document.
I've started using meteor and want to know what is a good way to migrate a HTML file that refers to many CSS files. So far, I found that meteor will automatically load all CSS files in an alphabetic order. My two questions are as follows:
Where should I locate the CSS files? (or from where I can control which directories are loaded)
Is it possible to load specific CSS files in particular order?
Here are the current references I have in my HTML file, before migrating to meteor.
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Libs CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/owl-carousel/owl.carousel.css" media="screen">
<link rel="stylesheet" href="vendor/owl-carousel/owl.theme.css" media="screen">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page Styles -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/blue.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/theme-responsive.css" />
Thank you for your help! :)
There is no need to provide reference of stylesheets in meteor. Just put your css file in client/stylesheets folder. Meteor will automatically apply these css rules.
As stated by #imslavko you can find Meteor behaviour at https://guide.meteor.com/structure.html
However these rules are more relevant for .js code and .htmltemplate files: Meteor merge and minimize all .css in a single file (as long as they are provided by you and not on a CDN) so you will find a single <link rel="stylesheet"> reference in your <head>.
Remember to put all frontend files inside client folder, to avoid unnecessary server loading and availability.
So you can choose your convenient folder structure for .css files, for example put them all in client/stylesheets or use other subfolders to better manage them.