Lazy Web Basics 4: Faking Web Design with Bootstrap

all right we have learned some HTML
we've learned some CSS and we've learned
that we probably never want to actually
have to deal with styling the page
because it is impossible because it was
complicated because we have more
important things to do and spend our
lives making a nice-looking web page
maybe so luckily for those people who
are too busy or too lazy to get really
good at design and CSS and web stuff
there is something called bootstrap so
bootstrap is what's called a CSS
framework CSS framework now what a
framework does is basically all of your
heavy lifting for you it's done all of
the stuff that you need all of the stuff
that's typical to style a page to make
it look nice so you don't have to think
you just use bootstrap and magically all
of your web pages look kind of the same
they look like this
but they work well they're responsive so
they'll look nice on mobile things like
that so we are going to learn bootstrap
or we're going to learn a little bit of
bootstrap and you'll run from there in
order to build let's say a portfolio or
a story piece or anything like that so
if we look at our web page that we have
right now it's just a pretty boring
normal web page it has tags on here
there haven't has not been any styling
just h1 h3 couple P tags and a button
let's add another button too they're
beautiful so in order to add a bootstrap
to the page bootstrap is like we said a
CSS framework so you would think if you
want to add more CSS to the page we're
going to add a style block and then
we're going to type a bunch of bootstrap
stuff inside that's actually not what
we're going to do when I said there were
three ways to add CSS to a page and this
was the second best way bootstrap is
going to use the
first best way which is have an external
file that we kind of linked off to so
I'm gonna scroll down on the bootstrap
page and then this thing that you can't
read I'm gonna copy it and I'm gonna
paste it and then I'm gonna clean it up
a little bit so that it looks more
normal okay so remember before when I
said that the link tag isn't a link tag
it's an a tag whenever we want to make a
link here I'll add one in here so what
this tag is is it says it's a link tag
but what it really means is hey web
browser go out into the world and
download this file
it's a stylesheet it's CSS code and
apply that to the page if we take a look
at this actual file it looks like this
which you can't read but you can kind of
read right like this is something that
has the class of call sm8 and then it
starts from this curly brace and goes to
that curly brace so we can kind of read
this if we have to but it's painful the
reason why it's so painful as it's been
minified if you see the dot min in the
URL one of the things that people don't
like is having to download a bunch of
extra space and a bunch of extra you
know people hitting enter in between
lines so before they put things like CSS
up on the Internet they will minify it
to make it smaller it's harder to read
it's faster to download it's not
honestly really faster to download but
it's okay it's faster to download okay
so this is all of the CSS that is going
to be applied to the page which is a
decent chunk of CSS so I'm gonna save
here I'm gonna go back to our file and
I'm gonna refresh so BAM there we go
those buttons automatically look a
little bit fancier the text size changes
the text font changes and it kind of
kind of comes together
but this is not the real magic of
bootstrap this gives us a little bit of
the way the magic part of bootstrap
starts when we add in classes to
different elements so we have this
button if we want to make a fancier kind
of button let's go to documentation and
we'll search for buttons
hey components buttons great look at all
these fun buttons this is so exciting
oh and look at how they figure out what
the button should look like they use
classes so if we want to make our button
this bright blue one we give it two
classes the class of BTN in the class of
BTN primary so let's do that actually
let's do the danger one which is button
danger right just because it looks more
fun so class equals BTN BTN danger save
refresh but beautiful so much fun but
why is this button square and this
button round so the reason is there's
usually a base class that you need to
apply to something and in this case it's
BTN so to get a default button class BTN
looks terrible
what kind of button do we want to make
that be light dark let's make it button
light and now there we go
but warning so you can spend forever
fooling around with this stuff and now I
like late better let's be honest so
there are a billion different things
that you can add carousels which are
those things where images slide by never
use them they're terrible a Jumbotron
you can have like a really big text
call-out at the top of your page and you
just have to copy their code so you
scroll through here seeing things that
you want and then you just
and that's pretty much how it works but
the part that ends up being the most
useful about bootstrap is the layout
stuff that they will do for the page so
when you are working on a web page there
is something called let's see columns
the web pages in theory every web page
is built out of columns there we go so
when you have a web page all of the
content is broken up into twelve columns
called the twelve column grid and when
you want to put things into different
columns maybe you have a small sidebar
on the side and then a larger content
area on the right you just say take
three of those columns and then draw me
something here and three of those
columns and draw me something here so
what we're going to do is we are going
to take what we've made here and we're
going to maybe throw them into some
different columns to kind of get that
idea of a portfolio or maybe you have
five columns of samples about what your
work looks like and then people can
click through to other pages so here's
what we're going to do the first thing
we're going to do is we are going to use
a div tag and we're gonna put it around
everything then I'm gonna indent even
though you don't have to it will end up
looking your code will look nicer and be
more readable if you do so I'm gonna
save this and refresh and what does the
div tag do absolutely nothing absolutely
nothing why does the div tag not do
anything because it's not really a tag
that is supposed to do anything it just
stands for division so just like a
section of the page so imagine this is a
section tag it's kind of just a default
tag you use when there's not anything
that you could really use
so what's going to happen is we are
going to say class equals container save
refresh this automatically adds a little
bit of padding on the left and right
hand side of our page why does it do
that where does that come from it comes
from bootstrap so bootstrap just has a
list of a million one different classes
how did I know to use container and
because I've read the documentation a
hundred years ago so I kind of know how
its set up so when you're building a
page with bootstrap it is built on rows
let's see if we can find the the grid
grid system blah blah blah so this is a
row and then it has three columns in it
and you can see here div class equals
container inside of the that you have a
div class equals row so let's add that
in there div class equals row and then
we have div class equals call SM so the
above example creates three equal width
columns on small medium large and
extra-large devices using our predefined
grid classes
great that's pretty exciting we only
want one column right now so div class
equals call SM we could also just do
call but we're not going to talk about
why right now so we save that we refresh
and it looks exactly the same absolutely
nothing has changed that's because we
only have one column so if we wanted to
add another column I could do this let's
say we're going to add a sidebar
so this is going to be our first column
this is going to be our second column
they're all they're both inside of the
same row
I'm gonna save refresh and there I go
look at that it's beautiful it's not
beautiful it's terrible why is this
terrible well a side bar is usually
smaller than the rest of the content so
let's make it a little bit smaller the
way that we make it smaller is we say
how many of those twelve columns we want
it to take up because right now it's six
for our side bar and six for our main
content so in order to change that we're
gonna do call sm-3 call sm9 we just need
these two numbers to add up to 12
so the first three columns are gonna be
dedicated to this guy here and the
second three columns or the three
columns the next nine columns are gonna
be dedicated to this guy here very fresh
and there we go looks a little bit nicer
but this is probably not what we want to
do I would say what we're looking for is
we want to have a big header up top that
says hey I'm a cool person and then we
do one story with maybe an image over
here another story another story another
story so we want this main header to go
up before these two columns so what we
want is another row right now this is
where our first row begins so let's just
add another row right before it put an
h1 in there save refresh all right that
looks right but there's one thing we
forgot to do and that is add in our
column every time you use a row you
should have at least one column
I'm going to change this to welcome to
my amazing portfolio save refresh and
there we go maybe we want to add a
little bit more text under here blah
blah get a little spacing in there yeah
that's fine it'll be okay now
this sidebar here I want to add a
picture what's the picture gonna be out
the cat always a cat
I have a picture meow
jpg we're gonna throw me out jpg in
there so how do you make an image IMG
tag IMG SRC equals meow JPEG save
refresh oh it's way too big
how do I make it fluid I don't know the
answer to that bootstrap fluid image we
want it to take up the whole size that
it can so I click through and it says
images and bootstrap are made responsive
with dot IMG fluid now what that means
is it will always rink or grow to the
size of the container that it is in to
the size of the column that it is in so
when it's going out of the side of this
column here oh no we're gonna change it
to IMG fluid now when it says IMG fluid
you might think all right I'm gonna cut
and paste this class equals that save it
refresh doesn't work the reason why it
doesn't work is because of this period
this period is not part of the class
name the name of the class is IMG fluid
IMG fluid this dot is the CSS way of
talking about classes or the shorthand
way of talking about classes so you can
see down here class equals image fluid
that's their nice example so now that
I've gotten rid of that period I can
save it
refresh and there we go well
good so if I clean this up a little bit
I don't need a main header here here is
one of my articles save refresh now when
I if I'm like this is an article about
MERS I don't want to just have a normal
boring link here I want a cool button
that is also a link to somewhere else
what if I told you a href equals we'll
send it to Google because I don't have
anywhere else to send it here is my
project right that's what we could do
I'll put that inside of a P tag here is
my project but I want that to look like
a button so it turns out that if I take
this a and then I add class equals BTN
BTN danger so add another attribute to
it for the class suddenly it looks
exactly like a button so when you're
using bootstrap you can usually apply
these classes to different things to get
kind of the same element because it
doesn't matter that this is a button tag
here what matters is the fact that it
has BTN BTN danger BTN BTN danger
classes are the same so they end up
looking the same save refresh beautiful
so in theory all I need to do to build a
somewhat decent looking website is copy
and paste
let's see where does this row begin and
end this is the container so this is the
row copy paste paste paste refresh and
there we go we got a nice bunch of
articles all in a row and it's somewhat
halfway kind of respectable website now
if I wanted to it to look a little bit
fancier if I wanted other things to go
on here I could poke around on the
bootstrap web
I could go under components and just
kind of scroll around so we'll see
things like this which is an alert box
which looks kind of fun I can add an
alert to the top of my page and I could
say what's the I'll put it inside of
this column and my alert will say
currently looking for a job in starting
summer 2018 contact me at JPS no js'
four or five seven one at Columbia edu
and then everyone want to hire me
because I'll have a nice thing up at the
top of the page if I want to make this
an actual link the link will be a href
equals mail to js4 five seven one at
Columbia dot edu and you say what that's
not a link and I say it is and you say
why and I say it's just the rules that's
just how it works what else can we find
that's kind of fun on here length color
who cares
we could do a larger alert like that
some of these things you need JavaScript
to use we haven't talked about that yet
but we will
buttons cards carousels if we want a
bunch of images dropdowns you can have
very nice-looking forms granted we're
not creating like a web product so we
probably don't need them generally
speaking you're just going to use rows
columns images buttons and then as time
goes on we'll add more and more and more
to that so if we look at the
documentation when they say they have a
starter template here so this is the
starter template for bootstrap and this
will just give you basically an empty
page this is a lot more complicated than
what we started off with we just started
off with a few h1 MHT
and things like this that's because
we've been doing HTML wrong since the
very very beginning or not wrong but
just not the proper way so this would be
the proper way to do it where you have a
head section you have a body section the
body section is for things that the user
will see and the head section is for
stuff that the browser will read so take
a look at this right now the title of
this page when we close all these the
title of this page is introduction -
bootstrap the title of our page up here
is bootstrap dot HTML how do we change
that well we use something called the
title tag and the title tag goes inside
of the head tag so let's steal some of
this code apply it to our page and
become a little bit more proper so we're
gonna go to the top and the first thing
we're gonna steal is doctype HTML so
what this means is hey browser we are
going to be using HTML 5 there are other
kinds of HTML but this one is
specifically HTML 5 what's the
difference there's not really that much
of a difference you'll be fine
just use it then we say HTML lang evils
en you can change your language to be
whatever it could be as long as you know
what the two character code abbreviation
is this tag means we are about to create
some HTML which seems kind of silly
because we just said hey we're using
HTML 5 and obviously we're using HTML
because we're using all of these angle
brackets but I don't know I didn't make
it and then we're gonna throw in the
head tag so the head tag is stuff that
is informative to the browser and not
things that get displayed to the user so
this code right here is as we talked
about before saying hey browser go
download this file
this CSS file and apply it to the page
it'll go grab that file it'll apply it
to the page even though the result of
that is something that is shown to the
user by way of styling the page this is
really just stuff that belongs to the
browser not the user so we're gonna keep
this in the head when we get down here
this all becomes things that the user
should see they should see this
container with rows and columns and text
inside so we're going to end the head
section right here
and start the body section right here so
you do the head things just for the
browser then the body things that are
for the user so I'm going to indent a
little bit more and then just before the
end I'm going to close the body tag and
then close the HTML tag just like they
did here close the body tag close the
HTML tag in their code they also added a
bit of JavaScript near the end I'm just
gonna ignore that right now that's fine
scroll back up let's copy a few of their
tags copy these two here so this tag
here means hey even though we're using
the English language even though this is
an English language page we're going to
be using we're gonna reserve the right
to use characters from any language so
we could put Chinese or Japanese or
Korean or Russian or whatever on here
and it would render correctly this line
here basically says hey display the page
correctly when it's on mobile and things
like that this one is kind of specific
to the way bootstrap is set up save
refresh nothing broke everything looks
the same now what we want to add is the
title tag right here so the title tag
you would think a title tag is like an
h1 or h2 or h3 and then it's a big
headline but it's not
the title tag goes in the head because
the head is stuff that's just for the
browser and when you use the title tag
when you use the title tag what it's
going to do is update the title that
shows up here and shows up in Google
searches so it's not something that
displays on the content of the page but
it's one of the most important parts of
the site if you want to start to you
know publish content on Facebook or have
things automatically populate on Twitter
things like that you end up adding a lot
more content to the head tag but right
now I think we have a pretty good start
so I am going to link off to a few
different bootstrap templates that I've
built and you can kind of pick and
choose the different pieces to build a
site and additionally if there are other
things that you're interested in just
search around on the documentation make
sure you're using bootstrap 4.0 there
are previous versions of bootstrap that
you will see all over the Internet you
are specifically interested in 4.0 and
now you're an expert you know HTML you
know CSS you can make beautiful
bootstrap pages and pretend to be a web
developer so I think we're all set
oh you're not all set you don't know
JavaScript but guess what you don't need
to know JavaScript yet so HTML CSS CSS
framework we're good to go for a decent
amount of time so good luck