Link to home
Start Free TrialLog in
Avatar of Don Richardson
Don Richardson

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

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

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.
Avatar of Chinmay Patel
Chinmay Patel
Flag of India image

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

If you want to buy commercial libraries, I would recommend

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.

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 ( - 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.
Avatar of Don Richardson
Don Richardson


Hi Chinmay,

Thank you for the reply and resource links.  Very helpful.

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.


Avatar of lenamtl
Flag of Canada image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.  

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.