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;
}
Related
I have to style an image with the class offer-img
<section class="offer">
<div class="container">
<div class="row">
<div class="col-2">
<!-- The image I want to style -->
<img src="img.png" class="offer-img">
</div>
<div class=".."> ... </div>
</div>
</div>
</section>
In my style.css, when I try to access it with
/* somewhere above the hierarchy */
.col-2 img{
max-width: 100%;
padding: 50px 0;
background-size: cover;
}
/* Not working
.offer-img {
padding: 40px;
}
*/
/* Works fine */
.col-2 .offer-img {
padding: 40px;
}
Edited:
When I try to access the .offer-img directly, my style is not applied.
It only works when I change .offer-img to .col-2 .offer-img
Why .col-2 img's padding is overriding .offer-img's padding?
Is .col-2 img more specific than .offer-img
Yes. You can access the class directly and there is nothing wrong with your code.
You are seeing CSS Specificity in action here
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
The three css classes you used:
.offer-img: an element with the class .offer-img (less specific)
.col-2 img: img element inside an element with class-name .col2 (more specific)
.col-2 .offer-img: an element with class-name .offer-img inside an element with class-name .col2 (most specific)
The most specific style for the element will be applied if there are conflicts.
there's a typo here you've missed closing Quotation mark class="row> it should be class="row"> besides code is working just fine, i could select the class you're referring to without any issues & see if you're overriding styles.
.offer-img{
padding: 50px;
width: 500px;
}
<section class="offer">
<div class="container">
<div class="row">
<div class="col-2">
<!-- The image I want to style -->
<img src="https://wallpaperaccess.com/full/193101.jpg
" class="offer-img">
</div>
<div class=".."> ... </div>
</div>
</div>
</section>
Check If there is any css for only "img" tag in your style sheet which override your this class
Else give "!important" like
.offer-img {
padding: 40px !important;
}
The '!important' rule in CSS is used to add more importance to a property/value than normal
The website I am developing has a problem showing the background image in Internet Explorer:
img {
width:100%;
height: auto;
/*margin-top : -50px;*/
}
<div class="col-xs-12">
<img src="./images/garri_processing.png">
</div>
While the background-image CSS parameter would work as a solution, you could alternatively solve this by adding more specificity to the image as well by adding an additional class or an ID. Not having that specificity could also get you in some trouble later as the img assignment in the CSS would then be referencing ALL img elements rather than your one div.
Try something like this:
<div class="col-xs-12 exampleClass">
As I said, you could also tie this to an ID.
<div id="exampleID" class="col-xs-12">
Then arrange your CSS from there to fit within your new parameters.
With additional class:
.exampleClass img {
width: 100%;
height: auto;
}
With an ID:
#exampleID img {
width: 100%;
height: auto;
}
CSS should be this.
body
{
background-image: url("./images/garry_processing.png");
}
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 have the following html. I need to align the .faf-text fields to each other vertically without using a table.
<div id="faf-field-2" class="faf-field faf-field-input ">
<div class="faf-name"> Vendor </div>
<div class="faf-text"> Brocade </div>
</div>
<div id="faf-field-6" class="faf-field faf-field-input ">
<div class="faf-name"> Platform </div>
<div class="faf-text"> ADX </div>
</div>
<div id="faf-field-7" class="faf-field faf-field-input ">
<div class="faf-name"> Version </div>
<div class="faf-text"> 12.4 </div>
</div>
An example of what the layout should be like is below :
Vendor Brocade
Platform ADX
Version 12.4
Thanks
You can use the CSS display: table to make your elements act like a table.
Use display: table-row; for the container <div> tags to make it behave like a <tr> and display: table-cell; for the elements inside to make it behave like <td>.
Something like this:
.faf-field-input{
display: table-row;
}
.faf-field-input div{
display: table-cell;
}
.faf-name{
width: 80px; /*for testing*/
}
jsFiddle DEMO
Just use
float: left
for both classes.
An ex:
.faf-name{
width: 200px;
float: left;
/* other CSS may come here */
}
in the same way,
.faf-text{
width: 200px;
float: left;
/* other CSS may come here */
}
It would have been easier and clearer if you have provided jsfiddle. Hope this will work for you
Just Use this css property so faf-text fields to each other vertically without using a table.
.faf-field{display:table-cell;}
DEMO
From your code, it looks to me that you are displaying tabular data.
So it's perfectly good to use a table.
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; }