I'm working on an update of an existing project, and the whole project uses Bootstrap , and the only place where I would like to replace bootstrap by semantic UI is in components where I defined list items.
Here is what i've done :
1 - I've followed the following guide : Get Started with Semantic UI to install React semantic UI
2 - And in my header tag, i've place the semantic UI cdn before bootstrap
Note : I've use the React Bootstrap for bootstrap
The semantic UI components render as expected , but the only problem is that the whole pages are now using semantic UI even my form field that i've created with bootstrap.
Where can the problem come from?
There can (will) be a lot of conflicts between SUIR and bootstrap. You probably shouldn't import the whole package. Instead install only needed modules. You can find a list of individual ones here
Certain elements in both packages share similar naming patterns, so there will be namespace conflicts. You can rename semantic element keywords in semantic.js and semantic.css.
Related
Is Bootstrap 5 compatible with React?
I've read that prior versions of Bootstrap (before version 5) effect the DOM, and therefore are not compatible with React. However, I heard that Bootstrap 5 is pure CSS. Does this mean that it is compatible with React?
Edit:
I stand corrected. It does use vanilla JS, but jQuery is removed.
I'm reading
https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/
Vanilla JavaScript instead of jQuery Ever since Bootstrap was introduced, it utilized jQuery as a dependency to offer dynamic
features such as menu expansion, carousel, dropdowns etc. However,
this forced dependency on jQuery was not liked by many developers who
wanted to use Bootstrap with modern JavaScript frameworks such as
React and Vue.js. With Bootstrap 5, they have removed this dependency.
It KIND of sounds like they remove jQuery, and that it allows compatibility with React and Vue.js. But it doesn't actually says it's compatible.
I think you have try to use some component library from bootstrap. some updated library compatible with Bootstrap v5
i.e. reactstrap using Bootstrap v5.1.0
I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?
I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.
Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.
Edit: added minimal set of required scss classes. bootstrap 4.5
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/_variables";
#import "../node_modules/bootstrap/scss/_mixins";
#import "~bootstrap/scss/_carousel.scss";
The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.
Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.
I'm creating an app with React , and my main styling comes from Material-UI . I want to use only one component from materialize-css which i really like (Carousel) .. I both tried implementing Carousel with M.Carousel.init method (npm installed materialize) and via jQuery as a script tag in public.html file (following instructions from materialize site ) , and both failed . Cant show my Carousel. Trying Carousel without material-ui installed , succeeds !!
Is there an issue concerning the collaboration between these two Frameworks ??
Thanks in advance
i am beginner in react js, using jsx bootstrap in react js, i have watched many videos in youtube some using jsx react and some using simple bootstrap with minimal classname change,that's why i got confused
what have to use react bootstrap or simple bootstrap
As it is documented in Bootstrap official website, "React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery."
It is moreover stated that React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. Hence, the dependencies on Jquery and Bootstrap.js are eliminated.
Methods and events using jQuery is done imperatively by directly manipulating the DOM. In contrast, React uses updates to the state to update the virtual DOM. In this way, React-Bootstrap provides a more reliable solution by incorporating Bootstrap functionality into React's virtual DOM.
If you are using React, React-Bootstrap would be a better option, as you will not need to add scripts such as jquery.js or bootstrap.js to your code. The React component model gives more control over form and function of each component.
How to get Bootstrap default datepicker look and feel using Angular UI Bootstrap
Angular UI Bootstrap calendar view :
http://plnkr.co/edit/?p=previewenter code here
What I want :
https://eonasdan.github.io/bootstrap-datetimepicker/
The Angular UI Bootstrap project has no CSS, rather we defer directly to Bootstrap's CSS. You can override Bootstrap's default themes or download one of the literally thousands of other BS themes out there.
You are trying to use the CSS of one project as a replacement for CSS in another. This usually requires quite a bit of manual work. As you can see here, the project you want to imulate uses its own CSS.