pretty new to Bootstrap and just started to play around with it. But there's one thing (that should be extremely obvious) that I can't get to work. And thats changing the color of the h1 tags in the jumbotron.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello WWW</title>
<link rel="stylesheet" href="main.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<h1>Progression of Connected Computing</h1>
<p>Learn more about the internet</p>
</div>
</body>
</html>
main.css code:
.jumbotron h1{
color: #fff;
}
.jumbotron p{
color: #fff;
}
The problem is, the p tags are correctly changed and turn white, but for some reason the h1 tags don't? Probably something silly I'm doing but I can't seem to figure out what it is. Thanks!
You must include your custom main.css file after you are including the bootstrap.css one if you want to override your bootstrap styles with your custom main.css styles.
Your custom CSS file should be placed AFTER the bootstrap.min.css, so you are able to override it.
Like this -
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
I found an easy way to do that: just wrap h1 blog inside for example span blog; then apply bootstrap for span blog. For example:
<span class="text-success"><h1>Hello World</h1></span>
If you're looking to apply white color specifically (as in your example), then using Bootstrap's color utility class .text-white is an option:
<h1 class="text-white">My Text</h1>
For more info on other color classes, see: https://getbootstrap.com/docs/4.0/utilities/colors/#color
Related
I am wondering how I can extend bootstrap classes in SASS if I have linked to the bootstrap stylesheet in my HTML file, like done below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Some title</title>
</head>
I then have a .scss file that generates the additional css file I have also linked to in the head of my HTML document. But for example, If I try to extend any Bootstrap class from the .scss file, like I did here:
.p3 {
#extend .p-3;
font-weight: bold;
}
it throws an error saying:
Sass::SyntaxError: ".p3" failed to #extend ".p-3".
The selector ".p-3" was not found.
Use "#extend .p-3 !optional" if the extend should be able to fail.
how do I solve this?
Many thanks,
You need to include bootstrap by importing it in your main.scss.
something like:
#import 'bootstrap.scss';
.yourClass {
#extend .p-3;
font-weight: bold;
}
For more info read the documentation
I'm having an issue setting my text color. I want to set the h1 element to #513271 but it doesn't seem to want to work. Below is my current code and below that are several solutions I've tried that also did not work.
My CSS is saved as stylesheet.css & it is in the same folder as my HTML (which is tributePage.html).
jumbotron h1 {
color: #513271;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
I have also tried the following solutions. I have literally tried all of these by themselves, in various combinations, etc.
Change the CSS file path
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
\stylesheet.css (I've used \ through \\\)
stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
< link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
< link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
h1, #h1, .h1
jumbotron h1, #jumbotron h1, .jumbotron h1
jumbotron-h1, #jumbotron-h1, .jumbotron-h1
purple text, #purple text, .purple text
purple-text, #purple-text, .purple-text
Change the font color with an inline element
< h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.
Thanks so much for your help!
For your CSS what you want is
.jumbotron h1 {
color: #513271;
}
Note the period before jumbotron to indicate it's a class
I hope my answer help you:
This is your original code:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
You cannot have a div element outside the body tag.
You need to include the link to css file in the head tag. Fix your code like this:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now.</h1>
</div>
</div>
</body>
</html>
You can see that in your css file you declare a 'jumbotron h1', but in your HTML code jumbotron appear to be a class, and to style a class in external css file you need to a dot (.) before the class name. Your css need to look like this:
.jumbotron h1 {
color: #513271;
}
Hope this help.
Your tag is not properly placed nor your external css tag is missing.
and
the class is not used for styling (except if you used bootstrap).
Here is the correct one:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now</h1>
</div>
</div>
</body>
</html>
CSS:
jumbotron h1 {
color: #513271;
text-align: center;
}
I recommend you to practice doing external css files instead of inline/internal.
I had a similar problem where my stylesheet was not being reflected in my HTML doc. I finally figured out that my .css file was actually a .css.txt file. "mystyle.css.txt".
In any directory on your computer (I used the one the html/css files were in) click view at the top, then options. Select the view tab, then uncheck the option "Hide extensions for known file types". When this was unchecked i was able to delete the .txt extension from the .css file and it became a true .css file and reflected in my .html doc perfectly.
I'm very new to Bootstraps, trying to use their grid system. However I can't change the body background-color now. My stylesheet is working, cause I can change the background color of the container class. I assume something with Bootstraps is overriding my body background-color, and font as well.
Thanks.
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: Arial;
background-color: #455A64;
}
You should be including your stylesheet after Bootstrap's, like so:
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/style.css">
Because bootstrap is included last in your code, its CSS is overriding your styles defined in style.css. You should typically include your stylesheets after all frameworks/libraries you use so you can properly override styles if necessary.
It is not good practice but you can also do
<body style="font-family:Arial; background-color:#455A64">
--------
</body>
you can also use scoped style tags in the body, but it's good practice to keep your CSS separate as it allows for easy editing as well as using the same CSS for multiple elements. Hope this helps!
So I'm creating a website and I've got my background set. I also have a title on the index page but for some reason there is a white box around the text. I don't know why it does that but it has to have the color of the background.
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title></title>
</head>
<body>
<p class="texts">Under Construction</p>
</body>
</html>
CSS
#font-face {
font-family: 'Font';
src: url(BebasNeue_Light.otf);
}
.texts{
font-family: 'Font';
text-align: center;
font-size: 1000%;
}
html {
background-color: #1abc9c;
}
Here is a jsfiddle demo
It is two things you need to change.
The first is the order of the CSS files in the <head>. You need yours last so that your styles override Bootstrap's styles.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">
The second is to change the html {...} CSS rule and use body instead. While you can set styles for the <html> tag, it is better to use the <body> tag instead (see here a relevant discussion in SO).
body { background-color: #1abc9c; }
Here is the fiddle link -
https://jsfiddle.net/pravin7007/3szxo5su/
html, body {
background-color: #1abc9c !important;
}
1.) in your html, JQuery should be loaded before bootstrap.js
2.) bootstrap body css is overwritting your body background
Your body tag has background-color: #fff; on it. The body tag is overlaying the html tag which has the desired background colour on it. It looks like the body tag is inheriting the white background from the included bootstrap files and you are then not overriding that in your own styles.
CSS files are processed in order, with any style applied to a selector last in the set of files being added to that element last. So given you load your css file first anything you define here will be overridden by bootstrap if bootstrap defines the property on the same selector.
It's best to load css files based on specificity. As bootstrap is a shared library and your style file is specific to your site, then you should load your css file later that the bootstrap one. This way you can guarantee that what you want to happen will be what the browser does.
You can find out more about selector specificity and load order here. Be very careful with selector specificity, it's easy to get in a mess and you should only use it if absolutely necessary (this link is from an excellent css blog).
You also actually need to apply your new colour to the body tag in your css, which you aren't currently doing. Applying it to the html will make the desired colour appear behind the body colour as the html tag is further up the DOM tree structure.
The reason this appears like it's the element with .texts class, your title, that is misbehaving is because the body tag has automatically shrunk to fit it's content (see this fiddle for simplicity). By adding some extra <br /> tags to extend things down, as I have done here you can see the white area expand to accommodate them. Also, as you can see here, by applying a new colour to the .texts class you can see that it's colour can be changed as it is further down the DOM tree than the body tag.
I have a CSS file that I call it like so in my HTML page:
<link rel="stylesheet" type="text/css" media="all" href="style.css">
There is a tag in the file that I want to change:
.rt-block {padding: 15px;margin-bottom: 10px;position: relative;}
How would I change the padding from 15px to 30px? I do not want to change the actual file because it is used in many HTML pages and I only want it to be changed in this page. Thanks.
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<style>.rt-block{padding:30px}</style>
Just add a the different style in the document after you include the CSS file.
If the <style> absolutely must be included before the CSS file, use .rt-block{padding:30px !important} instead. Be warned that doing so may cause other issues.
Just use a <style> tag on the page to override the stylesheet:
<style>
.rt-block {
padding: 30px;
}
</style>
You can do this in many ways, bu t here are two.
Add this code to your $(windows).ready
$(".rt-block").css("padding", "30px");
Or you can create a custom css file for the page in question, and override the class, adding the link to the new css file below the old one like this.
<link rel="stylesheet" type="text/css" media="all" href="style.css">
.rt-block {padding: 15px;margin-bottom: 10px;position: relative;} //inside style.css
<link rel="stylesheet" type="text/css" media="all" href="newstyle.css">
.rt-block {padding: 30px;} //inside newstyle.css
The last near one css will apply in html.
For example
1. there is one css file included tag one
2. one under the tag in header and
3. one inline style with container.
So last nearest one will apply as it over right other style
<head>
<style>
p {
background : red;
}
</style>
</head>
<body>
<p style="background:blue">this is text</p>
</body>