I'm trying to understand bootstrap, I read document on Scaffolding section of http://getbootstrap.com/css/#less-variables.
Here is my simplified code, and it can NOT work.
<!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>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
<![endif]-->
<style type="text/css">
#body-bg: #fff;
#text-color: #black-50;
</style>
</head>
<body>
hi
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>
If you use inline styles you should set body background color in css:
<style type="text/css">
body {
background-color: #fff;
color: #000;
}
</style>
Better solution is to use bootstrap customize on this page or preprocessors like Sass or Less.
The problem is simple, you're trying to redefine LESS variables, you need to do this in your styles.less for example, and from there you can do something like:
#import "bootstrap";
//redefine the bootstrap variables or define your own
#body-bg: #fff;
//#black-50; have to be previously defined since is
//not a bootstrap variable
#text-color: #black-50;
//Now you can do this
body{
background-color: #body-bg; //You can scape this since bootstrap
//will do it for you in _scaffolding.less
color: #black-50;
}
That variables will work in your LESSs files, but when you compile your LESS to CSS will generate just the hex colors.
You're trying to put less variables into css, which is impossible.
Bootstrap converts less files into css code, for example:
less:
#body-bg: #fff;
body{
background: #body-bg;
}
converts to css code:
body{
background: #fff;
}
So if you want to change your bg color You have to change #body-bg: #fff; in bootstrap less file, or overwrite css in your stylesheet.
Related
I'm trying to link my external css file but it's not running when I'm linking bootstrap.
It gets linked when I comment out the bootstrap link.
body {
background-color: black;
font-size: 200px;
}
<!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 href="style.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
it's not working.
</body>
</html>
you should link bootstrap above your own css files
css is cascading so the lower file is more important and can rewrite the upper ones
use !important if replacing your link tags didn't work
Some items require !important to be placed with them in order to over-ride Bootstrap commands.
I can't honestly remember you whether the background or font-size commands on your body element requires it or not but I've used it below as an example.
Add the same thing to any of your custom CSS commands that don't seem to be working.
body {
background-color: black !important;
font-size: 200px !important;
}
I'm building a simple, one-page app using Vue in Laravel. I'm using Bootstrap 4 for general styling. The content of the app is supposed to be printed out, so I'd like to modify the left margin for print only to accommodate a hole punch - that is, increase it to 1". Everything else can remain the same.
Since this is such a small change, I'm trying to do it using an embedded style sheet that I load after vanilla Bootstrap, but nothing I add seems to make a difference. Here's the top of my Blade template:
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- CSS -->
<style>
[v-cloak] {
display: none;
}
#media print{
#page {
size: letter;
margin: 3cm;
}
html, body {
width: 1024px;
}
.container {
width: auto;
}
body {
margin: 0 auto;
}
}
</style>
<!-- Vue.js for development -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>NTI Daily Checklist</title>
</head>
...
I think I've added a 3cm margin all around the page, but Chrome's print preview still shows the narrow default print margin. What am I doing wrong?
I am trying the code in the link shown below for responsive layout design.
1) As it it, if the CSS code is included in the html code displays perfectly as expected
2) But if I move the exact CSS code as a different file and link to it from the html code, visually the boxes layout don't work so well. The result seems similar in different browsers.
Would someone know the reason for that? I was expecting to get more similar visual results
Also would it be good in general for a website html code to include the css in the html code as in (1) or as a different file as in (2)
https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog
Here is the code I used to link to css file
<!DOCTYPE html>
<html lang="en-US">
<body>
<head>
<title>My page</title>
<link rel="stylesheet" href="styles.css">
</head>
here is the top code of the CSS sheet
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
And here is a screenshot of the result
edit
reviewed css sheet code after Lunex answer (top part)
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
Create a css file. Let's say you name it "style.css".
In this file you put all the content which is in the < style > tag.
In your html file inside the head tag you add:
<link rel="stylesheet" href="style.css">
This should be working, considering you've done everything right.
Edit for your edit:
You don't need html tags in your css file.
The content of the html file should be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the body content here -->
</body>
</html>
The content of your css file should be:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
// ...
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
I've searched around a bit and can't find a clean solution.
Bootstrap is overriding my custom css. I have ensured that my custom script file is below the bootstrap css file, but this still doesn't solve the issue.
If i tack the !important tag on to a font-size, that works. I just feel like going through and putting !important after everything is sloppy and time consuming. Thoughts?
I am running a rails app, if that is germane to my issue.
Script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type="text/css">
<link rel="stylesheet" type="text/css" href="style.scss">
CSS
h1 {
font-weight: 600;
color: #fff;
font-size: 5.5em !important;
}
You need to use CSS specificity to override the default Bootstrap CSS without using !important. So your h1 tag could be defined using the following:
CSS
body h1 {
color: #fff;
font-size: 5.5em;
font-weight: 600;
}
Just adding body before any of your CSS declarations should override the Bootstrap CSS. See this Code Pen to see an example with your code.
http://foundation.zurb.com/docs/components/buttons.html
From the doc it is possible to get Custom Color using Mixin. I don't know much about SCSS and trying to get by without using it.
I want Black color buttons instead of the default Blue. It is possible to create some CSS class .black { ... } which will make the button black?
Yes. You can override the css by your own class if you do not know SCSS, though it is recommended to change the SCSS variable value in _variables.scss.
The way for css override is:
create a new css file for example. mystyle.css
And then call the css in the html head after
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/mystyle.css">
<script src="js/vendor/custom.modernizr.js"></script>
</head>
.small black colour button
<body>
Then your css will override the foundation.css class.
add your css class into the button element in html file.
Please see in the above code.
I think that your error might be that it is being overridden and one of the only ways of doing it even though it is frowned upon is to use !important so you would need to use:
.black {
background-color: #000 !important;
}
Also as you have used !important just for the regular one you also need to add it to your hover method so like this:
.black:hover {
background-color: #ccc !important;
}
Edit
Just found out that you don't even need important though if it starts to misbehave then that is what to do
Here is a fiddle:
http://jsfiddle.net/Hive7/p868s/