Bootstrap

The Shortcut Extension







Setting Up Bootstrap


Bootstrap must be linked in the <Head> of all HTML files you want to be affected by Bootstrap, keep in mind that Boostrap is essentially CSS Prefabs.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.4.1/css/bootstrap.min.css"> is one of the files used for this website.
Unlike CSS, Bootstrap is linked with a website URL and a file download for all the presets included. Bootstrap uses Javascript, and makes complex tasks as easy as adding a premade class to your .html files.


Bootstrap Grid


My favorite feature of Bootstrap is its Grid System, using it is far easier than manually making grids and I've used it extensively on this website.

Grid is formatted as a Class inside of a <div>, in the following format:

Grids must be inside a <div class="container"> followed by a <div class="row">, multiple rows can be inside a container.
Each Column is formatted as class="col-size-width", size can me small (sm), medium (md), and large (lg). Width can be any number from 1 to 12.
Multiple columns can be in the same row, as Bootstrap spaces them for you.


Here's an example showing how spacing works.


Bootstrap Buttons


My second favorite feature of Bootstrap is its Button System.

Buttons consist of a <button> tag and a <div id class> tag.
The <button> tag consists of a Class, designating its appearance, a data-toggle telling it how it acts, and a data-target telling it which id it triggers.
The Buttons I used were data-toggle="collapse", which gives a transition effect when revealing the content inside the <div id class> tag.


The data-target and id shows which target is affected by which button, if you keep this the same for every button and id on a page, they will all open eachother.
Anything, including more <div> tags, can be included inside a button, it's like a pop-up page.