How To Use Bootstrap CDN

how-to-use-bootstrap-cdn

Hello and welcome to the next lesson of Bootstrap 4 tutorial. In this lesson, we will learn about how to use Bootstrap 4.

To start using Bootstrap we need some tools which are called an editor and modern web browser.

Tools are optional you can use any of your favorite code editor and your favorite browser. In this course, we will use Visual Studio code and Google Chrome Web Browser.

To download Visual Studio Code please visit: https://code.visualstudio.com/

Install visual studio code and create your working folder and open it in the editor.

Actually, there are several ways to use Bootstrap, We can use BootstrapCDN to use bootstrap in our project or we can download the proper bootstrap file and use it in our project.

Learn how to use BootstrapCDN

To use BootstrapCDN, Let’s visit the https://getbootstrap.com. By the time you are reading this post, the version of CDN support could be different So I will suggest getting the link from the Bootstrap Website. I am sharing here also if you would like to use it from here.

we already know that Bootstrap is full of CSS Classes and JS templates. So To work with Bootstrap we need some CSS files links and JS files links. To work with JS files we Need jQuery.

HTML DOCTYPE

it’s important for Bootstrap to work you must use the HTML5 Doctype.

Responsive Meta Tag

Bootstrap is famous and popular for its mobile first design. Bootstrap always focus on mobile view first then it’s scaled¬†up the size of its components according to the screen size. So use this meta tag in you HTML file inside the head <head>...</head> tag.

CSS links

Copy this link and paste it into your HTML file inside the head tag <head></head>

JS

Many of the Bootstrap Components need JavaScript to function. Place the code before the end of the body </body> tag of your HTML file.

To work properly this JavaScript You need jQuery and Popper.js.

Note: It’s very important things that the jQuery comes first then Popper.js and then our own JavaScript Plugin. So make sure the order is correct.

Copy this code and paste into your HTML file and it should be before the end of the body tag.

If you are curious enough to learn more about which components use which file follow this link and read more

https://getbootstrap.com/docs/4.3/getting-started/introduction/

So let me share with you the exact code that will look like after you added all the stuff. We can call it as a Starter Template. you can copy this code and start your website designing.

Final Snippet of our HTML File:

Okay, Now we already know how to use BootstrapCDN to use Bootstrap in our website. So very soon we will create a very nice website with the eye-catching looks. Till then see you in the next post and we will make our hand dirty with a lot of codes.

If you have any comments or question or suggestion please write to us below. we will love to hear from you and we will love to reply you back.

Leave a Reply

avatar
  Subscribe  
Notify of