How to setup Bootstrap with CDN?

1.	How to setup Bootstrap with CDN?
Answer» Use Bootstrap CDN, if you don’t wish to do the cumbersome task of downloading Bootstrap and hosting it on your system or server. CDN is Content Delivery NETWORK, wherein the Bootstrap is hosted and with just the CDN link, we can add it to our website. We will be using MaxCDN to provide CDN support for Bootstrap CSS and JavaScript. Using CDN will lead to FASTER loading time since once you have requested a file from it from your website, it will be served from the server closest to them. Let us now see how we can setup Bootstrap 4 with CDN. Use the following CDN for CSS and JS. Include it in the <head> tag: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.13/js/bootstrap.min.js"></script> Now, include jQuery and Popper if you are using the components like tooltips, popovers, ETC. <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> Let us now see a simple example to implement what we saw above. In the below example, we have included .container-fluid class to provide a FULL width container that spans the entire width of the viewport. We have included the Bootstrap CDN in the <head> tag: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <META charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Demo Page</h1> <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html> The following is the output after running the above Bootstrap code:

Answer»

Use Bootstrap CDN, if you don’t wish to do the cumbersome task of downloading Bootstrap and hosting it on your system or server. CDN is Content Delivery NETWORK, wherein the Bootstrap is hosted and with just the CDN link, we can add it to our website. We will be using MaxCDN to provide CDN support for Bootstrap CSS and JavaScript.

Using CDN will lead to FASTER loading time since once you have requested a file from it from your website, it will be served from the server closest to them.

Let us now see how we can setup Bootstrap 4 with CDN.

Use the following CDN for CSS and JS. Include it in the <head> tag:

Now, include jQuery and Popper if you are using the components like tooltips, popovers, ETC.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

Let us now see a simple example to implement what we saw above. In the below example, we have included .container-fluid class to provide a FULL width container that spans the entire width of the viewport. We have included the Bootstrap CDN in the <head> tag:

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <META charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Demo Page</h1> <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html>

The following is the output after running the above Bootstrap code:

How to setup Bootstrap with CDN?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment