I have site created already which is not bootstrap, and now i need to implement the bootstrapValidator for the validation purpose, if i include bootstrap css then my site style also changing,
Is there any way to include bootstrap form styles alone in html, apart from cut copy in bootstrap css file?
You can use the Bootstrap Customizer
and check only the "form" checkbox to download only the part you need...
Use customize css download from bootstrap site, here you see the options of customizations. You can choose what you want in your CSS. Or you can use less css, download the bootstrap less master from github and compile theme as per your project needs.
The only way to do this is to find a stylesheet that someone else took the time to copy / paste from the Bootstrap. I've done this on several occasions, and its pretty simple as all the form-styling elements are placed next to each other in the bootstrap stylesheet.
So, find you scissors :)
You can't import a part of a css file, so you can copy/paste your desires classes on your actual css or rename your classes in your css file to not have conflicts with bootstrap's classes name and then your site's style will not change when you include bootstrap.
Related
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.
I have some problem with css files, to be more detailed i have linked 2 css stiles in one html file one is style.scc and bootstrap.css I am using bootstrap social button and that's why i need bootstrap. but this movement has changed almost everything in my site...
so is there a way to call bootstrap.css file in single div and in aver divs to have original css file?
PS css Scoped property don't works from me!
No, it is not possible, if you only using bootstrap for social button - just copy styles from bootstrap.css to your stylesheet (style.css).
Scoped CSS works only in Firefox for now.
Never mynde i founde the solution from "here"
you mast set the mos important css file the last and the least important first
:-)
Bootstrap already has a feature in their site to help you doing custom builds, check it using the following link: Customize.
Also, you can always get the source code and working with it by yourself.
For more information, check the following link: Compiling CSS and JavaScript.
Searching on topic how to customize the original bootstrap CSS I mainly found power tools and generators what are emit a "patched" bootstrap.css to use instead the original.
I am very beginner in bootstrap, so first I would like to see clear the best practices before I invest hundreds of workhours to do something dumb and not recommended thing.
My question: Is this the way? I mean editing (automatically or manually) the bootstrap.css. Sounds not good for me, I am hoping I missed something.
Is there any alternative way, say creating a tiny mycustom.css and only define the differences there. Could anyone point out how to redefine just the standard colors?
Best option if you`re are beginner is to generate a new bootstrap.css with the oficial generator http://getbootstrap.com/customize/ and so you also could test changes in other Bootstrap variables. I think that overwrite css properties with your own CSS file can be painful sometimes...
Best option (need time to learn) is import Bootstrap as LESS (not CSS) and then create your own variables.less file, where you will define values for all Bootstrap variables that you want to overwrite.
Don't edit bootstrap.css.
Instead create your new css file and add new values in that file and make sure that this new file is loaded after bootstrap.css .
For small changes include your own .css file after including bootstrap, overwriting the css components of bootstrap. This is what bootstrap advises (check bootstrap components page)
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
This website demonstrates exactly how to override Bootstrap's CSS without doing naughty things like using !important in your own CSS files (which should be avoided). You simply create a new custom.css file and add in your overriding styles there.
I would not directly edit the LESS/SASS Bootstrap files.
I am pretty new in WordPress and BootStrap CSS framework and I have the following doubt:
I have installed this theme that integrate BootStrap framework and I want to use it as a start point: http://bootstrapwp.rachelbaker.me/
I have change the background color of the homepage changing the background-color property into the body field in a file named bootstrapwp.css inside my theme using FireBug plugin
Ok...my doubts are:
1) Why this CSS file is named bootstrapwp.css and not bootstrap.css as in the downloaded BootStrap 3 framework? And why this file is slightly different form the dowloaded bootstrap.css file?
2) What is the better way to change a style in BootStra? I can change it directly inside my bootstrapwp.css or is better do it in another file overriding this behavior?
Tnx
Andrea
Andrea:
There are a lot of answers for your questions but I will work to simplify it for you.
First, what the developers are trying to do is get Bootstrap functionality within the Wordpress CMS. They are two entirely different animals. Bootstrap consists of individual pages that must be hand coded. Wordpress is a Content Management System (CMS) where you can apply a style, theme, sidebar, template or widget and have it appear on every page site-wide.
So, what the developer is doing is using the bootstrapwp.css file to handle the CSS for the entire Bootstrap themed Wordpress site. Remember, this is NOT a Bootstrap site. It is a Bootstrap themed Wordpress site that seeks to incorporate the functionality and design of Bootstrap within the confines of the Wordpress Codex.
If you're running a Wordpress site, the best way to change a style is always going to be in the CSS file provided by the child theme.
You can try Impulse Press. It's the most complete Wordpress Bootstrap 3 starter Theme
Take a look at the demo impulsepress.twoimpulse.com
with this you can change your css style in bootstrap-theme.css and don't touch bootstrap.css , so when we have an update it doesn't ruin your site styles
And Vincent Polisi is right, you can also make a child theme and get Impulse Press always updated
Can I use only some certain elements of bootstrap library? For example, if I import the whole library, my page breaks because of conflicts between my CSS and Bootstrap's CSS; they are overwriting each other's properties.
If possible, I want something like just the button and div styling properties of the Bootstrap library.
You can download whatever you need in the customized download of Twitter Bootstrap page. Just select whatever you need and click on download.
Also you can go to the project official repository, download all the less files, and compile only what is necessary for you, commenting the lines of the files that you don't need in the bootstrap.less file.
Well I suggest you take the specific CSS rules out of the bootstrap CSS file and place them in your own CSS file, because it's kind of useless if you include the whole bootstrap CSS file in your website and then just 1 or 2 CSS rules of it.
You could also try to place the bootstrap CSS file first and then your CSS file after it in the HEAD section of your website. Usually your CSS file will be "more important" and then the specific styles which are applied by bootstrap will be overridden with your own rules.
<link bootstrap css definition />
<link your css definition />