Is it possible to limit stylesheet to only one div / form?

Question

0.00/5 (No votes)

See more:

Hello everyone!

I have a form where I use an open source datetime picker, which works with Bootstrap 3, but I use bootstrap 5 for the rest of the website. When I integrate the form with the datetime picker, the style of the whole page becomes messed up.

Is there a way to limit application of Bootstrap to that one form? Or maybe there is another workaround to preserve the style of the website and to use that datetime picker?

I know, this question was posted here before quite a long time ago, and the solution was to use scoped style. Unfortunately, it is not supported by most browsers.

Maybe you know some datetime picker on Bootstrap 5? Unfortunately, I couldn't find any.

Any ideas and suggestions are appreciated!

What I have tried:

I already place

<?php require file and echo the form; ?>

in the div, where the form should be.

I have tried to place bootstrap 3 stylesheet above the one with Bootstrap 5, and removed it from . It preserved the style of the website, but the datetime picker didn't work anymore.

I have tried to restyle the classes in Bootstrap 3, but then some of the features in the datetime picker stop working.

Posted 4-Apr-21 22:22pm

InnaTS

Updated 6-Apr-21 2:40am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-04-06T02:40:00

You can't mix two versions of Bootstrap in the same page. If you really need a datetime picker, you'll need to find one which supports your chosen version of Bootstrap.

Since Bootstrap 5 is still in beta, you might struggle to find one that works with that version. The one I've used with Bootstrap 4 is:
GitHub - Eonasdan/tempus-dominus: A powerful Date/time picker widget.[^]

But bear in mind that most browsers now support the date and time input types, so you may not need a picker at all:
<input type="date"> - HTML: HyperText Markup Language | MDN[^]
<input type="time"> - HTML: HyperText Markup Language | MDN[^]