BOOTCAMP SUPLEMENTAL EXERCISES

(Additional exercises to help students with Saturday Workshops)

Bootstrap:

(For solutions see the bottom of the .html file!)

Week 1: __________________________________________


/// PPT REVIEW 1///

col-sm-4
col-sm-8 + col-md-6

Auto Cols

Autofilling cols
Autofilling cols
Autofilling cols
Medium constraint col-md-8
Autofilling cols
Autofilling cols

/// PPT REVIEW 2///

Col md 6
// col 12
Col 11
Col 1

1 of 3
2 of 3
3 of 3
3 of 3
3 of 3

/// BOOTSTRAP GRID CODE CHALLENGE///

One
Two
Three
Four
Five
Six
Seven
Eight
Nine

/// BOOTSTRAP GRID CODE CHALLENGE///

Copy Seven
Copy Eight
Copy Nine !w/order-sm-first!
Test

Week 2: __________________________________________

/// COLOR SPACING AND UTILITY ///

Uncomment the following code below 'Div Sample' to see how it changes.

Set 1
No margin
ml-1
mr-3
mx-2
Padding 5
Padding 5
Padding y axis 1
Test 3
Margin x axis auto
Test 4

/// NAVBAR ///

Navbars can be simple look at how minimalistic this is, with few add ons.

/// BUTTONS ///

Buttons can be super simple too!.

Font Awesome


Bootstrap Buttons

Change the white button to a blue button!


/// FORMS ///

Click on the link to view different form styling and then add the class 'form-group row' to the empty classes to see how it changes the form shape!

Then add 'sm' to the end of the 'form-control' class in the first container and 'lg' to the end of the 'form-control' class in the second container to see how it changes the form shape!

/// CARDS ///

Change the color of the card header to red and remove 1 piece of information (text + corresponding number) from the card-body.

Facts At a Glance

Founded
February 3, 2016
No. of Campsites in 2019
563
No. of Reviews in 2019
4388
Employees
42

/// TABLES ///

Remove the 'table-striped' class from the table to see how it changes!

Facts & Figures

201620172018
Staff Wilderness Experts102040
New Campers2561,2805,360
Square Miles Covered101,325423,000~3,000,000,000

/// MEDIA OBJECT ///

Media objects allow you to simplify the process of organizing/styling but they are still more or less a glorified container. Since you are still getting comfortable dealing with containers and their relationships try to uncomment the img and use alt/optn and the up and down keys to see how the page changes depending on where the image is in the media object. Try to position the image so that it's to the right of the media body in the UI.

Continuing education in architecture.

Brutalism in the 1960's

Taking a look from urban centers.

Breadcrumb Trail

Featured Campsites

React Lake Campground

Nestled in the foothills of the Chrome Mountains, this campground on the shores of the pristine React Lake is a favorite for fly fishers.

React Lake Thumbnail

Check out these additional exercises


Week 3: __________________________________________

///.fade .tab-pane///

(See this link for a better illustration of 'fade'.
One
Two
Three
Four
NoFade5
NoFade6

///Collapse and Accordion///

ACCORDION

///Tooltips///



/// MODAL ///

Alert!



Basic Modal

MODAL BASIC

DISMISS MODAL EX.

MODAL DISMISS

///RADIO BUTTON///

CATS VS. DOGS



Week 4: __________________________________________

(More content coming soon!)

Week 5: __________________________________________