Kind of a newb question. I'm working with Boostrap to create a mobile responsive portfolio. What do you do if you want to make a change to the default Bootstrap classes? Like if I wanted to take the padding off of the class="container"? The links are only connected to the minified version of css and js. So if I make a change to the regular version .css, there's nothing connecting the change. Do I have to change the .min.css version? Should I be able to repeat a class in my own personal css page?(I've tried unsuccessfully) Thanks, any advice would help.
Two methods that I know of:
1) Make edits to the .min.css file, or
2) Add '!Important' to the your personal css, like so:
.testDiv{
font-color: white !Important
}
This will overwrite any classes that have set a font-color for .testDiv
*note: using !important is not a recommended technique, but it gets the job done
You can override the classes in your own CSS file (make sure you import it into your HTML after the original CSS files from bootstrap). Like,
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">
<!-- Custom Tweaks to theme (Add your changes to this file) -->
<link rel="stylesheet" href="path/to/css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="path/to/js/bootstrap.min.js"></script>
However, if you are going to make lots of modifications like that, I suggest you create your own customized version
Related
I notice that when I use bootstrap in my project, some of the classes are applied to my code. Is there a way I can only use the bootstrap classes I want using CDN?
Here's the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Then below I have:
<ul>
<li>Some text here...</li>
</ul>
and when I check the chrome debugger, it inherits properties for ul:
I know I can manually force my own classes to get rid of it, but it would be tedious.
You cannot use bootstrap's CSS from CDN and only apply the styles to certain elements only.
The only way to exclude some styles is to recompile twitter-bootstrap and leave out all styles you don't want, respectively only include the one's you want.
You can download the source here.
Please note that recompiling bootstrap requires a Less compiler.
has anyone used Maxmertkit ? They say in documentation that you have to include some css files, but I cant find them in the package i've downloaded. Any idea ?
Sass: Syntactically Awesome Style Sheets, are included.
Download it from github
Sass Installation
Sass Basics
Or if you don't want to do all these, you can convert your sass to css from codepen, just copy your sass in css column and click the eye (shown in image) to compile it in css.
There is new version 1.0.5: http://maxmert.com/start.
You can use CDN to include css (don't forget to change {{version}}):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/maxmertkit/{{version}}/css/maxmertkit.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdn.jsdelivr.net/maxmertkit/{{version}}/js/maxmertkit.js"></script>
I'm using Foundation CSS framework and jqGrid to display data, but Foundation styles are messing with jqGrid/jquery UI styles...
I've tried a lot of changes and search, but I can't figure out how to do it...
Here is an example : http://jsbin.com/cocukube/1/
I would like the jqGrid to be displayed like that : http://jsbin.com/cocukube/2/
But of course, with all Foundation styles...
Thank you very much.
I would begin by taking a look at the order in which you're loading the CSS. In order to assure that Foundation is not overriding your jqGrid styles, make sure that jqGrid is being loaded after Foundation.
<link rel="stylesheet" type="text/css" href="foundation.css">
<link rel="stylesheet" type="text/css" href="jqgrid.css">
If that's not the issue, you might need to create an override.css file to essentially "undo" some of the styles that Foundation is applying. If this is necessary, make sure that your override.css file is called after the other two.
I don't know much about ruby, but I know about html and css...
In my Ruby on Rails application I have this tag:
<%= stylesheet_link_tag "admin.css", "jquery.facebox.css", "jquery.tooltip.css" %>
Which has the output of this (i only show the css, i need css only):
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/admin.css?1391082652">
But not exist this path "/stylesheets" in my aplication, i found the file admin.css only here:
/home/webserver/app/public/stylesheets
/home/webserver/app/app/stylesheets
when I rename it to "admin.css_", the css styles continues to apper normal in html ruby, even clear cache in browser.
How I can change the css and make work correctly in website?
Do I need to compile anything?
Not only overwrite the file somewhere?
Hi you can add extra css in your application with .css in /home/webserver/app/public/stylesheets
Another is that css are you applying is directly from jQuery I think so
Please inspect the in browser and check the class name
then search in your application with ctr+f
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
In my inspector I see the following difference:
My page:
The twitter bootstrap page:
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
Most of the other CSS is working fine.
My css import:
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
<link href="assets/css/bootstrap.css" rel="stylesheet">
I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
font-size: medium;
When I wanted:
font-size:8pt;
I placed the following at the top of my HTML page:
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
However if you do have a user stylesheet issue, these values will be locked.
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
It worked for me.