How to Bootstrap locally?

1

Can anyone give me a quick rundown of how to do this? This is more a “I don’t know what I don’t know” thing, so I’m having a bit of difficulty getting started.

Basically, I want to learn Bootstrap, not just how to use the classes but also how to customize the themes. It appears I also need to learn SASS to do this, so why not add that to the list? I like to work locally, so ideally this would involve downloading all relevant assets and how to hook them up to the html (you can tell by the terminology I don’t know what I’m doing).

I have successfully used CDNs, but I was hoping to keep things local–also it doesn’t look like you can customize things as well with CDNs (or maybe I’m wrong?).

I use VS Code and am comfortable using NPM. I’m hoping to eventually use Bootstrap to style some React apps I’m creating.

I see lots of tutorials for absolute beginners and using CDNs and what col-sm-12 means, but I’m more trying to figure out the setup at this point.

Thanks!

2

bootstrap is a library, you need to import it. And that means using the CDN, or having a file that contains it inside your project (you would still need to import it in your html file, you just have also the source there and not online)

you can download bootstrap from here: https://getbootstrap.com/docs/4.1/getting-started/download/

once downloaded, add the files to your project, and import them in your html file.

you get the same library in both ways

1 Like
3 
> git clone https://github.com/twbs/bootstrap.git
> cd bootstrap
> npm install
> npm start
4

noice!

Now that is a huge file. Like 500MB

5

Almost all tooling + you get the docs built as well – output will be in dist, & will be tiny.

If you want less stuff & you’re fine with node/npm:

  • make a folder, cd into it
  • npm init -y
  • npm install node-sass
  • copy the bootstrap sass files to a folder (src, maybe).
  • add a script to package.json `“compile”: “node-sass -w src/bootstrap.scss bootstrap.css”
  • make an HTML file with some test content, link the bootstrap.css file in the head.
  • run npm compile and open the HTML file in a browser.
  • edit the bootstrap variables file and refresh the browser for changes
6

Cool, dude. I will save this for after I play with the big package.