I want my homepage to feature multiple Jumbotrons, but when I try to style the Jumbotron class in my css.css file, they stylings are applied to each jumbotron. Without using inline css, how can I modify jumbotrons individually within my css file?
My css.css file, jumbotron class. Currently the changes are applied to both jumbotrons on my home page, when I just want the css below to be applied to the first.
.jumbotron{
width:100%;
height: 1400px;
background-color:#f39c12;
padding:0px;
margin:0px;
opacity: 0.7;
text-align: center;
}
My homepage. I would like the two jumbotrons to be different
<div class="jumbotron">
<div id="firstJBox">
</div>
</div>
<div class="jumbotron">
</div>
Add another class for specificity..
<div class="jumbotron jumbotron-special">
<div id="firstJBox">
</div>
</div>
<div class="jumbotron">
</div>
CSS
.jumbotron-special{
width:100%;
height: 1400px;
background-color:#f39c12;
padding:0px;
margin:0px;
opacity: 0.7;
text-align: center;
}
Demo: http://www.bootply.com/122798
Classes work, but they are meant to be re-usable. an ID seems more suited for this situation, since it is used to identify unique DOM objects, and can only be used once.
Used this to work
html
<div class="jumbotron" id="jumbotron-body"> </div>
css
.jumbotron#jumbotron-body { background-color: red; }
Related
I'm working on learning css and I made a small dumb site, but I screwed up somehow and it's applying the border of the second page to the first page.
Here's the html of the part using the border
<div class="rickmorty">
<p>The rick and morty copypasta</p>
</div>
Here is the html it is also applying to
<div class="box-1">
<p>Test<br />Test again<br /></p>
</div>
And here is the css the html is applying
.rickmorty p{
/*margin:50px;
padding:20px;*/
border: 20px #007700 solid;
margin:50px;
padding:10px;
font-weight: bold;
}
.box-1{
background-color: #222
}
.box-1 p{
font-weight: 80px;
}
If it's something else here is my github repository of the site
If you wish to apply styles to specific pages — and make it easy to manage — simple add a class reference to the body that is unique to the page.
E.g.
<body class="some-page-reference">
<p>Foo bar</p>
</body>
Then in your CSS:
body.some-page-reference p {
border: 1px solid red;
}
Although it's a matter of preference I personally find this method better than using IDs.
Alternatively, if you want to use CSS on a specific page only you can add <style> tags to the <head> and put your CSS. However, it is often desirable to keep CSS separate from the HTML.
Instead of class, try to give id for an div..
The priority of id is greater than class.
Ex:
<div id="rickmorty">
<p>The rick and morty copypasta</p>
</div>
<div class="box-1">
<p>Test<br />Test again<br /></p>
</div>
#rickmorty p{
/*margin:50px;
padding:20px;*/
border: 20px #007700 solid;
margin:50px;
padding:10px;
font-weight: bold;
}
Add an ID to the elements that appear only on that unique page by doing something like:
<div id="unique-box-1" class="box-1">
<p>Test<br />Test again<br /></p>
</div>
Then in CSS do:
#unique-box-1
{
color: red; //just an example
}
Then the red color will be applied only to the element with that ID. Adjust the code accordingly.
In Wordpress i have two div with different css classes on them but when i inspect it using firefox the css that i have written for the second is not shown in the css section and it is not picking up the css of that class.
here is my code :
<div class="innerContainer">
Inner Container
<div class="whiteBack">
test container
</div>
</div>
its css is :
.whiteBack{
width:100%;
float:left;
background-color: pink;
}
.innerContainer{
width:1170px;
margin:0 auto;
background-color: cyan;
}
My issue is that while the a tag is in the container the ":hover +" does not work. If I move the a tag outside the container it works fine. Using a basic div instead of the bootstrap container produces the correct result. Is there something that blocks this from happening in the bootstrap libraries?
HTML :
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8">
test
</div>
<div class="col-sm-4">
<div class="info">
<h1>Info</h1>
<div class="info-box">
<div class="one">one</div>
<div class="two">two</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS :
.
info{
text-align:center;
}
.info-box{
width: 70%;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.one, .two{
display: none;
}
a:hover .container
> .row > .col-sm-4
> .info > .info-box
>.one{
display: block;
}
Codepen
Because the element that you want to show when you hover over the tag is NOT a child of the element your are hovering over, it's not going to be possible to target the element via CSS.
Your best bet is to use some very simple javascript/jquery.
Since you are using Bootstrap, I'm going to assume you are loading jQuery.
Here's a codepen: http://codepen.io/anon/pen/WrMPXY
$(document).ready(function(){
$('.test').hover(function() {
$('.one').toggle();
});
});
Let's look at what the jQuery is doing. The first line simply says "when the page is loaded, do this..."
In the second line, we start by grabbing the element with a class of "test". You could also target something with an id using $('#test'). Now that we have that element, we want to tell it to do something when we hover over it.
The third line starts with the element we want to do something with, in this case the element with a class of "one". The "toggle" function is a simple shortcut to hide/show. You also could use the hide() function, show() function, or fun things like slideUp(), slideDown(), or slideToggle().
That's it. Let me know if you have anymore questions regarding the jQuery. I have no idea how familiar you are with it so I apologize if this is all obvious.
The only CSS you need is a default state of "display:none;" on the elements you want to hide and show via jQuery.
If you looking for only css solution, you have to col-sm-8:hover
.col-sm-8:hover + .col-sm-4 > .info > .info-box > .one {
display: block;
}
in this case you might reduce width of col-sm-8 block. I just added float to this class, you can have another solution!
.col-sm-8 {
float: left;
}
jsfiddle-link
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
Ok, so I'm brand new here (and to programming) and I'm not even sure If the questions I'm going to ask is worded correctly or makes sense, but here it goes.
I am working on a bootstrap theme for a client, I am trying to change the background colors. I do not want the page to be all the same background color. I would like certain rows to have a different background color from the rest of the page. How can I accomplish this? I've tried adding unique tags to the containers I'm working on with the background color I want, but no matter what I do NOTHING is changing. I know this is something simple and I just need a simple explanation as to how to make this work! HELP!
You have some options to do that.
For the background in the divs:
You can do:
<head>
<style>
body{
background-color: red;
}
.backg1{
background-color: blue;
width: 100%;
padding: 10px;}
.content{
background-color: white;
margin: 10px;
width: 80%;
height: 100px;}
</style>
</head>
<body>
<div class="backg1">
<div class="content">
</div>
</div>
</body>
Is only work with the css properties. You need paste the code to try help you.
Add class="bgColor"
Like:
<div class="bgColor">
....
</div>
Your css:
.bgColor{
background: #dadada;
}
Give all your styles in custom_style.css, in which you can add CSS properties for elements. Inside your custom_style.css you give background color you want.That's it, Its just the work of CSS. No other process or procedure to .
consider #Page 1
/* Include Bootstrap.css and custom_style.css etc */
<body>
<div class="container">
<div id="Web_page_home">
.............
</div>
</div>
/* include JQuery.js and Bootstrap.js */
Consider #page 2
/* Include Bootstrap.css and custom_style.css etc */
<body>
<div class="container">
<div id="Web_page_about">
.............
</div>
</div>
/* include JQuery.js and Bootstrap.js */
Here goes the working of CSS "Custom_style.css" has
#Web_page_home { background-color:red; }
#Web_page_about{ background-color:green; }
The output will b the Page 1 backgorund will b in red and another page 2 will be in green.
if you didn't understand still i will attach fiddle.