-2

I am using Bootstrap 4 for my project and I need to add some div to my project. Problem is this div element created using Bootstrap 3. Is there any way to use Bootstrap 3 for specific div?

<html>

  <head>
    <!--use Bootstrap 4 js and css-->
  </head>

   <!--Start to use Bootstrap 3 js and css-->
   <div>
   </div>
   <!--Stop to use Bootstrap 3 js and css-->

</html>
hellzone
  • 5,393
  • 25
  • 82
  • 148
  • *Problem is this div element created using Bootstrap 3.*...Uhh, actually you create the `HTML` elements, so you have the full control over them. So, what is the question? It seems very unclear, at least to me...Please read [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) – Ionut Necula Jul 20 '17 at 07:48
  • 1
    Assign an id to the div and change the css only for that div – bigbounty Jul 20 '17 at 07:49
  • I haven't tried, but I think you shouldn't be mixing different versions of Bootstrap in the same page. – jotaelesalinas Jul 20 '17 at 07:52
  • @Ionut He wants to include `twitter-bootstrap3` only for a selected element not for entire page. I guess – Abhishek Pandey Jul 20 '17 at 07:54
  • @AbhishekPandey Yes exactly what I want to do. – hellzone Jul 20 '17 at 07:56
  • @AbhishekPandey, if that's the case, I don't think that is possible...but I could be wrong. – Ionut Necula Jul 20 '17 at 07:58
  • If you are using `sass`, then It can be possible, make element unique with `id` and the include CSS in it, `#id { @import "unique.css"; }` – Abhishek Pandey Jul 20 '17 at 08:07
  • @AbhishekPandey, it may work for the `CSS`, but can it work for the `JS` to? – Ionut Necula Jul 20 '17 at 08:24
  • @Ionut Nope, this won't work for `js` in any way, and for CSS even if he import css through `@import` but cannot make unique element to don't use bootstrap4's css, better way is to use Ifamre for that unique element I guess. – Abhishek Pandey Jul 20 '17 at 08:41
  • add Id to html element and use this id to add style and script – Billu Jul 20 '17 at 08:43
  • @AbhishekPandey, agree. I would also recommend to stick to one version of `Bootstrap` and just implement what he needs the old school, by just styling and do whatever `JS` he needs himself. – Ionut Necula Jul 20 '17 at 08:43
  • @AbhishekPandey Problem is this div has hundreds of html elements and none of them looking fine with bootstrap 4. So I can not create custom css for all of them. – hellzone Jul 20 '17 at 08:55
  • In that case using Iframe is the only option I guess. – Abhishek Pandey Jul 20 '17 at 09:04

1 Answers1

1

First and foremost, if that is the website structure you got it is incorrect, and a proper structure can look something like this:

<!DOCTYPE html>
<html>
  <head>
     <title>My First Website</title>
     <meta charset="UTF-8"/>
     
     <!-- Any required CSS or JS files goes here -->
  </head>
  <body>
  <!-- Page content goes here -->
  </body>
</html>

Apart from that, Bootstrap does indeed have CSS classes including "div", however, most of what it does requires you to give a class to an element in order for anything to happen. If it does anything else, you should double check in what order you are linking your CSS files since it does matter, and if that doesn't help, make specific classes yourself in your own CSS file to override it.

Xariez
  • 759
  • 7
  • 24
  • I already said that I am using Bootstrap 4. How can you use both Bootstrap 3 and 4 with your example code? – hellzone Jul 20 '17 at 07:55
  • Ah, I didn't understand that at first. Mixing Bootstrap 4 and Bootstrap 3 is **not** something you should be doing, like others have stated. Bootstrap 3 might be more tested, but as far as my own experience goes Bootstrap 4 is a lot better. Choose one and stick to it. @hellzone – Xariez Jul 20 '17 at 07:57
  • Problem is this div has hundreds of html elements and none of them looking fine with bootstrap 4. So I can not create custom css for all of them. Isn't there any other way? – hellzone Jul 20 '17 at 08:02
  • @hellzone Like earlier stated, [if you load in your CSS files in the correct order](https://stackoverflow.com/questions/3067455/what-is-the-order-of-loading-the-css-files-in-a-html-page), you should get your desired look. If not, you could always do something like [this](https://gist.github.com/anonymous/bf09c81cba68bbb17f0401742d01782f) – Xariez Jul 20 '17 at 09:30