mstorino/bootstrapBasics.md

## bootstrapBasics.md

      
    Raw
  

              bootstrapBasics.md
            
          
    Bootstrap Basics

Bootstrap is your friend.
Set up a generic Bootstrap Page

This is the latest Bootstrap Version. We should use this going forward
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Begin with the Template.

This includes important things that are critical to Bootstrap functionality: Bootstrap CSS and Javascript. It also has the responsive viewport meta tag
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    
    <!--   Main stylesheet -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    
    <!-- Custom JavaScript -->
    <script type="text/javascript" src="assets/javascript/app.js" type="text/javascript"></script>
    
  </body>
</html>

Popper.js

What is a popper? It's fun https://popper.js.org/
Cool Examples of what it can do

https://getbootstrap.com/docs/4.0/examples/
Grid System

https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.
Containers

https://getbootstrap.com/docs/4.0/layout/overview/#containers
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container <div class="container"> (meaning its max-width changes at each breakpoint) or <div class="container-fluid"> fluid-width (meaning it’s 100% wide all the time).
Columns & Rows

https://getbootstrap.com/docs/4.0/layout/grid/#responsive-classes
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
Multiple different columns

https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Responsive Breakpoints

https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
`Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.`
Extra small devices (portrait phones, less than 576px)

No media query since this is the default in Bootstrap
Small devices (landscape phones, 576px and up)

@media (min-width: 576px) { ... }
Medium devices (tablets, 768px and up)

@media (min-width: 768px) { ... }
Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }
Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }
Alignment

https://getbootstrap.com/docs/4.0/layout/grid/#alignment
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div> 

Components

https://getbootstrap.com/docs/4.0/components/alerts/