Twitter Bootstrap in a day

Introduction

note: work in progress

So you have to code/make a website in 30 minutes for someone that scales on laptops, mobiles and tablets. What do you do? :

1. Code your own front-end library overnight
2. Use Twitter Bootstrap

The answer is you use Twitter Bootstrap as you only have 30 minutes during lunch break. Because why do you want to waste your lunch break coding a front-end framework :P

Responsive design

Responsive design means making the front-end of a webpage/site scale up and down according to the height and width of the screen that it's being viewed on. Ethan Marcotte in A List Apart, described responsive design first.

To make a webpage responsive, we use the meta tag:

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

This basically means that you're telling the browser that the width of the viewport [aka the size of your screen on the device that you're using] should have an initial zoom in scale of 1. Device-width is the width of the screen in CSS pixels at a scale of 100%.

Another way to make elements responsive is to use percents instead of fixed widths and heights. For example 100%, 50% etc. This will scale down the element to a 100% or 50% of the available screen width and height. For example:

img{
width: 100%;
height: auto;
}

Enter Twitter Bootstrap v.4

Since you only have 30 minutes during your lunch break it would be counter-productive to spend time on making each and every element on your webpage responsive. Which mean you need lots of classes and IDs attached to your elements So let's learn about the most important things about bootstrap..

The grid system

So you want stuff to scale up and down depending on the dimensions of the screen's width, how do you go about it? A grid system.

Bootstrap's grid system is as such:

(image taken from W3 schools )

So the above image means that a page can have 12 'div/span' columns across a page, and any number of rows. Why is this so? Well because you can keep scrolling down a page, but can't physically increase the width of the device's screen (example you can't make your iphone wider).

Ok so what is a row then? Well..

And as you can see columns are within rows.

Putting it all together: Part 1

How do you correlate this to your HTML and actually start using Twitter Bootstrap then?

Till now you must be used to making custom classes and IDs for your divs which you then styled and positioned using CSS.

To use Bootstrap you must use their custom classes which are based off the grid system above (12 columns in a row).

So basically your element with class of "center-this-heading-now" becomes this:

< div class=" row justify-center">Hello</div

Putting it all together: Part 2

CONTAINERS CONTAINERS CONTAINERS

You don't want all your stuff floating around in the

of your document. It messes up with everyone's head.

Your elements (any headings, p's, images etc) must be within containers.

So how do you make a container? You might be used to making your own container divs like this:

<div class="main-div">
<h4>My life story</h4>
</div>

In bootstrap you have to use the class="container" because remember:
To use Bootstrap you must use their custom classes which are based off the grid system above (12 columns in a row).

So this is how it is in Bootstrap:

<div class="container">
<h4>My life story</h4>
</div>

And this is what you end up with:

Your "main-div" can also be a container which is the width of the whole screen with a class called "container-fluid":

Putting your elements in containers makes it easier to position them and

Putting it all together: Part 3

Containers contain rows. In order to use Bootstrap's grid system you must use their system their way. So inside a container you will have a div with a class = "row". This is akin to your own HTML where you might have had something like so:

<div class="main-div">
  <div class="heading-div">
<h4>My life story</h4>
  </div>
</div>

This now becomes:

<div class="container">
  <div class="row">
<h4>My life story</h4>
  </div>
</div>

A row spans the width of the whole container.

Putting it all together: Part 4

Remember each row has 12 columns and this division of a row into columns, and placing a row into a container is what makes your elements responsive.

The above code can be refactored as such:

<div class="container">
  <div class="row">
<div class="col-sm-12">
<h4>My life story</h4>
   </div>
  </div>
</div>

In the codepen below, there is a 'sm' (small) 'div/span' that spans 12 columns which is the width of the entire row in that container.

As I mentioned you can have 12 columns inside a row, so let's say we want to have two divs side by side like so:

<div class="container">
  <div class="row">
<div class="col-sm-6">
<h4>My life story</h4>
   </div>
<div class="col-sm-6">
<h4>My life story again</h4>
   </div>
  </div>
</div>

Note The grid system has 5 classes:

Class	Screen size
.col-xs	Xtra small for screens less than 576px
.col-sm	Small for screens >= 576px
.col-md	Medium for screens >= 768px
.col-lg	Large for screens >= 992px
.col-xl	XLarge for screens >= 1200px

Since each class will scale upwards, you need only specify the smaller of the 2 classes. For example .col-sm-6 will scale up to .col-md-6

Layouts with Bootstrap

Let's go over a few layouts to understand this a bit more..

1. Laying out 5 columns of equal widths

For divs (i.e. columns) of equal width simply use ".col-sm" without any numbe. Bootstrap will automatically divide the columns across the row with equal width

Columns inside columns

Yes you can divide a column into columns. For example the row below has a col-sm-6 and 2 col-sm-3's which totals to 12 in total.

The col-sm-6 can have nested columns:

1. Clearfix class

Using float property in CSS is inadvisable, too many headaches.If you do happen to use float, then using the clearfix class on the parent element. What "clearfix" does is to basically "fix" any distruptions bought about by float by forcing containers below the elements that have been floated to render beneath them.

1. Offset

By adding offset to a column class you can move the column to the right by a specific number of columns.

For example

<div class="col-md-6 col-sm-offset-3">

</div>

This will cause the col-md-6 element to have 3 columns before it on the left side (therefore, increasing the left margin by 3 columns) on medium devices.

Media queries

You can change your layout at certain media breakpoints like so

@media(min-width:576px){

}
@media(min-width:768px){


}
@media(min-width:992px){

}
@media(min-width:1200px){

}

According to Bootstrap's documentation, extra small devices (portrait phones, less than 576px) do not require any media query since this is the default in Bootstrap.

On to more

Bootstrap is on it's 4th version which means, they've added new stuff.