How to get bootstrap in notepad++?

#1

Can anyone explain how to get boostrap in Notepad++? Thanks.

1 Like
#2

The first thing I would suggest is to look over the documentation. They are pretty thorough and you should find your answer there. http://getbootstrap.com/docs/4.0/getting-started/introduction/

If you are having trouble with a specific approach let me know and I might be of further assistance.

#3

Aaronms is right. But to delve a little deeper…

I’m guessing that perhaps you’ve been using something like codepen and now you’re trying to do it locally?

When building locally, you need to import those files. There are two ways - to download the actual files and then use link statements to pull in the css from those files and script statements to import the javascript. Optionally, instead of downloading those files you can just link to them remotely through a cdn.

There is a nice example on the page aaronms mentions.

#4

Ok i got it, but how do i install them? I understand i need to put link rel’s in head tag and script sources down bellow near closed body tag.

#5

I don’t really understand what you what you mean by “install”.

Again,

Method 1 - Remote Source

Put the following lines in your code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

and

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

This will go out and get the files for the browser every time it is run. You do not need to get private copies. This is arguably better for production so I tend to just do this. The website given by Aaronms provided this information. It also provided some sample code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

If you cut and paste that into an index.html file, you will have a working web page.

Method 2 - Local Source

This is essentially the same except that instead of linking to the remote files, you download them, for example from BS’s downloads page. Then you change the rel and src strings to point to your local files.

Why do it this way? I think some people prefer this for development. It’s a little faster (although files are probably cached in the browser so I’m not sure if it matters). There might be some other advantage of which I’m unaware.

I would just go with method 1 for now. Get it working. Like I said, that code above is a working index.html file.

Let us know if you run into more problems.

1 Like
#7

This helped me, thanks.