CODEWITHSUNDEEP
twitter-bootstrapnpm
catscoolzhyk
catscoolzhyk

Reputation: 685

How to start/test/try Bootstrap example?

I have downloaded the Bootstrap 4.1 source from https://getbootstrap.com/docs/4.1/examples/. I want to just test, or run it. I thought it is enough to just open index.html, and view the executed source as an HTML document. It is definitely not running as expected.

Please, help a newbie.

Upvotes: 1

Views: 4118

Answers (2)

djdavies7
djdavies7

Reputation: 177

On that page in your post ( https://getbootstrap.com/docs/4.1/examples/ ) , you have a link to 'download the source code'. What you have downloaded is the source code for the Bootstrap 4.1 framework, which can also be found on their Github here: https://github.com/twbs/bootstrap

I believe what you're looking for is a way to run the example templates that you saw, and that you are not interested in the entire source code behind the Bootstrap framework to build it or modify it yourself. You just want to use it. What you have downloaded, is possibly overkill for your needs.

To actually use Bootstrap, hop over to http://getbootstrap.com/docs/4.1/getting-started/introduction/, and I would suggest you use their CDNs as shown there (Content Delivery Networks - the quickest, easiest way -- those servers are hosting the JavaScript and CSS files for you. You don't need to even download them to your own disk) if you just want to run/demo the examples you were looking at.

To use and modify those Boostrap examples (i.e. to open index.html and view the example: HTML, JavaScript, CSS) , you will find them in that ZIP of the entire Bootstrap source code you downloaded, and that is why it links you to the entire source of Bootstrap. They are in this directory:

bootstrap-4.1.3.zip\bootstrap-4.1.3\site\docs\4.1\examples

Let's take a look at the album example included within their ZIP archive. If we go ahead and open up index.html, we can see our web browser will simply load the HTML. The CSS and JavaSript are not executed. To confirm this, we can usually hit F12 to open most web browser's (Chrome, Firefox, Opera, IE/Edge, etc) Web Developer Tools, and look at the Console section. We see with this example, album, we are getting a ERR_FILE_NOT_FOUND for bootstrap.min.css, popper.min.js, bootstrap.min.js, holder.min.js, favicon.ico.

Let's take a look at the code behind album's index.html. Looking at line 13, we can see: <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> So that directory path match where out bootstrap.min.css file is? The same for the linked favicon.ico on line 8. Looking at the bottom of index.html, we can see this is where all of the JavaScript is linked. Firstly, we have a jQuery CDN on line 226. We have that loaded, so that is why we did not see that ERR_FILE_NOT_FOUND. Further more, we have multiple JavaScript files like popper.js and bootstrapmin.min.js to name a few, that probably do not match our directory structure.

Extracting all of the archive for bootstrap-4.1.3.zip, and then trying to open album's index.html, I still see that we actually get a ERR_FILE_NOT_FOUND for bootstrap.min.css and bootstrap.min.js. It is because they have made an error linking you to JavaScript and CSS files that do not exist on disk/that directory structure.

To fix it: On line 12-13, change it to this:

<!-- Bootstrap core CSS --> <link href="../../../../../dist/css/bootstrap.min.css" rel="stylesheet">

And on line 229, change to this:

<script src="../../../../../dist/js/bootstrap.min.js"></script>

Save the file, refresh the page, and the example will work. You will also see we do not have any errors in the web developer console pane.

To confirm, you do not need the Apache server or the PHP language (WAMP, XAMPP). You are not serving PHP files, and purely client-side technologies: CSS, JavaScript, HTML. Bootstrap is a front-end framework.

Upvotes: 5

Stefan Candan
Stefan Candan

Reputation: 23

It's just a template for a website. You'll have to set up a webserver which will serve the content and scripts to your browser.

If you're running Windows, WAMPP or XAMPP will set one up for you on your machine.

After the setup you'll be able to browse to http://localhost to see your site. They both set up a dashboard page.

If you want to continue here to setup your bootstrap example you'll have to locate the "www" or "htdocs" folder and clean it out, throw in the bootstrap source and then use your browser to navigate to http://localhost again.

If you want to keep the dashboard page you'll have to create a new folder in "htdocs" or "www" and throw the source in there. Then navigate to http://localhost/newfoldername to view it in your browser.

Upvotes: 0

Related Questions