Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
What are quality Bootstrap 4 input form Components? - datepicker, input mask, range sliders, charts .....
I'm developing a Bootstrap project and started out with a UI kit theme but found that tweaking it was an issue, so I'm now using standard-issue Bootstrap. My question is what or where are recommended/best form UI Components? I've researched, but am not sure which are quality ones, so recommendations or a guide to resources is appreciated. I usually use Foundation, and this project is also new to me as it is financial and has dates, amounts, percentages and charts.
I'm using the current Bootstrap version as it is today at https://getbootstrap.com/.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGw
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+96
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRl
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+
UI components of interest are:
date picker - one date picker and also start date with end date
input mask - things like date, apply dollar sign and decimals to amounts, phone numbers
range input slider if there is an improvement over the Bootstrap ones
begin and end range input slider - dates, amounts, numbers
charts, doughnut, pie, line and so on
and any other "gems" to have in the toolbox
Thank you.
I'm using the current Bootstrap version as it is today at https://getbootstrap.com/.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGw
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+96
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRl
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+
UI components of interest are:
date picker - one date picker and also start date with end date
input mask - things like date, apply dollar sign and decimals to amounts, phone numbers
range input slider if there is an improvement over the Bootstrap ones
begin and end range input slider - dates, amounts, numbers
charts, doughnut, pie, line and so on
and any other "gems" to have in the toolbox
Thank you.
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi Don,
I do not think there is one kit that can fulfill your requirements.
If you do not want to spend any money, you can consider
1. https://jqueryui.com/
2. https://www.chartjs.org/
If you want to buy commercial libraries, I would recommend
1. https://www.telerik.com/ke
2. http://www.jeasyui.com/
There are many such frameworks available but few are mature enough hence I would recommend that you do couple of PoCs before you finalize the right candidate.
Regards,
Chinmay.
I do not think there is one kit that can fulfill your requirements.
If you do not want to spend any money, you can consider
1. https://jqueryui.com/
2. https://www.chartjs.org/
If you want to buy commercial libraries, I would recommend
1. https://www.telerik.com/ke
2. http://www.jeasyui.com/
There are many such frameworks available but few are mature enough hence I would recommend that you do couple of PoCs before you finalize the right candidate.
Regards,
Chinmay.
Hi Don,
I see this is your first question - welcome to EE.
Let's take a step back and look at what Bootstrap actually is.
It is a stylesheet - yes there is a JavaScript component to it for the bits that require user interaction (Modals and the like) - but those are optional.
At heart it is just a stylesheet - it contains some useful boilerplate styles that allow you to build responsive sites.
When it comes to add-ons - chose your poison - there are components that build on the Bootstrap theme - a google search will find these - for things like charts and sliders - the theme does not really play a role - you can pick from whatever is out there.
Charts - personally I have used Chart.js and C3 (https://c3js.org/ - which I prefer)
For the rest I usually google what I want and then evaluate what is available. Obviously I check out what Bootstrap has first but it does not always give me what I want so I either build my own or go and see what is available on the net.
The question is a bit broad but it seems like you are looking for advice as to what specifically to use with Bootstrap - the answer is - it does not really matter - pick what suites your requirement.
I see this is your first question - welcome to EE.
Let's take a step back and look at what Bootstrap actually is.
It is a stylesheet - yes there is a JavaScript component to it for the bits that require user interaction (Modals and the like) - but those are optional.
At heart it is just a stylesheet - it contains some useful boilerplate styles that allow you to build responsive sites.
When it comes to add-ons - chose your poison - there are components that build on the Bootstrap theme - a google search will find these - for things like charts and sliders - the theme does not really play a role - you can pick from whatever is out there.
Charts - personally I have used Chart.js and C3 (https://c3js.org/ - which I prefer)
For the rest I usually google what I want and then evaluate what is available. Obviously I check out what Bootstrap has first but it does not always give me what I want so I either build my own or go and see what is available on the net.
The question is a bit broad but it seems like you are looking for advice as to what specifically to use with Bootstrap - the answer is - it does not really matter - pick what suites your requirement.
Hi Julian,
Thank you for the welcome to EE. I'm going to continue my subscription when the trial ends this week. EE has been helpful already.
Thanks for your reply and perspective and mention of the charts resource. Very helpful.
The answers to my question help me manage my attention and time to the benefit of my client.
I'd like to leave the question open through Monday, in case someone sees my question on a work day.
Cheers,
Don
Cheers,
Don
Thank you for the welcome to EE. I'm going to continue my subscription when the trial ends this week. EE has been helpful already.
Thanks for your reply and perspective and mention of the charts resource. Very helpful.
The answers to my question help me manage my attention and time to the benefit of my client.
I'd like to leave the question open through Monday, in case someone sees my question on a work day.
Cheers,
Don
Cheers,
Don
The problem is that Bootstrap 4 is still new and it's take some times to the plugins author to updated and fully tested with BS4
So this is the reason why I stick with Bootstrap 3 for now (I 'm still using adminLte template)
Here is what I'm using (most of them are very known so they will be compatible soon if they are not yet.
Select
select2 https://select2.org/
Inputmask
https://github.com/RobinHerbots/jquery.inputmask
Table (responsive and very powerful)
Datatables https://datatables.net/
in combinaison with Yadcf (for the filters)
https://github.com/vedmack/yadcf
Datepicker
Date only (the one I'm always using)
https://github.com/eternicode/bootstrap-datepicker
Date & Time (if you need the time in the same field)
https://github.com/Eonasdan/bootstrap-datetimepicker
Chart (there are a lot and most of the time have some learning curved)
https://apexcharts.com/javascript-chart-demos/
https://github.com/apache/incubator-echarts
http://www.jqplot.com/examples/pieTest.php
In not a fan of range slider, I would use the Bootstrap one.
Always choose a popular plugins so chance you will have support and check the latest update on Github repo to make sure it is still maintained.
You can check the admin template on themeforest they have plenty with Bootstrap 4 (a lot of form design) so the author may have adapted some plugins. https://themeforest.net/category/site-templates/admin-templates
So this is the reason why I stick with Bootstrap 3 for now (I 'm still using adminLte template)
Here is what I'm using (most of them are very known so they will be compatible soon if they are not yet.
Select
select2 https://select2.org/
Inputmask
https://github.com/RobinHerbots/jquery.inputmask
Table (responsive and very powerful)
Datatables https://datatables.net/
in combinaison with Yadcf (for the filters)
https://github.com/vedmack/yadcf
Datepicker
Date only (the one I'm always using)
https://github.com/eternicode/bootstrap-datepicker
Date & Time (if you need the time in the same field)
https://github.com/Eonasdan/bootstrap-datetimepicker
Chart (there are a lot and most of the time have some learning curved)
https://apexcharts.com/javascript-chart-demos/
https://github.com/apache/incubator-echarts
http://www.jqplot.com/examples/pieTest.php
In not a fan of range slider, I would use the Bootstrap one.
Always choose a popular plugins so chance you will have support and check the latest update on Github repo to make sure it is still maintained.
You can check the admin template on themeforest they have plenty with Bootstrap 4 (a lot of form design) so the author may have adapted some plugins. https://themeforest.net/category/site-templates/admin-templates
Hi lenamtl,
Thanks for the links! And for the explanation that Bootstrap 4 is new.
Thanks to each of the replies to my question, they all are helpful.
Cheers,
Don
Thanks for the links! And for the explanation that Bootstrap 4 is new.
Thanks to each of the replies to my question, they all are helpful.
Cheers,
Don
Each of you answered my question and and expanded the possibilities. My contribution to this project is mainly input forms, about 40 of them.
I had already spent many hours working on my project dealing with conflicts with the UI Kit theme I had purchased before realizing it was limited. Your leads to components are appreciated.
EE is great! I have been a step ahead of my deadlines and have been spending time here and there for weeks looking for answers at Stack Overflow, Bootstrap related communities and the usual without that "good feeling". And now I am finding the good info at EE.
Chinmay, thanks for the links to the kits and libraries. If the client wants more pop I can recommend Kendo.
Julian, thanks for the overview and links. And centering. Plus, I came across an answer you provided regarding the bootstrap-select component, which has the live search, icons and tweaks such as styled background colors my client wants.
And lemati thanks for links and tips on selecting plugins.
Cheers,
Don
I had already spent many hours working on my project dealing with conflicts with the UI Kit theme I had purchased before realizing it was limited. Your leads to components are appreciated.
EE is great! I have been a step ahead of my deadlines and have been spending time here and there for weeks looking for answers at Stack Overflow, Bootstrap related communities and the usual without that "good feeling". And now I am finding the good info at EE.
Chinmay, thanks for the links to the kits and libraries. If the client wants more pop I can recommend Kendo.
Julian, thanks for the overview and links. And centering. Plus, I came across an answer you provided regarding the bootstrap-select component, which has the live search, icons and tweaks such as styled background colors my client wants.
And lemati thanks for links and tips on selecting plugins.
Cheers,
Don
Premium Content
You need an Expert Office subscription to comment.Start Free Trial