Bootstrap 4

Question 1

What is Bootstrap?

Answer 1

Front-end library/framework

Question 2

Benefits

Answer 2

Adaptive UI display for various kinds of screens

Catalog of pre-styled elements

Question 3

Installation Process

Answer 3

1. Download the Bootstrap files to local and link to the local in HTML
   Though this can cause low performance, as the browser will not recognize the file, and will download it.
   Method is not recommended
2. Include the individual Bootstrap reference link
3. Include the Start Template from Bootstrap, which also includes Popper.js and Jquery

Question 4

Design

Answer 4

Wireframe
Low fidelity black and white sketch, often done using pencil, to highlight the main aspects of a web page
Mockup
High fidelity UI draft of what the final web page can look like.
Prototype
An interactive UI

Question 5

Navigation Bar

Answer 5

Similar to a div, but more clear for readability
Navbar
Nav-brand
Margin
ml-auto
As much margin is used to push the item all the way to the right
Toggler - Dropdown Menu
Colors

Question 6

Grid Layout System

Answer 6

Consists of 12 columns
Can further specify by indicating col-#
Further specify by screen size
Large - lg
Desktops/Laptops
Medium - md
Small desktops/laptops
Ex.
col-md-6
Take up 6 units for medium sizes and upward
Small - sm
Tablets
Extra small - xs
Phones

Question 7

Containers

Answer 7

Basic building block of the bootstrap grid system
All grid elements are contained inside of a container element
class=”container”
Responsive to screen size
By default, contains margins
class=”container-fluid”
Adaptive to the width of the screen.
Takes up 100% width of the screen

Question 8

Buttons

Answer 8

Check Bootstrap documentation

Question 9

Carousel

Answer 9

Can adjust time

Can put transition styles

Question 10

Cards

Answer 10

Container, that usually consists of an image and text enclosed in a box

Question 11

Z-Index & Stacking Order

Answer 11

Natural stacking order
The first html elements will be placed towards the back.
Following html elements will be stacked on top of the previous
Z-Index
Default z-index of html elements is 0
z-index of greater than 0 will be placed on top
z-index of less than 0 will be placed towards the back
Doesn’t work for position:static

Question 12

Media Query Breakpoints

Answer 12

Mobile-First
More people go on websites on their phones than on their desktops
Google ranks searches based on mobile-friendly-ness
@media { … }
Works like a True/False statement. If true, run the code

print
screen
speech

Example:
@media screen (min-width: 900px) { … }
Code should only be activated if the media is a screen with a min-width of 900px
Can also combine multiple features
@media screen (min-width: 900px) and (max-width: 1500px) { … }
Different types of views
Device
Size of the device, fixed
Browser Size
Viewport
Size of the screen that your website is being displayed on

Question 13

Code Refactoring

Answer 13

1. Readability
2. Modularity
3. Efficiency
4. Length

Question 14

Combining Selectors

Answer 14

Multiple Selectors
selector1, selector2, selector# { … }
Styling is applied to all selectors in the list separated by commas
Hierarchical Selectors
selector1 selector2 { … }
selector1 is the parent, selector2 is the child
Styling is performed on the child element
Note: This is not really used for id selectors, as that is redundant
Combined Selectors (Non-hierarchical)
selector1.selector2{ … }
OR
selector#selector2{ … }

Question 15

Selector Priority

Answer 15

Selector which is more specific gets higher priority
Element Selector
Class Selector
Try to only have one class for a html element, even though Bootstrap doesn’t follow this
ID Selector
Use ID sparingly
ID has the highest selector priority
Avoid inline styling