Setting up bootstrap Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part two a bootstrap tutorial in
this video we'll discuss how to download
set up and create our first bootstrap
web page to get started with bootstrap
the first step is to download bootstrap
to download bootstrap navigate to get
bootstrap dot-com on this website you
can also find all the documentation that
is required to get started with
bootstrap I'm going to click this
download bootstrap button notice there
are three variations that are available
for the download we can either download
the compiled and minified version or the
source code or the SAS version I've
already downloaded the compiled and
minified version with the download what
you get is a single zip folder I'm going
to right click on this extract the
contents now let's drill down into the
folder and see what we have got notice
we've got three subfolders CSS fonts and
jeaious now let's examine the files that
we have got and the purpose of each of
them folder by folder first let's look
at the CSS folder notice we've got
bootstrap dot CSS this is the core CSS
for bootstrap which defines all the
styles for various controls and
components and then we have bootstrap
dot CSS dot map when debugging the
minified code the line numbers do not
refer to the original files the file
that has the dot map extension which is
also called as source map file fixes
this problem by allowing the web
debuggers to refer to the original
context from where the code was
generated this file is useful during
development and then we have bootstrap
dot min dot CSS this is the compressed
version meaning all the white spaces
line breaks and any of the extra
characters have been removed as a result
the size of the minified file is smaller
than the non minified file minified
version is usually used on a production
server for efficient download whereas
the non minified version is used in
development environment as it is more
readable and easy to debug if there are
issues now let's see how the minified
and non minified files look like so I'm
going to open them Bedford
first let's open the non minified file
let's navigate over CSS folder and first
let's open the non minified version
notice we've got in our white spaces
line breaks everything and this file is
readable this is very useful during
development because it's easy to debug
if there are issues now let's look at
the minified version so here we have our
minified version bootstrap admin dot CSS
notice with the minified version all the
white spaces and line breaks have been
stripped out as a result the size of the
file get reduced and it's obviously
going to be efficient on a production
server because it's going to you know
reduce the time it is required to
download the file because of its smaller
size and then we have bootstrap dot min
dot CSS dot math this is the source map
file for bootstrap Duffman dot CSS and
then we have bootstrap theme dot CSS as
the name suggests this is the theme for
bootstrap adding the core bootstrap dot
CSS is enough for bootstrap to work the
theme file is optional and is usually
used for a visually enhanced experience
for example if you want 3dfx gradients
shadows etc and then we have bootstrap
theme dot CSS dot map this is the source
map file for bootstrap theme dot CSS and
then we have bootstrap team dot min dot
CSS which is the minified version of
bootstrap team dot CSS and finally
bootstrap team dot min dot CSS dot map
which is the source map file for butcher
team dot min dot CSS now let's look at
the files in fonts folder notice within
fonts folder we've got five different
files these are the files from glyph
icons this five different files are just
different format of the glyph icons font
to support different
now let's look at the files in Jai's
folder these JavaScript files optional
these are required if you want to use
bootstrap widgets like picture carousel
drop-down menus collapsible accordion
etc one important thing to keep in mind
is that bootstrap JavaScript has a
dependency on jQuery so a reference to
jQuery must also exist on the page where
you want to use bootstrap bootstrap dot
Jas this is the non minified readable
version that is usually used during
development bootstrap duckman Rogers
minified version of bootstrap dodges
optimized for fast download this is the
version that is usually used in a
production environment and then finally
we have NPM Jas NPM is a file from no
chairs and is useful for NPM installing
bootstrap if you're new to node.js don't
worry this is not going to come in the
way to understand bootstrap for this
course I'm going to use Visual Studio
2013 as the editor but you can use any
editor of your choice now let's look at
the steps involved to create our first
web page with bootstrap let's slip to
Visual Studio here I have an empty
asp.net web application project the
first step is to add folder that
contains the three subfolders fauns CSS
nsj to the root directory of a web
project so I'm going to go to the folder
and I'm going to change the name of this
folder to bootstrap to keep things
simple and I'm going to copy this folder
and paste it within the root directory
of our web application project so that's
our first step and the next step is to
add an HTML file so I'm going to add an
HTML file and I'm going to name this
index dot HTML and now I'm going to go
back to our get bootstrap dot-com
website so on this page you also see a
link here which says basic template
click
on that link and notice here we have a
basic HTML template to get started with
bootstrap so I'm going to copy all this
HTML and paste it within our index dot
HTML now at the moment bootstrap will
not work and I will explain why so we
have our index dot HTML notice here we
have an h1 element which says hello
world so what I'm going to do is
navigate to our index dot HTML and see
how the web page looks like
now bootstrap is not in action and that
is because if you look at the links
right here look at this here we have a
link which is pointing to bootstrap dot
min dot CSS but it's looking for that
file within CSS folder in the root
directory of a web project but then you
know that CSS folder is actually present
in a different folder which is bootstrap
so we have to change that path to
bootstrap and let's do the same thing
for the JavaScript script tag that we
have here and notice here we are
referencing jQuery CD and Link as well
and now notice here we have viewport tag
so this viewport meta tag ensures proper
rendering and touch zooming on a mobile
device so now you know we have bootstrap
in action let's actually prove that so
I'm going to save the changes and I'm
going to reload this page look at what
happened to the font the font has
changed so now it's using bootstrap
defaults now I'm going to apply one of
the bootstrap CSS classes to this h1
element so I'm going to set the class
attribute and I'm going to set this to
text - primary let's save our changes
and let's reload the page look at that
you know the text primary CSS class is
applied to the h1 l
and let's change this to for example
text danger and see how it looks like
look at that now the color changes so so
we have wired up everything that is
required to use bootstrap with our web
application project thank you for
listening and have a great day