asked on
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.
UI/UXJavaScriptjQueryBootstrapComponents
Last Comment
Don Richardson
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.
ASKER
Hi Chinmay,
Thank you for the reply and resource links. Very helpful.
Cheers,
Don
Thank you for the reply and resource links. Very helpful.
Cheers,
Don
ASKER
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
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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
ASKER
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
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.