Web Dev Week 2: Bootstrap

Bootstrap Fundamentals

This week was Bootstrap from Colt Steele The Web Developer Bootcamp.
https://getbootstrap.com/

Bootstrap Topics

-What is Bootstrap 
-Adding Bootstrap to a Project
-Forms and Inputs 
-Nav Bars
-The Grid System

Bootstrap 4 Topics

-Changes from 3 to 4 
-Bootstrap 4 Colors and Background
-Typography
-Spacing Utilities
-Responsive Breakpoints 
-Bootstrap Nav Bar
-Display Utility
-Box Model

Bootstrap 4: Flexbox and Layout Topics

-Flexbox and Layout
-Flexbox Utilities
-Bootstrap 4 Grid 

What is Bootstrap

Bootstrap is a free and open source frontend web framework. Design templates are used for typography, forms, buttons, navigation and other interface components. Bootstrap was created in 2011 by Mark Otto and Jacob Thornton, Bootstrap purpose is to bring consistency across devices. The use of bootstrap results in the uniform appearance of tables and form elements across web browsers. Bootstrap uses jQuery plugins to provide dialog boxes, tooltips, and carousels.
Bootstrap is highly customizable, in that developers can remove unnecessary components, apply a theme and modify the uncompiled Sass files. Benefits of bootstrap include browser support, Mobile first approach, simple and easy to start, responsive design and looks, easy customization, clean interface or developers.
The purpose of bootstrap is to speed up development time by using pieces of prebuilt code to build the layout of a given webpage. Bootstrap has some very important features that make modern web design simple flexible and professional. Bootstrap uses a grid system which adds structure and organization to a webpage. The grid system divides the screen into smaller manageable parts than having to work with larger complex pieces.

The neat thing about bootstrap is that you can change the overall theme of the look and feel of your website presentation with bootswatch.
https://bootswatch.com/

It is easier to learn bootstrap when you have a foundation in CSS flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

Adding Bootstrap to a Project

There are two ways to add bootstrap to a project. Bootstrap provides an CDN that is easy to copy the prewritten code into your project. Otherwise, it is possible to download bootstrap to your local machine then copy the files over into your project.

Forms and Inputs

Bootstrap has made it very quick and easy to create forms and input boxes with prewritten code templates. There are different styles for forms and input boxes to choose from. The prewritten code is customizable, so that you can change the look and feel to your liking.

Nav Bars

Bootstrap also provides prewritten code to create responsive navigation bars.

The Grid System

The grid system is the skeleton for the entire application. It allows us to add structure and layout to our application. Applications are able to scale and stack as they are resized to fit different devices sizes. The grid is made from containers, rows, and columns. There are 12 units in every row with 4 sizes xtra-small, small, medium, large. The 12 units can be resized to any of the 4 sizes to create responsive layouts.

Changes from 3 to 4

In bootstrap 4 flex-box is enabled by default, rems are used instead of px from bootstrap 3, global font size has changed from 14px to 16px. There are new utility classes for common CSS property-value pairs and margin padding spacing shortcuts. A new component called cards replaced three existing utility from bootstrap 3 such as panels, thumbnails and wells. More changes can be found within the bootstrap documentation.

Bootstrap 4 Colors and Background

Bootstrap has distinct names for the specific color you want to use. In bootstrap 3 the default colors were: primary is blue, success is green, info is a lighter blue, warning is yellow, and danger is red. In bootstrap 4 the default colors: primary is blue, danger is red, green is success, info is light blue. All the color classes start with text such as .text-primary.

Typography

There are display headings that come in four sizes with the 4th size being the smallest and the 1st size being the largest. Display headings are used to replace the default h1-h6 heading. Block-quotes made the font-size slightly larger than the default block-quotes.

Spacing Utilities

Borders utility gives borders to an element that you choose. Borders can be subtracted by doing border-0. Border-radius makes the borders edges rounded.

Responsive Breakpoints

Bootstrap is developed to be mobile first. Media queries create breakpoints to adjust to a given device screen size. There are four media query breakpoints
-Small
@media (min-width: 576px) { .. }
-Medium
@media (min-width: 768px) { .. }
-Large
@media (min-width: 992px) { .. }
-Extra-Large
@media (min-width: 1200px) { .. }

Bootstrap Nav Bar

The Nav Bar is made responsible by bootstrap; therefore, it can adjust to different screen sizes by small, medium, large, and extra-large sizes.

Display Utility

This is how you would change the display property. 
.d-{value} for xs 
.d-{breakpoint}-{value} for sm, md, lg, and xl.  
This is used to help make websites responsive. 

Flex-box and Layout

  Flex-box is used to align content on a web page within two 
  directions, the default axis is from left to right. The start of 
  the flex-box is on the left side of a webpage, the end of the flex- 
  box is on the right side of a webpage. The cross-axis is top to 
  bottom. The start of the cross-axis is at the top and the end of 
  the cross-axis is at the bottom. 

The justify-content property
The ways to move content around with flex-box from left to right
-d-flex justify-content-start
-d-flex justify-content-end
-d-flex justify-content-center
-d-flex justify-content-between
-d-flex justify-content-around
The ways to move content around with flex-box from top to bottom
-d-flex align-items-start
-d-flex align-items-end
-d-flex align-items-center
-d-flex align-items-baseline
-d-flex align-items-stretch

Flex-box Utilities

The direction property changes the direction that the content is laid out within a horizontal direction and the opposite side.
-flex-row to set a horizontal direction which is the default. Goes left to right.
-flex-row-reverse to set the opposite direction within the horizontal -direction. Goes from right to left.
-flex-column to set the content at the bottom.
-flex-column-reverse to set the content the top.

Can change the direction from a row to a column.
-Flex-column changes items from a row into a column.
-Align-items start will move items to the left side
-Align-items end will move items to the right side
-Align-self is used to align individual items.

Bootstrap 4 Grid

There are five tiers with xs, sm, md, lg, and xl.
Flex-box utility classes work for the grid system and components.

This week projects:
Landing page made with bootstrap

Landing page made with bootstrap