I need to add Twitter's Bootstrap styles to existing GWT component...
I found more than one project but all of them creates new custom components for that purpose...
I need to stick with GWT standard components and have my app L&F looks like TBootstrap.
Thanks.
You will have a great job to do overriding GWT's default css. Your starting point may be the Developer's Guide - Client Bundle.
Some widget does not accept Bundles, so you may have too to override GWT css in the bootstrap html file.
I believe that you can hack the basic styles with jQuery or overriding CSS styles, but the responsiveness, topbar and other things, I believe thats is pretty impossible...
You can take a look at GWT-Bootstrap.
Hope it helps..
Related
I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
I am using Foundation CSS framework and Kendo UI grid in my project The Kendo UI grid sometimes overridden by foundation CSS thing.
How can I avoid this conflicts?
To be honest, I don't think there is a way that you can do this. A browser will load all stylesheets in the order they are placed on your page. When there are selectors that is used in more stylesheets, the last occurrence takes precedence (meaning: it's the one that your browser will use).
You can add a third stylesheet in which you fix everything that gets overwritten by mistake, or you can try switching the Foundation css and the kendo grid UI css
What you're looking for is namespacing. As far as I'm aware there's no built in way to do this, but the question has been asked before:
Namespacing the Bootstrap and Foundation CSS frameworks
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 a twitter bootstrap web template that I'm integrating with angular ui to develop a SPA. I have been able to do this integration to some level but I want to override the default css that Twitter Boostrap dropdown-men with Angular JS provides. Thanks for any help.
Option 1) Edit the Bootstrap CSS
You can edit the bootstrap CSS but this means you are assuming all risk for integrating nay future bootstrap changes. I don't recommend it unless you want to trim out all bootstrap CSS except what you need. Only mentioning it because it is an option, though not one I recommend.
Option 2) Create your own CSS to override Bootstrap's CSS
Create a CSS file such as styles.css and have it listed after bootstrap's CSS in your HTML file. Then override the styles for what you need. This is pretty easy and allows you to leave Bootstrap untouched.
Option 3) Pay a CSS expert :)
OK, so seriously ... choose option 2.
I am new to web development and I am using bootstrap to help with making my website. I want to know the best way to manage my own css files and the bootstrap css. I know I can override bootstrap stylings by dropping my own modifications into the style tag, but I feel like this is definitely the best way to go. Currently I just import two style sheets (mine and bootstrap), but they step on each others toes ALOT.
Thanks in advance
When I use bootstrap, I used to follow these 2 rules:
Be careful in naming the class.
Never use !important in your stylesheet.