I am trying to add a nice background color to a website page. This should be straightforward using background-color in my CSS file, but it won't show. So far, I have played around with my HTML code and found out that when I remove a link to a bootstrap 4 CSS file in my header, it displays perfectly. However, I need to keep bootstrap 4, so I tried other fixes:
body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4;}
The background-image: none, height:100%, or the padding:0% weren't effective compared to removing the bootstrap 4 link:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Any guidance at all would be greatly appreciated solving this issue without removing bootstrap 4.
By default, Bootstrap uses a white background. You will need to use the !important flag to override it.
body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>hi</body>
Related
I want to add background color when using boostrap 5.2 , but it seemed like it is not working at all.Even if I used CSS to add background color or using bg-primary for example , nothing happen.
I want to add background color when using bootstrap 5.
My code:
footer {
margin-top: 160%;
width: 100%;
background-color: #09249e !important;
}
Did you import Bootstrap styles?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="bg-primary" >
This text have blue background.
</div>
I'm using a the Hugo Bigspring theme with Bootstrap 4 on a website. My primary call to action buttons are orange vs. the secondary green. However, my orange buttons turn green on hover and I cannot figure out why.
Code for the button:
Contact Us
CSS:
.btn-primary:hover,
.btn-primary:focus {
background-color: #F37021!important;
border-color: #F37021!important;
box-shadow: none;
outline: none;
}
.btn-primary {
color: #fff;
background-color: #F37021!important;
border-color: #F37021!important;
You can view the site live here: https://www.bridge12.com.
The orange buttons are on the top right and the bottom of the page.
Really appreciate your help - I've been banging my head against the wall for hours on this one.
This code block in your CSS is changing the color:
.btn-primary:active,
.btn-primary:hover,
.btn-primary.focus,
.btn-primary.active {
background-color: #46812b !important;
border-color: #46812b !important;
}
By checking your website and inspecting the element this is what is shows
So it looks like either bootstrap or another custom CSS is overwriting your code.
Make sure that bootstrap css is always loading before your custom code.
Your background-color for btn-primary is set to #46812b!important; which i am sure it is not bootstrap css, that only means that you have that declared somewhere in your css. double check and you will find it.
Thank you all - this was very helpful. I was loading the style sheets in this order:
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="http://localhost:1313/css/custom.css">
<link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>
Changing it to this fixed it immediately:
<link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="http://localhost:1313/css/custom.css">
Huge Thanks!
I have seemed to encounter an unknown space below the div pair.
I have used the bootstrap grid concept and made use of rows and columns to have 2 adjacent Divs.
Then I have used CSS to make the div fill the whole space of the screen but I seem to get unaccounted for white space below the divs.
I have already tried including an advanced CSS reset.
Here is the html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>
I am unable to comprehend this unaccounted space.
Since you probably have noticed (by the comments), your code seems to work fine.
Your problem seems to be somewhere else in your CSS.
First, try to use the following CSS to see if it works:
* {
padding: 0 !important;
margin: 0 !important;
}
If that worked, you can delete it and you need to start debugging.
Open up Chrome DevTools and go to Sources -> Page and find your CSS file(s). Try to delete each CSS block one after the other. If there is no more space between, you may found out where the problem is.
this is default margin, Please add this code body{margin: 0;padding: 0;} in css
I have an image that is 1007px x 81px that I am using as the logo of a website and I cannot center it WITHOUT using margin-left. I have tried margin: 0, auto;
.navbar-brand {
width:100%;
height:auto;
margin-left: 35%
}
I am assuming you mean center horizontally, since your element has a width, you can simply set its margin-left:auto; and margin-right:auto;
But setting something to width:100%; will actually take up the full size of its parent, and that means you need to center the parent, not the child.
I've put a little snippet (at the bottom of my post) to do this. There are a few confusing things about this question as it stands.
I'm not sure if you intended to modify the navbar-brand class already present in bootstrap, or if you are intending to make a new class, with its own name.
If your image is so wide, it's probably alone on a row of your website, with nothing else beside it, which makes the layout much simpler.
If the below isn't what you're looking for, perhaps the issue can be more thoroughly debugged by you posting the HTML in question, a screenshot, or a fiddle of it not working as intended.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.navbar-brand {
text-align: center;
float: none;
height: auto;
}
.navbar-brand>img {
display: inline;
}
</style>
</head>
<body>
<div class="navbar-brand">
<img width="1007" height="81" />
</div>
</body>
</html>
I would like to add a margin on the left-hand side on my html page. I am using Twitter Bootstrap.
Inside my html header, I have these lines;
<script src="misc/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link href="misc/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="owncss/own.css" rel="stylesheet">
Inside own.css, I have these lines;
body {
width: auto;
margin-left: 20px;
margin-right: auto;
}
Unfortunately, on the webpage, there is zero margin. What did I do wrong?
Sathish is correct, make sure your stylesheet is linked.
Bootply to verify that your style, when linked correctly, will set a margin of 20px:
http://www.bootply.com/DC0e2nPVPL