I am trying to implement bootstrap in my current code which is built over existing codebase for few years. The current codebase has several stylesheets and all.
I am using nav-pills and nav-tabs from bootstrap. However, icnluding the bootstrap.css, bootstrap.responsive.css messes up with the current layout elements like header, footer, input etc. I have tried removing some of the properties from bootstrap css files but they are over 7000 lines of code and it is not a good idea to go through every line of code in bootstrap.
Is there a version of bootstrap or way where i can select which component of bootstrap i want to use and my css files are populated accordingly. For eg i want nav-pills and nav-tabs and i believe including lal dependencies code should not be over 50-100 lines. Which is easy to debug and modify as well.
I believe this is what you are looking for:
https://getbootstrap.com/customize/
You can deselect the base CSS to not have it interfere.
You should use the LESS Code from the Bootstrap GitHub Repository. Just download the latest tagged version. You also need a LESS compiler.
In addition you should first include your bootstrap file and afterwards your own stylesheets to make sure it overrides if necessary.
You can customize your 'needs' on project page.
http://twitter.github.com/bootstrap/customize.html
Related
I'm making a react app with styled-components and I want to create a component that will be just like using col col-x and another for row classes from bootstrap.
But my problem is that I can't find the styles for that, I searched for every .col word in the repo and couldn't find anything.
How can I make a component using styled-components that recreates bootstrap col col-x and row without importing the entire bootstrap?
You should be able to get it from the Bootstrap CDN https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.css.
I usually approach this kind of issue by creating a page where I load the library I try to partially emulate and apply it to the structure that I will intend to have. I will extract CSS rules from the dev tools (after loading it in several browsers to find differences of use-cases) and create the same CSS rules into another page, having the same structure, but not using the other library, which is Bootstrap in this case. If there are non-CSS differences, that is, the way that structure is rendered is partially managed by Javascript, then I will make a list of things to achieve and try and find the code for that. In general this will reduce the list of things I have to implement to have only a few items, which tends to be doable.
I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.
I am using Primefaces 5.0.I want to use or bootstrap css to Primefaces custom components like List, table, selectOneListbox.
I am to apply css to normal component like button, link etc.
It's possible, but due to reason that a internal structure of Primefaces's components are different from a plain HTML components with which Bootstrap supposed to work you will need to make hard job to accomplish that. You will need to debug every Primefaces component to see its internal structure and change Bootstrap's css file that it will correspond to internal classes of Primefaces's component.
Actually you have three alternatives (maybe more):
Like BalusC mentioned, Primefaces has its own implementation of Bootstrap theme: you can see it here: http://www.primefaces.org/themes IMHO, best option
Use Bootfaces JSF library: http://www.bootsfaces.net/ Pay attention that it's pretty new library and possible buggy. There isn't big community support like for Primefaces library.
Make you own Composite (or Custom) Components with desired structure and styling.
I have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well.
If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.
you need to set the order of CSS files like
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite
bootstrap styles or to add alternative css classes to your GRID.
I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
I'm using Twitter Bootstrap right now ver 2.0 and notice that the space is not enough using the 12 column grid.
I think they're using 940px.. so how do I use a custom width without breaking the 12 column grid?
Thanks..
The simplest way would be to customize your own download. Focus on the Grid section.
Alternatively you could edit the LESS or compiled CSS files directly.
You can also create a new stylesheet (or add to an existing one) that simply overrides the values of those variables. This way you don't have to worry about bootstrap updates rewriting your changes. Just make sure you declare the variables after the bootstrap CSS and JS have loaded.
In fact, personally I think that's a better option otherwise you have to remember to re-edit the CSS file every time you install a bootstrap update and this is never a good idea.
This is especially problematic if you're using bootstrap as a gem (say for Rails). That's why I never like overwriting include files directly.