How to get around with conflict of bootstrap class names [closed] - css

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 7 years ago.
Improve this question
We got a project which was handed to over to us by the client. In that say 38 screens are to be developed by us, the thing is they have already developed several screens before hand(more than 20) and handed over to us. The app is a hybrid mobile app, single page(using angular) and cordova. So the thing is they did not use any framework like bootstrap to develop the pages they have developed before handling it over to us. And other thing to note is since we have to use angular, all the css files will be minified into a single file. And they used the class names like row in their project, which are conflicting with the names in the bootstrap. But desperately want to use bootstrap, is there any way that we can use bootstrap without conflicting their already developed class names, or simply put, we don't want to modify their old classes in css, In a single page environment. Any suggestions are welcome.

Yes there is one solution, isolating Bootstrap CSS.
The idea is editing the bootstrap LESS file, and crunching adding a class (Suppose bootstrap-iso) before every element and to use bootstrap wrapping around like this
<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
Good news is you don't need to crunch and change : Here is link of crunched css file
Get this file, link to your site and use wrapping around like above. Hope this would be helpful to you.
Reference, Learn More

Related

Can I merge Bootstrap 2.3.1 with new versions like 4.0 or 3.x.x? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have a website in that I used bootstrap 2.3.1. Now I want to change the version and I want to update. If I updated the bootstrap with new version.
Total UI is changing. Website turning into clumsy. So my intention is to just merge the previous bootstrap file with new one without removing the previous attributes and just updating the new content.
Yes, you can. But you probably don't want to do it. Merging both Bootstraps will likely cause hardly maintainable mess and conflicts (one behavior overwriting another). But surely it's doable, just a couple more imports of new Bootstrap and there you have it.
I would try solve this without merging different Bootstraps, though! Here's how:
If your project is small, maybe it's good idea to migrate to new Bootstrap and get rid of the old one.
If your project is big, then you could use new Bootstrap in new views, while leaving old views that use old Bootstrap untouched. Then if you have time and resources, you could rewrite/migrate these old views one by one using new Bootstrap. The idea is to not to use both Bootstraps on the same view at the same time, but rather switch to new Bootstrap only for chosen views.
Good luck!

Working with CSS in React [closed]

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
I am a beginner in React. I have been coding in AngularJS and bootstrap so far. I want to create an responsive application.
I have couple of questions to the developers who are already working on React:
My inclination towards something like bootstrap is because I do not want to spend a lot of time writing CSS. Bootstrap will give me ready CSS for common components like buttons, forms etc...but as bootstrap.js requires jQuery, does bootstrap works well with React? Can I use bootstrap 3 with React to create a responsive app? If not, is there any other CSS library I can use which works well for React?
In Angular, it was pretty easy to use some ready components from libraries like AngularUI which provided most common components one would ever need for an application. Is there any similar reliable library available alongside React as well which gives you common React components ?
I do not have any code samples at the moment because I have not really started yet and just want to get few doubts clarified first.
For bootstrap css styles, you should use
https://react-bootstrap.github.io
This is pretty good for react apps and it has many components with options to customize it's style.
Sorry, I'm not aware of any library like angular UI..

Is it common practice to cut portion of Bootstrap file and copy it in custom css files? [closed]

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 7 years ago.
Improve this question
I've seen in the HTML code of many websites classes like .col-sm-4 and couldn't find a bootstrap css file in the resources. Do they make their custom classes with the same names of Bootstrap or what are they doing at all? Thanks...
You can customize your Bootstrap package here: http://getbootstrap.com/customize/
Most custom built sites just include Grid system and Responsive utilities. You might not see bootstrap.css simply because it's part of their combined and minified main CSS file.
I can't speak to how common it is overall, but I have certainly stripped out Bootstrap files in the past, and used my own instead. Depending on how custom the styles are going to be, removing the Bootstrap CSS can reduce a lot of bloat.
Few possible reasons:
Bootstrap is not the only framework that uses such naming convention (i.e. .col-sm-*). They may be using other CSS framework.
They are indeed cutting out parts of bootstrap or other framework. It is certainly possible and doable, but know what you're doing and do it with caution.
They are combining their CSS files into one single one. You may not see bootstrap.css file in list of resources, but the actual bootstrap.css has been merged with other css files into one. This is a good practice as users don't have to make multiple file requests.

Wordpress theme development and bootstrap [closed]

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 7 years ago.
Improve this question
I just started to explore the Bootstrap project which seems nice to use in web development. I read some articles, some of them where sceptical to the combination of Wordpress and Bootstrap. This was due to the fact that (as I understand it) Bootstrap has it's own pre defined classes that you are supposed to add to your html tags, while Wordpress has another set of classes for the same elements.
I understand the problem and I would like to know if there are any "best practices" regarding this. I know that there exists plugins for this task but I like to understand this myself. I think that the trickiest part is the auto generated wp-menus and those things, am I right?
Question:
I think (without further investigation) that I in some situations want to map a wordpress class (eg. wp-menu classes) to a Bootstrap class. How do I do that?
Twitter Bootstrap will help you to build responsive theme for wordpress quickly. You can check the following link to know the difference of major common twitter bootstrap's classes that means when you should use which sets of class. If you want to add or alter the class of Wordpress menu, you should customize the Walker_Nav_Menu class. This link will help you. You can follow the wordpress standard. And finally there are many wordpress theme development frameworks which have already bootstrap. i.e. roots, underscores and so on. I like these both.

Using (parts of) Wordpress Themes in xpages [closed]

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 8 years ago.
Improve this question
Not sure if this is a stupid question or not,
but i want to create a better looking notes database which should remind users of our companys homepage.
Is it possible to use codes extracts of the wordpress themes css code?!
It might be easier to start with the Bootstrap4 XPages plugin on openNTF and then work to skin that.
As long as CSS stylesheets don't reference by element ID, it's possible to utilise elements. However, bear in mind that parts of the CSS stylesheets you're using may get overwritten by inline styles or stylesheets from the XPages runtime itself. In my experience, you will usually need to make some modifications to the stylesheets your using, but it's doable.

Resources