I'm trying to change an elements class, but it doesn't seem to affect it.
The CSS file is loaded in <head>, but the class doesn't seem to have any effect.
My HTML:
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
and my CSS:
.col-sm-3 {
background-color:black;
height:500px;
}
this is because your bootstrap file is loading after the css file ,or try giving
.col-sm-3{
background-color:black !important ;
height:500px !important;
}
but giving !importantis a bad idea since it overrides the bootstrap class.Hence try swapping the files make sure you css loads after the bootstrap file.
Try to avoid !important.
Include your custom css after bootstrap.
Use custom class to overwrite bootstrap style
HTML
<div class="col-sm-3 black-bg">.col-sm-4</div>
<div class="col-sm-6 black-bg">.col-sm-4</div>
<div class="col-sm-3 black-bg">.col-sm-4</div>
CSS
.col-sm-3.black-bg{
background-color:black;
height:500px;
}
do one thing, nest you css, write rules like this
html body .col-sm-3{
background-color:black;
height:500px;
}
it is the right way to override css
Related
see the example to understand:
<!--Standard Bootstrap -->
<link href="/build/css/site/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/build/css/site/mdb.min.css" rel="stylesheet">
so i want a thing like it:
<div class="btn btn-danger" >Standard Bootstrap Button</div>
<div class="btn btn-danger" >Material Design Bootstrap Button</div>
The name of the classes are the same. But they are in two separate styles.
How can I use the two styles as I said?
Forgive me for the bad English.
You can't, you will allways get the last definition of the class.
This is how style-sheets work, That's why they are called CASCADING Stylesheets. So basically what you define in mdb.min.css extends or overwrites what is definied in bootstrap.min.css And yo will get the combination of both
Let's say in bootstrap.min.css you have this :
btn-danger:{
color:#FF0000;
width:100px;
}
and in mdb.min.cs you have
btn-danger:{
background-color:#00FF00;
width:120px;
}
Your browser will interpret this:
btn-danger:{
color:#FF0000;
background-color:#00FF00;
width:120px;
}
The width will be overwritten by mdb.min.css because that one is added last, the later you add a stylesheet, the more precedence it has, so it will overwrite everything that was defined earlier, and extend everything that hasn't been defined earlier, and merge everything else
If using SCSS is an option, you could create a file that imports the two files but wraps each in its own namespace. Something like:
.bootstrap {
#import 'bootstrap.min.css';
}
.mdb {
#import 'mdb.min.css';
}
This file should go in the same directory as bootstrap.min.css and mdb.min.css and should have a .scss extension. After running the above through an SCSS compiler, you will have one CSS file that you can link to in your HTML file instead of bootstrap.min.css and mdb.min.css. For example, if your new compiled file is named combined.css, then you would replace the link tags in your question with this:
<link href="/build/css/site/combined.css" rel="stylesheet">
You could then use the styles in your HTML like so:
<div class="bootstrap">
<div class="btn btn-danger" >Standard Bootstrap Button</div>
</div>
<div class="mdb">
<div class="btn btn-danger" >Material Design Bootstrap Button</div>
</div>
Note that you must wrap your elements in a DIV (or other element) with a class of bootstrap or mdb to get the intended styling.
Browser's stylesheet
Included by <link> tag
Nested in <head><style> tag
Inline, e.g. <a style="display: none">
That's the order of loading cascading stylesheets in your document. You can extend style of any class in any further place, but cannot define two classes with same name with different styles. It will override in given order.
.btn-danger{
background-color:red;
width:90px;
height:90px;
}
.m1 .btn-danger{
background-color:green;
width:90px;
height:90px;
}
<div class="btn btn-danger" >Standard Bootstrap Button</div>
<div class="m1">
<div class="btn btn-danger" >Material Design Bootstrap Button</div></div>
i think one way is like this, hope this may solve your problem
Using the <style> scoped attribute this is possible, but comes with several caveats.
It currently works only in Firefox
Every other browser will require a polyfill to add support for the scoped attribute - here's one and there are several others available
And even with a polyfill it may not work - I did a few quick experiments with different polyfills and #import but had no luck
The scoped attribute allows CSS within a <style> tag to be scoped to the parent element where the <style> tag is contained. Here's a quick example:
<div>
<style scoped>
p {color: blue;}
</style>
<p>This paragraph is blue.</p>
</div>
<div>
<style scoped>
p {color: red;}
</style>
<p>This paragraph is red.</p>
</div>
Using this, we can replace the CSS selector with an #import to import the Bootstrap CSS in one section and the Material Design Bootstrap in another.
Note: the example below will ONLY work in Firefox as of 07/06/2017.
<div>
<style scoped>
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
</style>
<div class="btn btn-danger">Standard Bootstrap Button</div>
</div>
<div>
<style scoped>
#import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.min.css)
</style>
<div class="btn btn-danger">Material Design Bootstrap Button</div>
</div>
Here's the result in Firefox
Another downside to this is you'll need to re-#import each stylesheet for each section.
There are several polyfills available to add support for scoped to browsers which currently don't support it. There's also a jQuery script if you're already using jQuery.
I am a CSS newbie and I have to change some code where it looks like they are inheriting styles from bootstap..
<style>
.thumbnail{display:table !important}
</style>
<div class="thumbnail">
So thumbnail is a cell inside a table and I need to change the height and weight of this cell, any suggestions on how I can do that? I am not seeing any height or width attributes for that style?
Thanks.
Do not modify bootstrap classes just add new class like this
CSS
.thumbnail-custom{
background-color:red !important;
}
I think even !important is not needed
HTML
<div class="thumbnail thumbnail-custom">
...
</div>
If you are using LESS
.thumbnail-custom{
.thumbnail;
background-color:red !important;
}
And HTML
<div class="thumbnail-custom">
...
</div>
In the following markup, I want to apply css to only div with class .box which comes immediately after the .wrap. If it comes after the <p> or any other class than the .wrap, I do not want to select it.
<div class="wrap">
<div class="box">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
I have tried to look the adjacent sibling selector, but does not seem to work in this case.
.wrap + .box{
background: red;
}
JSFiddle: http://jsfiddle.net/8fjuz7sm/
I cannot use :first-child as it can occur only once too.
Write:
.wrap .box:first-of-type{
background:red;
}
DEMO here.
OR
.wrap .box:nth-of-type(1){
background:red;
}
DEMO here.
as #Hiral says, you'll have to either use first-of-type or nth-of-type(1).
If you cannot do this, but have access to the html, you'll have to add another class to the elements you wish to apply the class on, such as
<div class="wrap">
<div class="box red">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
or you can use javascript and/or jquery to select the first element then apply styling via javascript.
Jquery Example
$(".wrap .box").eq(0).css("Background-color","red")
I edited your JSFIDDLE : http://jsfiddle.net/8fjuz7sm/4/
I recommend using jQuery for this because older browsers may not support the pure css solution :
create a new class :
.wrapperbox {
background: red;
}
Then add this jQuery code to your script :
$( ".wrap > .box:first" ).addClass( "wrapperbox" );
After this every html element with the class wrap which has a child box will get a class wrapperbox and there you can do your css
When you dont want to do jQuery you can use this :
.wrap .box:first-of-type{
background:red;
}
It will select the first child of wrap with the class name box and then do your css
I want to know if possible, how to aling on a same line the containing 'Quality Analyst', 'Celestica Sdn Bhd' and 'MYR 2xxx' without changing HTML
html :
<div class="colMiddle resume-detail-item-middle">
<div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
<div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
<div class="pageRow resume-detail-item-inner resume-margin">
<div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
<div class="resume-detail-item-inner-middle resume-summary-heading">MYR 2,515</div>
... missing html
In a more clearer way :
<div class="outter-containement">
<div class="inner-content-1">inner-content-1</div>
<div class="inner-content-2">inner-content-2</div>
<div class="inner-content-3">
<div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
<div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
</div>
</div>
How can i align on a single line inner-content-1, inner-content-2 and sub-inner-content-3-2
http://jsfiddle.net/K58S2/14/
I would recommend changing the HTML like so: http://jsfiddle.net/K58S2/11/
However you said without changing the HTML, so here is a CSS answer: http://jsfiddle.net/K58S2/7/
.resume-detail-position, .resume-company-location{
float:left;
width:auto;
clear:none;
margin-right:7px;
}
.resume-company-location{
margin-top:1px;
}
You can use display:inline; to each div that's needs to be in line.
A better bet would be throw them in spans, like so:
<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>
However, if you insist on aligning divs, something like this would suffice:
<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
The way i undersood your question, you will have to add a margin-right: to the outter container, the same width reserved of the container for 'MYR 2xxx'. Then, position:absolute; right:0; your container for 'MYR 2xxx', it will fit in.
For making your dividers aligned on a row, you will have to study your css and re-design it, because actually, your dividers take 100% width and clear:both; so you will have to manage all this because even if you attempt to float:left the containers, it won't work.
So, a short answer, yes you can do it with only .css. But be prepared for tricky css re-writing/overwriting.
An other aproach would be javascript, by removing your 'MYR 2xxx' container and replacing it in the normal flow, after 'Celestica Sdn Bhd'. For that approach, study jquery .detatch(), .append(), .appendTo() and insertAfter().
It would look like jsFiddled here :
$('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );
But still you will have to rework your css.
Try adding the style property display:inline-block; to all three classes
For example:
.colMiddle {
display: inline-block;
}
I have a main css file for the whole site called StyleSheetMain.css. I download a slider that has his own style.css file and there is a conflict on some items.I want to scope the slider's css file only to a div that it will contains only the slider items.I dont want to apply this css outside the slider div.
Any idea?thanksss
There is no such thing as scope in CSS. You can't nest a specific chunk of CSS in other CSS. The below code is WRONG and is just an example of what you CAN'T DO.
.some-class {
/* THIS */
.some-minor-class {
/* IS */
}
/* WRONG */
}
You also can't point certain .css file to work in only a part of html.
Your solution is simple - rename your classes.
There are so many words to describe this world we live in
You can make use of CSS Grouping / Nesting.
for example you have:
<div id="main">
<div id="slider">
</div>
</div>
<div id="newslider">
<div id="slider">
</div>
</div>
for you to change the style for the second slider:
#newslider #slider {
background: #fff;
}