Bootstrap from CDN in Bootstrap

How to load Bootstrap file from CDN?

CDN stands for Content Delivery Network or Content Distribution Network, here is the great explanations of CDN and loading files from it.

Loading bootstrap files from CDN helps us in gaining the overall performance of the website. The Bootstrap files (.css or .js or fonts files - all related with Bootstrap) can be loaded from MaxCDN and here website url https://www.bootstrapcdn.com

Here is the code to load Bootstrap files from CDN, we can copy-paste below code snippet under <head></head> of the web page or layout page or master page to use Bootstrap

Important: Please note that these are live server path so if you do not have internet connection, these files do not get loaded into the browser and Bootstrap functionality may not work.

<!-- Minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<!-- Minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Optional theme, if needed -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />

It is suggested to use the CDN files only in the live environment.

Dependencies

Please note that following .JS files must be loaded before Bootstrap javascript files

jQuery file
Respond.js (optional) - only when we want our web site to support older browser like IE 6, 7 etc. or other browser thta doensn't support CSS3 @media tags.

Sample Bootstrap page template

Here is the sample web page structure using Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    
    <!-- Custom CSS written to override Bootstrap behavior or add new styles -->
    <link rel="stylesheet" href="/custom/custom.css" />

    <!-- jQuery file -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!-- Minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- Use other plug ins like Respond.js etc. or Custom .js file -->

</head>
<body>
    <div class="well">
        <h1>Welcome to Bootstrap</h1>
        <p>
            Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
        </p>
    </div>
</body>
</html>