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?
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;
}
This is the question about Google chrome dev tools and CSS. As following codes, though I input "#media (max-width:1000px)" on style sheet of VSCODE, the tools change to Responsive Web Design at 750px(75%). I don't zoom, and write "viewport" on html. Also the scale is 1.0. Please tell me the solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div></div>
</body>
</html>
div {
width: max(400px, 50%);
height: 400px;
background-color: coral;
}
#media (max-width: 1000px){
div {
background-color: blue;
}
}
As of my comment, the cause was the zoom of page. By putting back the zoom, I could solve the question.
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 am trying to change the width of arrows in a bootstrap carousel. I have worked out that I need to change the width of the carousel.scss. However this is an external library and the css that I have tried (below) doesn't work. I have looked at many examples but I don't know how to incorporate it into my work. I would really appreciate someones help, or even a link to another question that looks like this problem. Thanks
CSS
.modal-body {
padding:15px, 8%;
}
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Trip Guider</title>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
style.css is the custom css file
The easiest way to do this is to add a new stylesheet to your project called "CustomStyles.css". Add your override code to this stylesheet.
Provided you call your stylesheet as the last stylesheet on the page then the styles in "CustomStyles.css" should override the default bootstrap behaviour by default. If it still causes an issue it is possible to force your style to take precedence by marking it as !Important (shown below) but this shouldn't be necessary.
When loading your page after making this change be sure to reload the page emptying cache (ctrl f5) to make sure the original style isn't cached in your local browser.
.modal-body {
padding:15px, 8% !Important;
}
---- Result of chat conversation ------
In essence this solution works fine for overriding styles. In this instance though the wrong style was being overridden. The particular problem was resolved by inserting the following into the new stylesheet.
.carousel-control-prev {
left: -50px;
}
.carousel-control-next {
right: -50px;
}
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.