Here comes the Bootstrap, once we find the right path though.

It’ll be short today.
Bootstrap, we heard this name zillion times already. We even used it.
But did we really know what we have done and how? I don’t feel so.

First I figured out is one general confusion. And that is the path in project. Kinda weird to mention this thing that far in process but anyway.

There are two ways how to address the file within the folder structure, no matter what we have two types of linking. Relative and fixed.

Lets find a path

Fixed path means you define it as precise as you can, you point strait and God forbid us to move the files somewhere else.
Windblows users would see fixed path like
C:\\Users\your-user-name\Desktop\my-project\index.html
All other on sane systems like Mac and Linux the path would be
//Users/my-user-name/desktop/my-project/index.html

On server which is most likely Linux based server and in all browsers no matter if the wind blows or the apple is bitten you see address like:
http://my-domain.com/my-project/index.html

Quick recap.
The sane systems have same slash type / Windblows has the other slash \ but when used it webdesign it follows the common paradigm the slash, not the back slash, again this one /.
Windows as we see makes life more confusing as always. Never mind the mammoths are part of your life you have to get use to it if you are sitting on it.
Back to the Fixed path. Fixed means it point to the exact location from the top most possible point, from its root. Such a root os computer is the hard drive and on server it is the domain (will touch this later in more detail).

Relative path on the other hands links relatively to the file that is asking.
Suppose you have a file like index.html that lays inside folder my-project with other files around like so.

//Users/my-user-name/desktop/my-project/index.html
//Users/my-user-name/desktop/my-project/boostrap/css/boostrap.min.css
//Users/my-user-name/desktop/my-project/boostrap/js/boostrap.min.js

Imagine your name is index.html (nice to meet you) and you have some other guys around you in separate rooms. One of the room is called “bootstrap” and has another rooms inside called “css” and “js”, and so on..

Suppose you as Index.html want to ask the “bootstrap.min.css” guy to join you. And so what you do is that you would not go out of the house look for the floor where the booststrap room is and so on. But you open the closest door to and open the “bootstrap” room and check if there the “css “room is not there too and ask the guy to help you.
Lets write this procedure in computer way.

boostrap/css/boostrap.min.css

(While each slash is a the door to the next room.)

As in real life there is no point to find the top most root and walk the whole path to your neighbour from there again and again, but you just nock on the door.

note:
You  might be seduced to use the slash on the beginning. But that will be hard mistake. The slash on the beginning puts you to the root like dirt through the black hole. Do it if you wanna travers through time and space otherwise avoid it.

Why to use fixed or relative path?
Well. The time will come and you decide to move your “my-project” folder with all rooms and neighbours inside to your new hard drive, or webserver. If you use Fixed path the file index.html will always try to jump out of the root to the defined root and try it from there. But! Each computer has slightly different paths. And even on the very same computer if you move the folder somewhere else the index won’t find the file on place where it was before and it is not anymore. That makes sense no? Even you would not find in on the desktop when you moved it to second hard drive, will you?

Hammer and scissors, the Bootstrap toolbox

And so if you wanna call the bootstrap within your index.html file and the structure is as mentioned above your code will look like this:

<html>
	<head>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<script src="bootstrap/js/bootstrap.min.js"></script>

		<title>
			my project
		</title>
	</head>
	<body>	
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-3">text</div>
				<div class="col-md-3">text</div>
				<div class="col-md-3">text</div>
				<div class="col-md-3">text</div>
			</div>
			<div class="row">
				<div class="col-md-3">text</div>
				<div class="col-md-3">text</div>
				<div class="col-md-3">text</div>
				<div class="col-md-3">text</div>
			</div>
		</div>
	</body>
</html>

See the link and script tags.

Yep I forgot .. download the Bootstrap from here https://v4-alpha.getbootstrap.com/getting-started/download/ (as you see we use the future version.. how cool is that?)

Why do we need Bootstrap?
Bootstrap help us to write cross browser consistent code without need of knowing what we are really doing (coding) .. which is what we want right? Get everything cheap and sell it costly. Everything is made already, we just copy&paste it. That is truth, but the trick is to know what to copy and where and how to paste it :)

As like in house building nobody cleans window before they are mounted to the walls. And so we will make the walls first and then put the windows on and sofa in and the salat to the fridge.

The walls the scaffold is widely consistent across all the web solutions.
What you have to learn now is the grid structure well documented on the Bootstrap website it self.
The grid is divided by ever flexible number 12. The grid it self can be nested as well.

It is time for study!. Study the Bootstrap your own. Create and recreate your project and keep the grid like structure in mind. No matter the shape all can be sliced into blocks within a grid.

See you in class.

all dandy posts