Richard's Bootstrap 3 (2018) Framework Page


Richard Ricardo's example page of creating responsive, mobile first webpages using Bootstrap (HTML, CSS and JS) framework.

Set up programming environment

Before you learn bootstrap framework, you MUST know html and css. If you have no html / css background, please learn them at this page.

  1. Go to getbootstrap.com.
  2. Click on Download Bootstrap twice "Compiled and minified CSS, JavaScript, and fonts..."
  3. Unzip the download, save it into your website folder.
  4. Download a template file from getbootstrap.com example page. OR download any example file below.
  5. Update the bootstrap links (links to mostly .css file) in the example, to match the folder names in your website folder.
  6. Please note that a small number of examples on this page only runs on Bootstrap 3. Bootstrap 4 came out when this page was built. Some examples may not run properly when you download the latest Bootstrap 4 version. That's why it is a good idead to download your own bootstrop software (version).

Resources

I used the following learning resources:

First file, Grid system

File Description
eg001.htm the bootstrap v3 first page, download it to finish setting up the environment

eg002.htm

eg002_style.css

w3schools.com notes on grid for Bootstrap 3

bootstrap grid system = 12 columns, nestable, number

rows MUST be wrapped within a .container or .container-fluid respectively for fixed-width and full-width.

  • col-xs- (for phones): <=768 px
    • auto container, auto col width, horizontal at all times
  • col-sm- (for tablets): >=768 px,
    • 750 px container, ∼62 px col
  • col-md- (for desktops): >=992 px
    • 970 px container, ∼81 px col
  • col-lg- (for larger desktops): >=1200 px
    • 1170 px container, , ∼97 px col

 

  • gutter (padding) width = 30 px (15 px on each side of a column)
  • max .container content width = 1170 px for BS3
  • max .container content width = 1140 px for BS4
  • col must sum to 12

media queries in Bootstrap allow you to move, show and hide content based on the viewport size.
Bootstrap 4 grid system Bootstrap 4 grid system is a bit different from Bootstrap 3 grid system.

eg017.htm

eg018.htm

bootstrap v4 beta template, first page

bootstrap v4 beta navigation template

eg003.htm

eg003_style.css

multiple device support

and

nested columns

eg004.htm

eg004_style.css

offsetting columns

  • Move columns to right using .col-md-offset-* classes. Increase left margin by * columns

change column ordering - push and pull

eg005.htm

similar to eg002.htm

 .container-fluid

 

 

Text/Typography, Table, Image

File Description

eg006.htm

skipped some examples

Bootstrap's default font-size (<body>, <p>) is 14px, with a line-height of 1.428.

<p> have a bottom margin = half the line-height (10px by default).

<small>

<mark>

<abbr>

<blockquote>

<dl>

<code>

<kbd>

contextual colors

contextual background

link to ... a lot more typography classes

eg007.htm

eg007_style.css

bootstrap basic table

.table class

  • default: light padding, horizontal dividers

.table-stripped class

  • add zebra-stripes to table
eg008.htm

bootstrap images
   

 

 

Jumbotron, Well, Alert, Button, Button Group

Grouping Description
jumbotron

jumbotron

big box for extra attention

.page-header

horizontal line under heading
well

.well

rounded border around an element

well-sm well-lg etc.

rounded border around an element

alert etc. - skip

button

.btn different button styles
button links

.btn used on <a>, <button>, <input>

Link

button sizes

button sizes
block level buttons

.btn-block spans the entire width of parent
active or disabled

.active .disabled : unclickable?
button group

.btn-group

.btn-group-lg|sm|xs

vertical button group

.btn-group-vertical
justified button group

.btn-group-justified

Panda Tigress Monkey

nested button group = dropdown menu
split button dropdowns
   

 

 

Glyphicon, Badge, Label, Progress Bar

Grouping Description
glyphicon Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.
glyphicon examples

envelope icon:

envelope icon as a link:

search icon on a button:

print icon on a styled link button: Print

badge Tigress 9
Panda 10
Monkey 3


label

Panda News

Panda News

Panda News

Panda News

Panda News
Panda News

Panda News
label classes Default Primary Success Info Warning Danger
progress bar
60% Complete
50%
colored progress bars
100% Power Level (success)
90% Power Level (info)
80% Power Level (warning)
70% Power Level (danger)
stripped progress bars
100% Power Level (success)
90% Power Level (info)
80% Power Level (warning)
70% Power Level (danger)
animated progress bar
50% Power Level
stacked progress bars
success 30%
warning 20%
danger 40%
   

 

 

Pagination, Pager, List Group, Panel

Grouping Description
pagination
- active, disabled states
pagination sizing
pagination
- breadcrumbs
pager
pager
- align
list group
  • Panda
  • Tigress
  • Monkey
list group
- badge, link items, active, disabled
Panda 5 Tigress 10 Monkey 16 Mantis 12
list group
- contextual classes
  • Panda
  • Tigress
  • Monkey
  • Mantis
list group
- custom content

Panda

die-hard fan of kung fu

Tigress

leader of the Furious Five

Monkey

golden snub-nosed

Mantis

experienced in acupuncture
panel

group and contextual classes - skip
Panel Heading
Panel Content
Panel Footer
   

 

 

Dropdown, Collapse, Tabs, Pills

Grouping Description
dropdown accessibility to improve accessibility for people using screen readers, role and aria-* attributes are added to all examples below
dropdown
- divider
dropdown
- header, active, disabled
dropdown
- position
dropup
basic collapsible
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.


Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
collapsible panel

Kung Fu, Click to Open/Close

Panda Body
Panda Footer
collapsible list group

Kung Fu, Click to Open/Close

  • Panda
  • Tigress
  • Monkey
Footer
accordion

Panda

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Tigress

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Monkey

Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
tabs

Home

Aenean vulputate eleifend tellus.
pills

Home

Aenean vulputate eleifend tellus.


Panda

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.


Tigress

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
   

 

 

Navbar - Bootstrap V3 only

Grouping Description
navigation bar
inverse navigation bar, with dropdown
right-aligned navbar  
navbar buttons  
navbar search form  

fixed navbar

eg009.htm

.navbar-fixed-top - for top

.navbar-fixed-bottom - for bottom

collapsing navbar

eg010.htm

 resize the eg010.htm browser window to see how the navbar collapses to a button

 

 

Forms, Inputs

File Description
coming soon... skip for now...
   

 

 

Carousel

File Description
eg014.htm basic carousel
eg015.htm carousel and slide captions
eg016.htm carousel with full-screen slides

 

 

Modal, Tooltip, Popover, Scrollspy, Affix, Filter

File Description
coming soon... skip for now...
   

 

 

About

This is a Bootstrap Framework learning page, with coding examples.

  1. Bootstrap Framework
  2. W3C Markup Validator
  3. W3C CSS Validator
  4. W3C
  5. w3schools Bootstrap tutorial
  7. w3schools html tutorial
  8. w3schools css tutorial
  9. w3schools Bootstrap tutorial
  10. Notepad ++

Other Links

  1. normalize.css
  2. Dummy Text Generator
  3. HTML 5 color names
  4. HTML 5 color names from w3schools

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad

Google Ad