Dealing with multiple JQUERY load and avoiding conflict with bootstrap

Hello Everyone.

Today I faced CSS and JQUERY confident issue very badly. I have to use JQUERY week calender which run under jquery 1.4 and have to use bootstrap3 now the catch is bootstrap need a higher version of jquery to run .

How i resoled the above problem . after doing lots of research and search in stack overflow I found the solution

1) For JQUERY CONFLICT :

<script src="jquery1" />
<script src="jquery2" />
<script>
jQuery.noConflict();
</script>

Now where ever you are using bootstrap use 

<script>
jQuery(".class").fun();
</scrirt>

2) The CSS conflict . 

Wrap bootstrap CSS with name space .

Click here to see the live demo Here.

like this 

#bootstrap {
  /*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

  /*! normalize.css v2.1.0 | MIT License | git.io/normalize */

}
#bootstrap article,
#bootstrap aside,
#bootstrap details,
#bootstrap figcaption,
#bootstrap figure,
#bootstrap footer,
#bootstrap header,
#bootstrap hgroup,
#bootstrap main,
#bootstrap nav,
#bootstrap section, ....


<div class="content">
    <div id="bootstrap">
        <h1>Header 1</h1>
        <h2>An example of styles using bootstrap.</h2>
        <h3 class="text-muted">It's not pretty, but it works.</h3>
        <a href="#" class="btn btn-primary">Button</a>
        <br></br>
        <p>Notice how the markup in this div is not inheriting from the user's custom CSS.</p>
    </div>
    <hr></hr>
    <div id="Preview">
        <!-- Start Html Template -->
        <style>
            .user > h1 {color: red;}
            .user > h2 {color: blue;}
            .user > h3 {font-size: 40px;}
            .user > .btn {margin-top: 24px; background-color: red;}
        </style>
        <div class="user">
        <h1>Header 1</h1>
        <h2>An example of styles NOT using bootstrap.</h2>
        <h3 class="text-muted">It's a bit more work, but it gets the job done</h3>
        <p>Notice how the user's markup has the same classes as bootstrap, but they're not inheriting from it.</p>
        <a href="#" class="btn btn-primary">Button.</a>
        <!-- End Html Template -->
    </div>

</div>

:) Happy coding