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? :
- Code your own front-end library overnight
- 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..
- 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:
- 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.
- 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.
Top comments (0)