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
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.
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
- Go to the Bootstrap website > Introduction. Scroll down to CSS.
- 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">
- Place the code within your <head> tags in your HTML Document (Note: Place them before your own style.css if you have one).
- Save.
- 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]
- Go to the Bootstrap website > Download. Scroll down to Source Files.
- Click Download source. Then extract it to your project.
- Now got to Bootstrap website > Introduction, scroll down to CSS.
- Copy the code
- 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">
- Place the code within your <head> tags in your HTML Document (Note: Place them before your own style.css if you have one).
- Save.
- 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: