Bootstrap

Lift O!  Level 1, Section 1

Lift O!  Level 1, Section 1

So You Want To Build a Website… An attractive, functioning website requires basic knowledge of structure, style, and behavior.

HTML

Page Structure

CSS

Element Styling

 JavaScript

Page Behavior

Website Development Follows Some Typical Patterns Writing HTML, CSS, and JavaScript repeatedly will reveal just how much work a good website can require.

HTML

CSS  

JavaScript

Website Development Follows Some Typical Patterns Writing HTML, CSS, and JavaScript repeatedly will reveal just how much work a good website can require.

HTML

CSS  

JavaScript

Website Development Follows Some Typical Patterns Writing HTML, CSS, and JavaScript repeatedly will reveal just how much work a good website can require.

HTML

CSS  

JavaScript

Website Development Follows Some Typical Patterns Writing HTML, CSS, and JavaScript repeatedly will reveal just how much work a good website can require.

HTML

CSS  

JavaScript

Website Development Follows Some Typical Patterns Writing HTML, CSS, and JavaScript repeatedly will reveal just how much work a good website can require.

HTML

CSS  

JavaScript

Frameworks Can Make Our Site-Building Life Much Easier A framework is a downloadable library of tools that assist with adding style and functionality to your website.

HTML

CSS  

JavaScript

Bootstrap

 IHI H I BHI JA BL  FJAN HINAC

What Will Bootstrap Do For Us? Bootstrap lets us skip writing CSS and JavaScript when starting out. We focus instead on HTML.

HTML

CSS  

JavaScript

Bootstrap

What Will Bootstrap Do For Us? Bootstrap lets us skip writing CSS and JavaScript when starting out. We focus instead on HTML.

HTML

Bootstrap.css

Bootstrap.js

Bootstrap

QAA JA HB  HIJIJ C IC AI IHI

What to Expect From Bootstrap Let’s take a look at some great examples of the magic that Bootstrap can make very quickly.

What to Expect From Bootstrap Here’s the goal for our end product at the end of this course.

How To Get A Hold of Bootstrap There are three ways to get access to the framework, and we’ll focus on one in particular.

http://go.codeschool.com/bootstrap-download

, NJ AN CL .HH  HH

What Does The Framework Consist Of? Let’s take a quick at Bootstrap’s !le structure to get a broad awareness of what we’re using.

dist

What Does The Framework Consist Of? Let’s take a quick at Bootstrap’s !le structure to get a broad awareness of what we’re using.

dist css fonts  js

What Does The Framework Consist Of? Let’s take a quick at Bootstrap’s !le structure to get a broad awareness of what we’re using.

dist css bootstrap-theme.css bootstrap-theme.css.map bootstrap-theme.min.css bootstrap.css bootstrap.css.map bootstrap.min.css

fonts  js

H H I BC IHIHH A LQAA JH C J . H ,I LAA H JH B CC I LI  JC    BC AH  JH LC I HI H A JI  J ABCI LQAA JH I CCBC CH

What Does The Framework Consist Of? Let’s take a quick at Bootstrap’s !le structure to get a broad awareness of what we’re using.

dist css fonts  js

What Does The Framework Consist Of? Let’s take a quick at Bootstrap’s !le structure to get a broad awareness of what we’re using.

dist css fonts glyphicons-hal"ings-regular.eot glyphicons-hal"ings-regular.svg glyphicons-hal"ings-regular.ttf  glyphicons-hal"ings-regular.wo# 

 js

 IHI H  CI II C  JH H CH QAA I I IH IIN HC

What Does The Framework Consist Of? Let’s take a quick at Bootstrap’s !le structure to get a broad awareness of what we’re using.

dist css fonts  js

What Does The Frame Framework work Consist Of? Let’s take a quick at Bootstrap’ Bootstrap’ss !le structure to get a broad awareness of what we’r we’re e using.

dist css fonts  js bootstrap.js bootstrap.min.js npm.js

 C I CL  JC  -I!  IHI  IHI  LAA LA A B I HN H N C JH JH 

What Does The Frame Framework work Consist Of? Let’s take a quick at Bootstrap’ Bootstrap’ss !le structure to get a broad awareness of what we’r we’re e using.

dist css fonts  js

Getting Started: Creating a Basic HTML File To get up and running with Bootstrap, we’ll need to establish our site’s home page with some HTML. > >Blasting Off With Bootstrap

HI LQAA I HIJ LI  INP

PIC  H  I LI   IIA

Getting Started: Creating a Basic HTML File To get up and running with Bootstrap, we’ll need to establish our site’s home page with some HTML. Blasting Off With Bootstrap Blasting Off With Bootstrap The Fastest Way to Space Book Today!

Go Anywhere

RocketBus®



MI LQAA B  N C HB CICA CH

Getting Started: Creating a Basic HTML File To get up and running with Bootstrap, we’ll need to establish our site’s home page with some HTML. Blasting Off With Bootstrap

L LQAA  HB H I H J CH

Blasting Off With Bootstrap The Fastest Way to Space Make your way to space in the comfort of your own rocket, elevator or transporter. Book Today! Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone. Go Anywhere If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks! RocketBus® For cheapest fares, catch the next RocketBus® to the stars. Cheaper on your wallet, and easiest way to make friends.

Getting Started: Creating a Basic HTML File To get up and running with Bootstrap, we’ll need to establish our site’s home page with some HTML. Blasting Off With Bootstrap Blasting Off With Bootstrap The Fastest Way to Space



Book Today! Go Anywhere RocketBus®

Getting Started: Creating a Basic HTML File To get up and running with Bootstrap, we’ll need to establish our site’s home page with some HTML. Blasting Off With Bootstrap Blasting Off With Bootstrap The Fastest Way to Space Book Today!

...



Go Anywhere

...



RocketBus®



...



...



Getting Started: Creating a Basic HTML File To get up and running with Bootstrap, we’ll need to establish our site’s home page with some HTML. Blasting Off With Bootstrap Blasting Off With Bootstrap The Fastest Way to Space

...



Take the Tour Book Tickets Now

Book Today!

...



Go Anywhere

...



RocketBus®

...



 CH J CICI LQAA   JA JIICH   JH I C LI JC J  C IH 

Viewing Our Page Before Using Bootstrap Here’s a view of our basic HTML without any of the magic of Bootstrap.

Adding the Bootstrap Framework To get Bootstrap acting on our content, we’ll need to import a few extra items on our page. Blasting Off With Bootstrap ...

QAA HI C I CAJ I IHI AN N JHC  AI I



dist/index.html

Adding the Bootstrap Framework To get Bootstrap acting on our content, we’ll need to import a few extra items on our page. Blasting Off With Bootstrap ...

QAA AH CAJ ?2JN JH IHI CH I I   JC  A ICH



dist/index.html

Adding the Bootstrap Framework To get Bootstrap acting on our content, we’ll need to import a few extra items on our page. Blasting Off With Bootstrap ...

ICAAN QH I  IHI -I ANP LQAA MA IH AI



dist/index.html

The E! ects of Adding Bootstrap Let’s check out what Bootstrap will do to our existing HTML page.

QH J CIA MHIC 

The E! ects of Adding Bootstrap Let’s check out what Bootstrap will do to our existing HTML page.

  ?JHI  CI C C HB CIAN HINA JIICH QH HIAA  JC L C !

Our Visual Goal For This Level We’ll be using classes to improve our HTML visually, but without writing a single line of CSS.

QAA I J CICI CI ILC    H BCH JHC IHIQH .container AHH

The container Class Bootstrap’s container class will responsively add margins, center, and wrap our content. index.html Blasting Off With Bootstrap The Fastest Way to Space Take the Tour Book Tickets Now Book Today! ... Go Anywhere ... RocketBus® ...

QH AA  J HA  CICI LIC J N I

The container Class Bootstrap’s container class will responsively add margins, center, and wrap our content. index.html

C  container AHH IH  M LI ABCI II HCH I I JCI H  I LH LCL .

Blasting Off With Bootstrap The Fastest Way to Space

Take the Tour Book Tickets Now Book Today! ... Go Anywhere ... RocketBus® ...

The container Class Bootstrap’s container class will responsively add margins, center, and wrap our content.

H LAA I J I CI  LI HBI C   L C  IAI  C!

The container Class Bootstrap’s container class will responsively add margins, center, and wrap our content.

The container-fluid Class Bootstrap’s container-fluid class allows for stretching if it is desired on larger screens. index.html > Blasting Blasting Off With Bootstrap Bootstrap The The Fastest Way to Space Space >Take the Tour >Book Tickets Now Book Book Today! Today! ... ... Go Go Anywhere Anywhere ... ... RocketBus® RocketBus® ... ...

The container-fluid Class Bootstrap’s container-fluid class allows for stretching if it is desired on larger screens. index.html > Blasting Blasting Off With Bootstrap Bootstrap The The Fastest Way to Space Space >Take the Tour >Book Tickets Now Book Book Today! Today! ... ... Go Go Anywhere Anywhere ... ... RocketBus® RocketBus® ... ...

L J IJH LAA I  CIC II LAA HII I CI  IIN HINAH C JHJA  C CAN C AHH!

The container-fluid Class Bootstrap’s container-fluid class allows for stretching if it is desired on larger screens.

Lift O!  Level 1, Section 1

Thinking In Grids Level 2, Section 1

Our Site Wrapped in a .container So far we’ve learned how a .container class helps structure our content.

8 FO F T OFH 5 A   I C OE L0

Site Structure: Rows Rows are horizontal groupings of data

8 FO E ,  C AO

Site Structure: Columns Columns are vertical groupings of data

8 FO E  LOH HI FEO 

Multiple Columns Bootstrap gives us 12 columns to work with if we need them

   HH  I HI U F HH

Our Header in a Grid Elements can span all columns in our grid

FOH L  HI

Taking Up Half the Page With 12 columns, you can use 6 to take up half the page

A  6I ?OE L HI

Getting Even Smaller You probably won’t ever need 12 individual columns, but 4 is common enough

4O E L  HI

Wire framing our Grid Design Wire framing is a great way to visualize and plan out our page.

12 Columns

2HI AA L O  L 

6 Columns

4 Columns

6 Columns

4 Columns

4 Columns

Bootstrap Medium Screen Grid Design Bootstrap uses .col-md-*  classes for denoting the number of columns

class='col-md-12'

class='col-md-6'

class='col-md-6'

2HI OFHH AA L O  

class='col-md-4'

class='col-md-4'

class='col-md-4'

Adding Grids to Our HTML Here’s part of our content from level one that we’ll convert to grids index.html

Blasting Off With Bootstrap The Fastest Way to Space Make your way to space... Take the Tour Book Tickets Now ...

Using 12 Columns for our Title Use a class of .col-md-12 to wrap areas of your page you want to take up the entire width. index.html

Blasting Off With Bootstrap ... 8 EA O L HH  HI

Lead Grid Using 6 Columns Determine the number of columns you want, then pick the correct Bootstrap class for it. index.html

...

8O E HA OSO A ?OO FHH O L - HI

The Fastest Way to Space Make your way to space... Take the Tour Book Tickets Now ... 8 FI FHH O L OE - HI

Lead Grid Using .col-md-6 Use a class of .col-md-6 to contain an element to 6 columns, or half the page. index.html

... The Fastest Way to Space E HI Make your way to space... ... LL FA ?T FA

Feature Grid Using 4 Columns Using one-third of the page, or 4 columns. 4 columns * 3 elements = 12 columns total. index.html

... Book Today! Even if you're traveling… Go Anywhere If you need to get to space today... RocketBus® For cheapest fares, catch the…

OU I E CO O L  HI

Feature Grid Using .col-md-4 The next featured item will be immediately to the right. index.html

3E CO FHH O L  HI

...   Book Today! Even if you're traveling…   Go Anywhere If you need to get to space today…   RocketBus® For cheapest fares, catch the…  

Column Preview Our page is starting to take shape!

Grid Refactoring It’s di!cult to know when a new row starts without doing math. index.html ... ... ... ... ... ...

U LF ?T HI ?O EO ?O ?T 0

Adding Rows using .row The number of columns in each row adds up to 12.

F  I  A  HO F O A

Row Preview Our page looks almost the same, but it’s actually using 15px more of the screen with rows

*  C OO

Adding too Many Columns What should happen if you include more than 12 columns in a row?

index.html

EO HA OEF H > > > > >

HF F  ?0

Multiple Rows Our last featured item doesn’t have enough space and moves onto its own row

9I OEF OEO ELLA ?C  OOA F

Designing With Grids A popular proportion for sites with grids is 9 columns + 3 columns

/&* F A C ?H FOE FA?

12 Columns

9 Columns

3 Columns

Letting Columns Breathe with Blanks Adding a bit of space between columns can help them appear less cluttered

12 Columns

5 HA  O  HI C LAAF0 8 Columns

1

3 Columns

Empty Columns Don’t create empty columns. Bootstrap has a better way! index.html

 2HA O  ILOT HI ?O OE F  ?OO T

Empty Columns Using an O! set The .col-md-offset-* class is used to add left padding for a given number of columns. index.html

EF  HA ?  



1AA  HI C LAAF O OE HCO C OE FA?

col-md-offset-*

Blog Example An example blog from the Bootstrap website using this technique

. HI C OO

 HI CCO

* HI C OE FA?

Thinking In Grids Level 2, Section 1

Responsive Gridding Level 2, Section 2

Our Website So Far It looks great on our desktop’s screen, but if we view it on a phone, our columns are gone!

I B OL ?OHI L

Our Goal Mobile Layout 0E E EH EI HL LONEI 8E E?I HI UL EI N H NSEI  I  I

 ON F 8S I EN I L

Medium Screen Size A good starting point for your design. Looks good on laptops and desktops. Grid Size

Medium

Grid Class

.col-md-*

O! set Class

.col-md-offset-*

Screen Size

992px+

Designing for Smaller Screens The “small” grid size is used for smaller resolutions, often tablets or compact laptop screens.

Grid Size

Grid Class

O! set Class

Screen Size

Small

.col-sm-*

.col-sm-offset-*

768px+

Medium

.col-md-*

.col-md-offset-*

992px+

Our Current Features Our columns only work with a resolution of 992px and up. index.html

Book Today!... Go Anywhere... RocketBus®...

.? BNOL  O I  EBBLIN L I HL ?LI

Adding Grids for Smaller Resolutions Our featured items will have the same grid sizes in small and medium mode. index.html

Book Today!... Go Anywhere... RocketBus®...

8 E LF EI R I EL

Feature Columns in Medium Sized Screens

EEI N  EI VHEOHW H

NOL L NE IIEI  ?OHI ?

Feature Columns in Small Sized Screens

EEI NE  I  NN 4OL BNOL ? I  ?OHI EI VHW H I P

Extra Small Mode N ON  R, 0LU OL I PE ? VRNL HW H

UP N OL ?OHI EI! 2NU F EIN  N O  EN HL ?

Extra Small Browser Sizes Great for specifying the minimum width for elements. Also the layout used on many phones.

O! set set Class

Grid Size

Grid Class

Screen Size

Extra Small

.col-xs-*

.col-xs-offset-*

0px+

Small

.col-sm-*

.col-sm-offset-*

768px+

Medium

.col-md-*

.col-md-offset-*

992px+

Adding Grids for Extra Small Screens We could use the extra small grids, but there’s a better way. index.html

Book Today!... Go Anywhere... RocketBus®...

2F  EN ?LH  ?I  NNL!

Reviving our Goal Layout We can plan out how many columns each of our elements will use prior to jumping into the code.

VF 8SW E O  ?OHI 4OL NL BNOL E ? O  ?OHI

1NU P I BBN I N BN I LEN

Features in Extra Small Screens index.html

VF 8SW E NF O   ?OHI

Book Today! Go Anywhere RocketBus®

8 NL N BNOL E NF O  ?OHI I   VF 8SW

Extra Small Feature Layout Using our new extra small classes, our features section is taking shape.

N NE F EF I  I

 NE I N  I BBN N VF 8SW

Centering Features for Extra Small Screens This will center this column giving it a column of spacing on each side

9 N HE  ?OHI Book Today! Go Anywhere RocketBus®

8 LL B N ? IUN HNNL

“Book Today” On Extra Small Screens “Go Anywhere” started on a new row because it needed 6 columns and only 1 was available.

VF 8SW NI ON I RNL H ?LI

Overriding O! sets for Small Screens

4OL .col-xs-offset-1 E EI E N VHW I VHEOHW LONEI  

7EI? UL OEI  ?OHI EI N BELN LETIN ? N N PLBEI HIN E HP N N IRN L

Removing the O! set for Small Screens index.html

Book Today! Go Anywhere