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;
}
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'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.
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.
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/