Hello all, I tried running *Navbar* and *modals* boostrap file on Xampp local Host but it's not expanding.

Other bootstrap codes are working.

Please house, what's the solution to the problem. ?

Do I need to download and link the page to jQuery first ?

*Please I want to run the site on local Host with no internet at all*.

MODIFIED.

After series of research, I decided to include the general Google bootstrap and jQuery link at the appropriate places in my site. that's how I solved the problem.


if you are having similar challange, don't bother running bootstrap locally. just insert the link.

The good news is that once you have accessed the internet once, whether your data is on or off, you will still be able to use bootstrap and jQuery.

Are you using a CDN? If yes, you can't use CDN without internet.

To use bootstrap without internet, you need to download the css and Javascript file and reference them in the head tag.

CDN is that link tag you copy from bootstrap website.

Karleb:
Are you using a CDN? If yes, you can't use CDN without internet.

To use bootstrap without internet, you need to download the css and Javascript file and reference them in the head tag.

CDN is that link tag you copy from bootstrap website.

I downloaded the bootstrap file. but I don't know how to link it.

squash47:


I downloaded the bootstrap file. but I don't know how to link it.

I don't know how your folders are related, maybe you can share a picture.

Let's assume you have 2 folder structures.

Project - index.php
Bootstrap - css - bootstrap.css
Bootstrap - js - bootstrap.js

To link the css and js to your index.php you'll do.


../Bootstrap/css/bootstrap.css


../Bootstrap/js/bootstrap.js

Karleb:

I don't know how your folders are related, maybe you can share a picture.
Let's assume you have 2 folder structures.
Project - index.php Bootstrap - css - bootstrap.css Bootstrap - js - bootstrap.js
To link the css and js to your index.php you'll do.

../Bootstrap/css/bootstrap.css

../Bootstrap/js/bootstrap.js

I will do just that sir. I will let you Know of any progress I make.

squash47:
Hello all, I tried running *Navbar* and *modals* boostrap file on Xampp local Host but it's not expanding.

Other bootstrap codes are working.

Please house, what's the solution to the problem. ?

Do I need to download and link the page to jQuery first ?

*Please I want to run the site on local Host with no internet at all*.

If you are using bootstrap offline, your file must be linked to jQuery. jQuery is a prerequisite to run bootstrap

You should also check your bootstrap version. Not all versions support modals and cards(though there is a way to work around this). Also make sure your jQuery version is compatible with your bootstrap version

PHPdeveloper200:


If you are using bootstrap offline, your file must be linked to jQuery. jQuery is a prerequisite to run bootstrap

You should also check your bootstrap version. Not all versions support modals and cards(though there is a way to work around this). Also make sure your jQuery version is compatible with your bootstrap version

I tire downloading jQuery, but it has no single file like bootstrap.
Not even a zip file. All I saw was a page filled with pre written codes.

I don't know if that's why you mean by jQuery file. And if yes, how do I get the files into my system.

squash47:



I tire downloading jQuery, but it has no single file like bootstrap.
Not even a zip file. All I saw was a page filled with pre written codes.

I don't know if that's why you mean by jQuery file. And if yes, how do I get the files into my system.

jQuery does not contain bootstrap codes. I will post a picture of how your file should be tomorrow

PHPdeveloper200:


If you are using bootstrap offline, your file must be linked to jQuery. jQuery is a prerequisite to run bootstrap

You should also check your bootstrap version. Not all versions support modals and cards(though there is a way to work around this). Also make sure your jQuery version is compatible with your bootstrap version

I thought bootstrap dropped jquery for vanilla Javascript in the latest bootstrap?

Karleb:


I thought bootstrap dropped jquery for vanilla Javascript in the latest bootstrap?

Well I am not aware of this since I don't use the latest version of bootstrap. But if this is true then that means a lot of codes will be rewritten

Op this might also help

https://getbootstrap.com/docs/5.0/getting-started/javascript/

PHPdeveloper200:


jQuery does not contain bootstrap codes. I will post a picture of how your file should be tomorrow

To save the future of your code using bootstrap, don't use JQuery.. bootstrap already dropped JQuery for pure JavaScript in the latest version and this is a good development..

KennyFranklin:


To save the future of your code using bootstrap, don't use JQuery.. bootstrap already dropped JQuery for pure JavaScript in the latest version and this is a good development..

I'm actually having issues with bootstrap mobile responsiveness as well. The view on laptop is okay. Also, when i view using visual studio code editor on my phone, it is responsive but when i view on my phone using (tiny web server) to host, it is not responsive but instead show as if it's on a laptop. This is getting me frustrated. Please what am i doing wrong?

It seems I shall do a tutorial on how to use bootstrap since many people are not getting it.

Karleb:
It seems I shall do a tutorial on how to use bootstrap since many people are not getting it.

Abeg do oo and mention me biko

Karleb:
It seems I shall do a tutorial on how to use bootstrap since many people are not getting it.

Patiently waiting for the video but please can you help me attend to this question below.


I'm actually having issues with bootstrap mobile responsiveness as well. The view on laptop is okay. Also, when i view using visual studio code editor on my phone, it is responsive but when i view on my phone browser using (tiny web server) to host, it is not responsive but instead show as if it's on a laptop. This is getting me frustrated. Please what am i doing wrong?

Actually I can't do a video tutorial now. But I wrote an article on my blog.

Check it out. Also, there is a link to the github repository below the article. If you don't understand anything, do ask.

https://karleb.hashnode.dev/how-to-use-bootstrap-offline

@squash47 @Rictech

lanibi:


Patiently waiting for the video but please can you help me attend to this question below.


I'm actually having issues with bootstrap mobile responsiveness as well. The view on laptop is okay. Also, when i view using visual studio code editor on my phone, it is responsive but when i view on my phone browser using (tiny web server) to host, it is not responsive but instead show as if it's on a laptop. This is getting me frustrated. Please what am i doing wrong?

Maybe it because you are not adding a meta tag to the head tag of the html file.

Add this meta tag to the head tag and tell me if there is any difference.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Karleb:


Maybe it because you are not adding a meta tag to the head tag of the html file.

Add this meta tag to the head tag and tell me if there is any difference.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Thank you. It's now working fine.

Your response made me realize that I used <meta type="viewport" content="width=device-width, initial-scale=1.0">
Instead of <meta name="viewport" content="width=device-width, initial-scale=1.0">

Thank you very much. I'm so happy.

But one more question, why won't the CSS apply when I view in my browser without hosting locally on tiny web server? It is only displaying the html files.

lanibi:

Thank you. It's now working fine.

Your response made me realize that I used <meta type="viewport" content="width=device-width, initial-scale=1.0">
Instead of <meta name="viewport" content="width=device-width, initial-scale=1.0">

Thank you very much. I'm so happy.

But one more question, why won't the CSS apply when I view in my browser without hosting locally on tiny web server? It is only displaying the html files.

I don't know.

Maybe, you're using a CDN and you're not connected to internet on your PC.

There are a lot of possible reasons.

Karleb:
Actually I can't do a video tutorial now. But I wrote an article on my blog.

Check it out. Also, there is a link to the github repository below the article. If you don't understand anything, do ask.

https://karleb.hashnode.dev/how-to-use-bootstrap-offline

@squash47 @Rictech

thanks man. I have solved the problem. I just figured it's best if I used the regular Google api link.

and it worked.

meanwhile, your website is so sweet. it doesn't look like a WordPress hosted site.

squash47:


thanks man. I have solved the problem. I just figured it's best if I used the regular Google api link.

and it worked.

meanwhile, your website is so sweet. it doesn't look like a WordPress hosted site.

My site?

It's a blog I created off hashnode. You can create your own blog with hashnode if you want.

TLDR: I did not code that blog.

Karleb:


My site?

It's a blog I created off hashnode. You can create your own blog with hashnode if you want.

TLDR: I did not code that blog.

oh, ok thanks.

squash47:



I tire downloading jQuery, but it has no single file like bootstrap.
Not even a zip file. All I saw was a page filled with pre written codes.

I don't know if that's why you mean by jQuery file. And if yes, how do I get the files into my system.

Copy the code and paste on an empty JS file in an editor and then save it as jquery.js or any other appropriate name you like. Finally, reference it in your HTML file and you're good to go.