11/6/2018

Review

New

Exercise 24

Reminder:

  • Resumes
  • Business Cards - vistaprint.com - 100 cards for $16
  • Lynda.com

See the Pen MGQXNB by Jon (@Middaugh) on CodePen.

Starter Template


<!doctype html>
<html lang="en">
    <head>
    <title>Hello, world!</title>
    <!-- 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.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    </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.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>

Read about Bootstrap here

Containers

Containers are your primary component for Bootstrap's Grid system. The responsive grid will not work without containers.

There are two types of containers

container

container-fluid

container

The standard container is a fixed width container where its max-width changes with each breakpoint.

container-fluid

Fluid containers span the entire width of the viewport. Their width will always be 100%.

Grid System

Bootstrap's Grid system is based of a 12 column grid with 5 breakpoints. Bootstrap 4 provides a much more robust grid than Bootstrap 3. We are going to focus on Bootstrap 4's grid.

Grid Rows

All grids require rows to represent any columns.

Equal Width Columns

You can create equal width columns with ease in Bootstrap by using the .col class 




    
col

    
col

    
col

    
col

Grid's Grid

Breakpoints and prefixes

Name Break Point Prefix
Extra Small 0 to 575px .col-
Small 576px .col-sm-#
Medium 768 .col-md-#
Large 992px .col-lg-#
Extra Large 1200px .col-xl-#

The breakpoints are different on Bootstrap 4 compared to Bootstrap 3.

Grid Behavior

Instead of dictating widths in your CSS you will now dictate your desired widths with classes. Columns will need to add up to 12

This code will always be two columns


    

        

            
Column 1

            
Column 2

See the Pen PeQBzm by Jon (@Middaugh) on CodePen.

Grid Behavior

This code will be two columns until you reach the MD breakpoint. It will then become 4 colums. col-6 is the minimum.


    

        

            
Column 1

            
Column 2

            
            
Column 3

            
Column 4

Grid Behavior

Not specifying a column with make it 100%. This will be 1 column until the MD break point because col class was not used.


    

        

            
Column 1

            
Column 2

            
            
Column 3

            
Column 4

            
             
Column 5

            
Column 6

Questions?

Cards

Bootstrap's Cards are content containers that are highly customizable. We're going to look at just the basic implementation.

Card API

Markup

card - Class that dictates the element is a card

card-body - Adds padding to main content of the card.




    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit.

See the Pen BS - Card by Jon (@Middaugh) on CodePen.

Card Images

You can add an image at the top of a card. Card images will automatically scale with the card. 




    Card image cap
    

        
Some quick example text to build on the card title and make up the bulk of the card's content.

See the Pen BS - Card-2 by Jon (@Middaugh) on CodePen.

Card Content

Cards have a large number of custom classes that provide a way to have consistent looking content.

  • card-title
  • card-subtitle
  • card-text
  • card-link

Markup




    

        
Article 1 title

        
Article 1 subtitle

        
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis iusto temporibus voluptatem et repellendus accusantium?

        Read More
        Article Source

See the Pen BS - Card-4 by Jon (@Middaugh) on CodePen.

Bootstrap Themes

Bootstrap themes are packages of HTML, CSS, and JavaScript that provide a consistent look to your Bootstrap powered website.

Some free themes

Bootstrap Buttons

Bootstrap offers several predefined styles and behaviors. Most are designed around semantic usage.

Button API

Button HTML

Bootstrap button styles can be applied to button, input, and a

Buttons require 2 classes

  • btn - this applies the look and behavior of the button
  • btn-[type] - this applies the theme/color

Example Buttons

In Action

See the Pen BS - Buttons by Jon (@Middaugh) on CodePen.

Forms

Bootstrap provides a great way to style forms and customize their layout.

Bootstrap applies a width of 100% to almost all of their form elements, but can easily be changed with additional classes.

Forms API

Basic Form Components

  • form-group - A container for a specific input. Primary purpose is to add spacing between inputs
  • col-form-label - Class for dictating a label
  • form-control - applies Bootstrap's look and feel to an input.

Markup

This markup generates a stacked form.

See the Pen BS - Forms by Jon (@Middaugh) on CodePen.

Horizontal Forms

You can use Bootstrap's grid system to generate a horizontal form.

See the Pen BS - Form-2 by Jon (@Middaugh) on CodePen.

Validation Styles

There are built in styles to help provide a visual indicator that there are missing fields.

  • is-valid
  • is-invalid
  • invalid-feedback - Validation message. Automatically displays when input has is-invalid. There is a block of JavaScript that executes this. We'll look at it later. 



    

        
        
    

    

        
        
        

            Please fill out this input

See the Pen BS - Form-3 by Jon (@Middaugh) on CodePen.

Tables

Bootstrap has an opt-in approach for styled tables. You must add the class table to a table element to get a styled table

Markup




    
        

        #
        First Name
        Last Name
        Username
        

    
    
        

            1
            Mark
            Otto
            @mdo

See the Pen BS - Table by Jon (@Middaugh) on CodePen.

Table Stripes and Borders

You can apply several global styles by using these classes on the parent table

  • table-striped - Adds a different background to every other row
  • table-bordered - Adds borders to all table cells
  • table-hover - Adds a different background when hovering over a row

Contextual Classes

These can be applied to any row or column in a table. 


    <table>
            <tr class="table-active">...</tr>
            <tr class="table-primary">...</tr>
            <tr class="table-secondary">...</tr>
            <tr class="table-success">...</tr>
            <tr class="table-danger">...</tr>
            <tr class="table-warning">...</tr>
            <tr class="table-info">...</tr>
            <tr class="table-light">...</tr>
            <tr class="table-dark">...</tr>       
    </table>

See the Pen BS - Table by Jon (@Middaugh) on CodePen.

Images in Bootstrap

There are many classes that apply small changes to images that help make them more mobile friendly.

Fluid Images

The img tag is an inline element by default. Using the class img-fluid forces the element to always take up 100% of the space available ot it. 


    Responsive image

Image Thumbnails

You can use the class img-thumbnail to apply a 1px border for a better appearance. 


    ...

Rounded corners

Rounded corners are apart of Bootstrap's Utilities, but you can easily apply them to images for better appearance 


    ...
    ...

See the Pen BS - Images by Jon (@Middaugh) on CodePen.

Utilities

Bootstrap contains a large number of utilities to help with small layout changes.

Text Align


    
Left aligned text on all viewport sizes.

    
Center aligned text on all viewport sizes.

    
Right aligned text on all viewport sizes.
Read More

Quick Margins and Padding.

Formula

[property] [sides] - [size]

Read More

Available Values

Properties

  • p - padding
  • m - margin

Sides (optional)

  • t|b|l|r - top, bottom, left or right
  • x|y - both sides or top and bottom
  • blank - applies to all sides

Size

  • 0 - 5
  • auto

Examples

  • ml-1 - small margin left
  • m-5 - large margin on all sides
  • mx-auto - left & right auto margin
  • p1 - small padding on all sides
  • pb-1 - small padding on bottom

Display Utility Classes

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-flex

Dictating Sizes

  • .w-25
  • .w-50
  • .w-75
  • .w-100

.w-25 is 25% of what? It's 25% of a SASS variable that you set in your theme.

Exercise 24

>