Bootstrap datepicker without full bootstrap.css

Question

I want to use the bootstrap-datetimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/).

It works fine when everything is included, altough the icons doesn't show: http://prntscr.com/8bci9j

But besides that, I'm not using bootstrap for the site, and including the full bootstrap.css messes up with my styling. So I would just like the actually needed CSS-parts from the bootstrap.css - can anybody help me to get these? If I don't include bootstrap.css the datepicker is messed up, even though bootstrap-datepicker.css is included.

Answer 1

Its not that easy, there are number of css classes applied to elements from bootstrap.css depending the events like hover or click, etc.,

so its tough to get it work like that from any vendor css library. My suggestion is to update your local css so that it refers to specific elements everywhere in your script.

• Also refer to below MDN precendence table to know more about css priorities/precendences. MDN
• if required use !important(in worst case) for the css classes which requires more priority.

---

Reference from MDN about precendence:

Selector Types

The following list of selector types is by increasing specificity:

1. Universal selectors (i.e., *).
2. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
3. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
4. ID selectors (e.g., #example).

Inline style added to an element (e.g., style="font-weight:bold") always overwrites any styles in the CSS and thus can be though as having the biggest specificity.