Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How to install Bootstrap

Malcolm

Administrator
Administrator
Staff Team
Code Plus
Company Plus
1598489219683.png
Bootstrap 4.5 Framework Installation

Created on August 25, 2020
Introduction
Howdy Coders,

This tutorial is how to install Bootstrap 4.5. Bootstrap is a framework used to design and build websites that are responsive and easy to view on mobile.


Prerequisites
Before we start you should get familiar with the following links:
To add Bootstrap to your website you must decide on whether or not to host it locally or externally (CDN). This tutorial will cover both ways and the recommended way.

Installing Bootstrap Externally
  1. Go to the Bootstrap website > Introduction. Scroll down to CSS.
  2. Copy the code.
    HTML:
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  3. Place the code within your <head> tags in your HTML Document (Note: Place them before your own style.css if you have one).
  4. Save.
  5. OPTIONAL: go back to Step 1, copy and paste JS code and place it right before </body> tag (Code is provided below).
    [CODE lang="html" title="Code"]<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>[/CODE]
Installing Bootstrap Locally (Recommended)
  1. Go to the Bootstrap website > Download. Scroll down to Source Files.
  2. Click Download source. Then extract it to your project.
  3. Now got to Bootstrap website > Introduction, scroll down to CSS.
  4. Copy the code
  5. Copy the code (or copy the one within the spoiler).
    HTML:
    <link rel="stylesheet" href="ADD PATH TO bootstrap.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    Untouced Bootstrap .css file is located within bootstrap-4.x.x > dist > css > bootstrap.css.
  6. Place the code within your <head> tags in your HTML Document (Note: Place them before your own style.css if you have one).
  7. Save.
  8. OPTIONAL: go back to Step 1, copy and paste JS code and place it right before </body> tag (Code is provided below)
    [CODE lang="html" title="Code"]
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    [/CODE]

Testing Bootstrap
Before we call it a success, lets test to make sure it's working. Within your body add this code, if it changes then it worked if it didn't carefully go over steps again.

HTML:
<p class="h1">h1. Bootstrap heading</p>
 
Last edited:
why is there still an external connection in your guide to local loading?

in addition i would use the bootstrap.min.css, this shortens loading times.

otherwise you need the jquery, i always use the slim.min variant(save loading time) the bootstrap.bundle(contains poppers)
HTML:
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
I always set the codeblock just before the closing body tag, this also improves the loading of the website
 
Last edited:
I try to avoid using the CDNs because they aren't always reliable. That said, there are times when they are useful... For example, if you have unreliable server hosting or slow loading hosting, then using a CDN can help offload some of that to another server. For small fun projects that you are just doing for practice, or for a smaller client - use a CDN. If the CDN goes down or changes in the future, your client may pay you to update it or if it's a smaller project, you can just change the link.

However, all in all I like to put the jQuery, Boostrap, etc files on my actual servers so that each site can have its own local code. It's also nice because you can then go update Boostrap classes if you need for certain projects.
 
Then it would be great if the basis already offers the best possible starting situation.
;)
The point is that you don't want to overwhelm a new user to Bootstrap, saying to add this then this can cause confusion. Then in the future, you can something like this: in addition to this you can do this and that.
I try to avoid using the CDNs because they aren't always reliable. That said, there are times when they are useful... For example, if you have unreliable server hosting or slow loading hosting, then using a CDN can help offload some of that to another server. For small fun projects that you are just doing for practice, or for a smaller client - use a CDN. If the CDN goes down or changes in the future, your client may pay you to update it or if it's a smaller project, you can just change the link.

However, all in all I like to put the jQuery, Boostrap, etc files on my actual servers so that each site can have its own local code. It's also nice because you can then go update Boostrap classes if you need for certain projects.
I prefer also having everything on my own server. It's kinda like having your logo hosted on another website, but what happens when that website goes down? Then you're going to have a broken image link. So I completely agree with this.
 
I am more concerned that it is dangerous to load JS from external sources. Both for security and privacy.


I find it very brazen to leave something like this open to earn money again.
I get the security/privacy part, but that's something that can be additionally added in a separate thread. Remember that Code Forum offers resources to all levels of developers, some may have trouble understanding, some may understand it. If you add everything to one thread it can quickly become confusing.
 
I know what you mean, but I'm sure you also know how unwilling people are to change the way they work, so once they have learned how to do it, they won't change it much.
So you might want to explain the best way to do it right away.
 
I know what you mean, but I'm sure you also know how unwilling people are to change the way they work, so once they have learned how to do it, they won't change it much.
So you might want to explain the best way to do it right away.
Perhaps you can explain this in a separate threads as I’m not yet that experienced with Bootstrap.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom