This question already has answers here:
Twitter Bootstrap Customization Best Practices [closed]
(7 answers)
Closed 8 years ago.
I have downloaded Twitter Bootstrap from http://getbootstrap.com/customize/
and now I would change some proprieties such as #body-bg or #navbar-default-bg.
Before Bootstrap, I used Zurb Foundation and I changed "foundation_and_override.sass" file. Is there something similar for Bootstrap?
My project is on Ruby on Rails
Check out this similar question. It shouldn't matter which exact file you put it in.. all the css will get compiled in your assets directory in rails.
Twitter Bootstrap Customization Best Practices
You can use this bootstrap gem in Rails, it's well maintained and up to date. The variables are defined here, so you know which value to set before your #import 'twitter/bootstrap' statement as shown in the Readme.
I'm using this exact same approach and am quite happy with it.
Related
This question already has answers here:
How can I override Bootstrap CSS styles?
(14 answers)
Customizing Bootstrap CSS template
(9 answers)
Closed 4 years ago.
I worked with bootstrap many times and usually I'am creating other style file where I'am overwriting bootstrap classes. I think it's better way to do this. I am also get annoying when I have too much code which I actually don't use in bootstrap source.
What's the best way to overwriting bootstrap classes and remove this parts of code which actually is not needed from bootstrap sources?
One very common way is to use the Boostrap Sass implementation and set variables to define many of the styles. This prevents many css 'overrides' and usually results in much less css code.
You can also pick and choose which Bootstrap components to include (via #import) in the compiled css:
https://getbootstrap.com/docs/4.0/getting-started/theming/#importing
https://getbootstrap.com/docs/4.0/getting-started/theming/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
So I'm working on a project that uses bootstrap 2.3.2 stylesheets and bootstrap 3.0.0 .js scripts. Client side is outdated(a lot) and my first goal is to replace bootstrap files so I can start using the latest version, removing poorly written css and using updated classes and bootstrap v4 stuff.
So, what are my concerns right now? I'm worried that old bootstrap classes won't work anymore. Do newer versions support classes and css from older versions? Do I need to have anything else in mind?
I would compare the bootstrap 2.3.2 docs with bootstrap 4. I dont believe that bootstrap 4 offers any backwards compatibility for 2.3.2 stylesheets and the grid system seems to be radically different.
So I would say the first port of call is to check how you are going to have to update the site layout.
v2.3.2 documentation: http://getbootstrap.com/2.3.2/index.html
v4 documentation: https://getbootstrap.com/docs/4.0/getting-started/introduction/
EDIT: I did some reading up on Bootstrap 2.3.2 and one of the key differences is how responsive bootstrap works. Responsive features are not enabled by default in Bootstrap 2.3.2 but can be enabled by using an additional stylesheet.
If the site is responsive enabled it is probably based on the media queries you can see on this page: http://getbootstrap.com/2.3.2/scaffolding.html#responsive
Compare that with the v4 grid and you will see that the sizes of the media queries are slightly different and that modern bootstrap uses a consistent 30px gutter (15px on either side of a column) as opposed to the inconsistent gutter width in v2.3.2.
The site may also make use of "responsive utility classes" to hide elements on certain screen sizes. If you wish to keep these then your best hope for finding similar classes would be on these pages:
https://getbootstrap.com/docs/4.0/layout/utilities-for-layout/
https://getbootstrap.com/docs/4.0/utilities/visibility/
https://getbootstrap.com/docs/4.0/utilities/display/
Alternatively if the site is not responsive enabled then the you may need to rethink your page layouts. Both versions of Bootstrap use a 12 column grid but the container sizes do not appear to match up.
Other things to watch out for:
As noted in the answer before me support for glyphicons has been dropped. The v4 migration guide does suggest some alternatives
The button classes (and several other basic components e.g. progress bars) seem to pretty much match up however the styling of these and other elements with classes that remain in bootstrap 4 will obviously change
-Dropdowns look like they might still work with the new js or with little adjustment.
I am sure there is more than this but thats what I could find on a quick skim through the old documentation.
Good Luck
I would first consider their tutorial on migrating to v4:
https://getbootstrap.com/docs/4.0/migration/
For our project, the major problem was that the glyphicons weren't supported anymore so that we had to replace them:
https://getbootstrap.com/docs/4.0/migration/#components
This question already has answers here:
Customizing Bootstrap CSS template
(9 answers)
Closed 3 years ago.
I need to use just some parts of bootstrap 4, not all of that. and I want to use my customize bootstrap in my wordpress theme and sell it on Themeforest store or somewhere, I dont want to use bootstrap.js and many parts of bootstrap.css.
I want to use these items ...
reset css
Print media styles
Grid system
Responsive utilities
Navbar
Breadcrumbs
Responsive embed
can I copy/paste my ideal parts of bootstrap css?
can I use just these parts of bootstrap 4 ?
can I sell my theme with this CSS file?
its ok to copy and change some part of this files?
which license I need to use in my theme?
my question is more about licenses...
https://v4-alpha.getbootstrap.com/about/license/
Read the first couple Lines. Bootstrap has an MIT open source license. you can find more on that here. https://en.wikipedia.org/wiki/MIT_License
You can copy and paste the code that you want however you must keep the Copyright title intact for the pieces that you use from bootstrap.
You could just override bootstrap my adding your own class on top of bootstrap's class
.row.shaheparsRow {
padding: 0
}
This question already has answers here:
Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure
(3 answers)
Closed 8 years ago.
If we use bootstrap without a preprocessor we add classes into our opening tags like this:
<div id="El" class="col-md-1"></div>
I'm used to using bourbon neat with sass, in which case I can import mixins within the rules for my elements in sass. In which case I can do things like this:
#myEl
#import span-column(6)
Looking at the less documentation for bootstrap here: http://bootstrapdocs.com/v3.1.1/docs/css/#less it appears that there are no mixins available for bootstraps grid system. They've got convenience mixins for vendor prefixes, transitions, gradients and other things, but nothing for their own grid system.
So I've got a couple of questions:
How do I use less to define my grid using bootstrap?
And, if I want to do actually do this, am I working against the tool itself? I'm thinking that if using the less version of bootstrap this way isn't documented, then maybe there's good reason for it. Perhaps the less version of bootstrap just isn't supposed to be used this way and I should be using another set of tools instead?
You could do this, but you have to write just less. A good introduction to less is at their website: www.lesscss.org.
In your case you need:
#import 'bootstrap/bootstrap.less';
#import 'bootstrap/theme.less';
#El {
.col-md-1;
}
Then you compile this file with lessc. After that, your #El-element will behave like a .col-md-1.
Intentionally, Bootstrap is meant to use with their css class and using their less-files is not the first way of bootstrap. But if you know bootstrap and less well, you shouldn't have problems. If you start fresh with bootstrap, I recommend that you use just their css.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
GWT theme style overrides my css style
What should I do to prevent GWT from using its theme and totally use the CSS that I specify?
Well, you can be radical and just remove the CSS files that are in the com.google.gwt,user.theme.chrome/dark/standard packages (don't forget to remove then from the gwt.xml file). Then specify your own CSS....disadvantage is that you have to style absolutely everything yourself. Hope this helps.