<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.
Related
I have modified my datatable to be editable but I ran into a display problem and it looked like below:
I played around in firefox's inspector changing some css settings and fixed the issue so now it looks like this.
What I modified is this block of css it was class="col-sm-12 col-md-12", I modified it so that it's just class="col-sm-12 col-md.
Now how can I make my css changes permanent for this table only? ps, I know the tags say boostrap-4 but I'm actually using boostrap-5. Couldn't find it in the tags.
Try adding an important tag like this to your main css stylesheet to override your bootstrap.
.col-sm-12{width:100%!important;}
In the head section of your html place your custom.css below bootstrap.css to override the styling
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
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.
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export
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.
I need to print web pages in my website and I'm wondering how to make row and spanX classes of Bootstrap work so I can easily manage the content of the printed page.
For example:
<div class="row-fluid">
<div class="span12">
<strong>Some stuff</strong>
</div>
</div>
and
<div class="row-fluid">
<div class="span6 offset6">
<strong>Some stuff</strong>
</div>
</div>
look exactly the same when calling window.print().
In the example above, <strong>Some stuff</strong> is not being pushed ahead by the offset6.
I've done 2 things:
Taken all #media print code from bootstrap.css and
bootstrapresponsive.css;
Changed media to all: from <link rel="stylesheet" type="text/css"
href="/path/css/bstrapmin.css" media="screen" /> to <link
rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css"
media="all" />;
With these changes, header, footer and the bootstrap (original) font have appeared on the printed page but still no effect from/of the classes.
Thanks.
Did you make a separate stylesheet and place it after all other stylesheets and do
<link rel="stylesheet" type="text/css" href="/path/css/print-stylesheet.css" media="print" />
Anything you put in there will override any other styles you have in your media="screen" stylesheets. Just make sure it is the last CSS file called in your DOM.
I forget if you have to include #media print in your print style sheet, I think the media="print" will take care of that