I am in the process of getting familiar with the Twitter Bootstrap framework and also Flat UI but I am having some unexpected functionality with a responsive layout. I don't think the problem is caused by Flat UI as the same thing happens even when removing those references.
I have 2 columns which are both 50% width using class="span6". At full screen (large monitor) the design looks how I would expect but if I slowly decrease my browser width the columns go from floated to stacked, then back to floated and then finally back to stacked again! I would expect them to remain floated until the screen width is not sufficient and then change to stacked so I can't understand the multiple changes. I have set up a little demo here.
Can anybody please provide any reasons why this would be happening?
Thanks!
You are using the 3.0.0 version of bootstrap for bootstrap.css and 2.3.2 for the bootstrap-responsive.css.
Bootstrap 3.0 has deprecated the use of span* in the CSS now. You need to download and use 2.3.2 for the bootstrap.css as well (if you intend to use span* etc)
You can get the 2.3.2 bootstrap.css from here, you should use that and replace the current 3.0.0 bootstrap.css you are using.
Related
[1]: https://i.stack.imgur.com/AqE6r.png**strong text**
Does anyone know which carousel library is best for achieving this effect, with the previous and next pictures overflowing onto the screen as shown in the linked picture? Bootstrap 5.1 and react-bootstrap seem incapable of this.
You can do it easily with this library.
https://swiperjs.com/
Swiper Demos (Examples)
https://swiperjs.com/demos#slides-per-view
https://swiperjs.com/demos/110-slides-per-view/core
For the installation on react the documentation is quite good
https://swiperjs.com/react
You can configure the number of slides you want to see on your screen... In your case, it's 3 slides per view.
For the rest you just adapt with the CSS to get the view you want.
React newbie here.
I am looking for a way to add drag and drop functionality to my website. The goal is to move cards in a grid (I am currently using tailwind css to handle the grid). I found a few libraries that enable drag and drop but none that would:
work in a grid, i.e. in 2D
snap the cards to the grid
reorganize the cards when one is moved (to prevent overlapping)
I tried using react-beautiful-dnd but it seems to only be suitable for lists (i.e. 1D). I also tried react-dnd but I couldn't make it work either, I don't think it is meant to be used in a grid.
I found some libraries that do exactly what I want in angular (https://stackblitz.com/edit/angular-dragdrop-grid) and in vue (https://codesandbox.io/s/j4vn761455), but I can't seem to find react equivalents.
Would you know a react library I could use?
Thanks
I'm going to start a react project. I want a little clarification about the choice of Material UI over Reactstrap. Material UI is better than Bootstrap as mentioned in another comparison of Bootstrap vs Material UI for React?. But I'm a little confused about Reactstrap after going through Pros & Cons of Material UI and Reactstrap as shown in the below images. Or should I use both of them as per requirement in the same project?
I would like to use ready made UI components like Collapse-able Side Menu, Tables with pagination, Auto complete Select etc.
react-bootstrap is more popular than reactstrap. I will speak about react-bootstrap and Material UI.
I have more experience with Material UI. I don't even know how Material UI became that popular while it was very bad when it was released. It used inline styling and it was a nightmare to customize anything. Its performance was very poor. Still, it became very popular and it improved a lot. I used it in my latest project and the performance was great and I used its new CSS in JS solution combined with styled-components. I think it will be a bit harder to use than react-bootstrap but it has more components out of the box.
For most people, react-bootstrap would be an easier choice.
I can't tell you which one to use but I can give you some things to think about and decide yourself:
Which design do you prefer?
If you have more experience with bootstrap, go with react-bootstrap.
If you prefer sass go with react-bootstrap. If you prefer CSS in JS go with Material UI.
If react-bootstrap is missing some components you would need that exists in Material UI go with Material UI but remember that you can add other external components to your project anyway so I think this may not be a limitation.
It depends on your choices, yes, it's a little bit of complicated to customized material, but the looks and feels is outstanding, for tables and all, better to use Material-UI it has inbuilt pagination if you are not comfortable in that you can try this one it also comes inbuilt pagination and much more https://github.com/react-bootstrap-table/react-bootstrap-table2
I agree with comments about the cons referred in your question seems to be more opinions than facts; probably the only fact we can say after compare the two packages is that Material UI has some more built in components.
Once said that it's hard to take a decision without knowing the specification of your project.
Probably the best suggestion we can give you is simply use the one you are more comfortable with.
Hope this helps.
Refer to my experience, if it is an commerial/external project that needs minimal branding, and you are looking for basic reuse-able component to create Admin Portal or CMS, I prefer reactstrap/CoreUI. My main concern is Theme Overriding.
Not enough documentation about overriding material ui style, had quite a hard time to edit and test the theme setting again and again, while reactstrap/CoreUI allow you to import your own .css file, or overriding its class css. So you can simply change the textfield padding at once in css while your designer request to.
Neither material ui and reactstrap/CoreUI can fulfil your need. You may install other useful npm like react-select, multiple datetime picker, autosize textarea, or color picker. Then you try to make its style to be consistent as other Textfield. Styling a component like material ui is quite hard because of its behavior, e.g. label zoom out while focus. But Styling like reactstrap/CoreUI is much easier, you can even reuse the bootstrap classname.
If you are trying to deliver something fast & small without designer, material ui is a good choice, cover most of your use cases. If it is a long-term project and designer is watching you, I am afraid material ui is not a good choice.
Anyway, case by case.
I would say it is your Choice. But if you are good at bootstrap-4, best to go with Reactstrap which is component based library for react.
In my Company we are using Reactstrap and things go quite well. But this doesn't mean we are not using our own media queries and flexbox,styled-jsx which we obviously do.
Even though you will be using ready made Components available in Reactstrap, as you progress in the project you will have to use other libraries 'React-Final-Forms' to handle forms and form data efficiently having high performance when compared with normal forms available in ReactStrap.
Similarly you will need a library known as 'React-select' to handle drop downs, which will give me more options than normal ReactStrap select form Component.
As for now, I am doing project on Next.js and Material-UI. I was also looking for such comparison between Bootstrap(reactstrap)/Material/Ant. And I am agreed with Daniel Ricci with choosing Material-UI.
Why's that?
First of all, I have spoken with my better experienced friend (he has contributed to his own (DEVExpress) React Component Library, so he was know what he has talking about)
Project Management Side pros:
Material itself has a very useful style guidelines from Google. So it is also not about library components, but about styles / colors / design. So you could always customize yourself and create your own theme. But as for you, it will be easier to understand why you are using Roboto:400 at H3 title, and «what color I should pick as secondary?», if you decide to choose primary color.
As a result, it's much easier to find a UI/UX designer for your project. And you always know how your project should looks like.
Default react Material-UI component library is quite rich and very good described with examples. (As you may already noticed). And also there are a lot of plugin libraries components, which is ready-to-use out of the box. In my own case I was needed for a editable material react tables, and have found them in via google in 5 seconds or so. In my project tables are everything and they present the product (price comparison) so that's why I choose material myself.
You could compare component libraries via google trends or github stars, but in your own case with: Collapse-able Side Menu, Tables with pagination, Auto complete Select I would choose MaterialUI.
As for cons, visually Material Style is very populated by devs (cause it's Android's app default theme) and some people thinks that it looks a bit ugly, but I thought it couldn't be a problem because you could always customize your own theme.
And as mentioned Kleo is his original answer:
If you have the time, dedication and resources, there is really nothing wrong with mixing them together. But you just need to think about the time/cost/benifit of it. DIY to make the end user happy, even if you mix them. Totally yourself is remaking the wheel, but you can always pull in boostrap styles etc.
I'm currently putting together a PoC for the web. I've done about 9 years of iOS development so I think in those contexts/concepts. What I need to build is something similar to a UIScrollView/CATiledLayer for the web.
I need to build out a tool that allows users to build their own flowcharts, something I've already built on iOS. I'm prototyping on the web and I'm not sure where to get started. I've played around with a few canvas libraries thus far.
I want to build something that can have a fixed viewport with other components rendered off-screen. The viewport has fixed bounds that you can expand and allows me to put subcomponents in the view and move them around if I'd like to.
My web/javascript experience is pretty much Ember, React and plain old ES5/ES6. My HTML skills aren't that strong and I think I may have missed something fundamental.
My goal is to have something that can work with an existing react stack my company uses. I'm happy to roll my own solution but would love to get advice about the right direction to pursue. I feel like I have almost nil domain knowledge in this area.
This JS library, Dracula should be of great help to you since you're working with drag and drop flowcharts. You can see a working example here. NOTE: This lib is based on SVG and doesn't use canvas.
Here's another beautiful live demo: Source code for JS Flowchart here
Also take a look at this Dragon drop fiddle
And regarding ScrollView in HTML, you can simply use divs with css styles overflow-y: scroll and/or overflow-x: scroll. Using flex layouts, apart from giving you mobile-like development feel, will help you have so much control over your layouts based on the screen size.
Hope this should get you started.
I am confused with angular material design and material css.
Why do both have different layout and grids?
What is the equivalent for bootstrap container in angular material design?
Shall I use angular material design for my project comparing with bootstrap?
The main reason to go with Angular Material is because it is based on Flexible Box Layout specification, witch is a W3C standard Flexible Box.
The closer tag for bootstrap container could be: <div layout="row" layout-wrap></div>
Angular Material Design does not have an exact equivalent to a Bootstrap container because Material Design (AMD) is more flexible. A container has 8 sections. AMD has the layout and flex attributes. AMD's flex can increment by 5% (20 sections in BS) or by 33 and 66 (2 sections) or by combinations of 5%, 33% and 66%, which can go to more than 100% (most any number of sections) in which case multiple lines are automatically created. The best single page with examples that I've found, so far, is https://material.angularjs.org/#/layout/grid Click on the Source box above each example to get more specifics about AMD's HTML syntax for layout and flex.
You have further flexibility via Child Alignment, which controls spacing between each div in horizontal and vertical. Click the radio buttons on that page to see how divs are centered, or spread, or pushed to one end, or lifted to the top, etc.
The HTML syntax displayed will work on a set sized page. If you want the equivalent of media-queries to change sizes for different devices, you have some further coding to do to make angular controllers. Look at the DEMOS examples for various components to get an idea.
Angular Material grid > Bootstrap grid, especially for Angular applications. Bootstrap grid uses float, which is outdated compared to flexible box model. float replaced the horrendous table layouts, but now flexible box model is starting to push float aside (for grid layouts). Just note that you need to add certain suffixes in your CSS for older browsers. See this CSS Tricks article for an example of how to implement flex for older browsers. Bootstrap grid applications also require you to create an endless amount of divs, which looks terrible and should be avoided in any application using HTML5. Technically, you could write your own Angular directives to replace certain divs, and group them based on what or how they display, but then why not just use Angular Material when they have already done that for you?
Materialize is a modern responsiveCSS framework based on Material Design by Google.
And
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
So if you want new modern design i think you should go with material design. It has very nice animation too.
I was looking for an answer for the same question. I see some great comments here. Few additions as of December 2016: Bootstrap does have Flexbox support now. Check this link also check this link to make bootstrap use Flexbox by default by just changing a flag or download bootstrap-flex.css. As far as, grid support in material goes, use a grid demo here, there is a material flex-layout engine which looks great (I haven't tried it yet). It is very close to bootstrap grid. Check this link.
if you work with Angular, instead of using grid you should rather use flexbox, Angular provides a package for it:
https://github.com/angular/flex-layout
A huge advantage using it is the fact that you can use typescript public variables to the flex-layout directives (you can't do that with bootstrap). It also includes Observables for media query changes.