Lynda.com - Bootstrap 3 Essential Training

Chapter 2

Chapter 2.1
Understanding Bootstrap Containers

Bootstrap Grid System

  • 12-column grid
  • Accessed through CSS classes
  • Three key concepts
    1. Containers
      Rows
      Columns

Bootstrap Containers

  • Control Layout
  • Adds 50px of padding on each side
  • Two types of Containers
    1. Fluid Containers
      Fixed Containers

Fixed-Width Container

  • 15 pixel padding on each side
  • Adjusts to media query breakpoints
  Extra Small
Less than 768px
Small
Greater than or equal to 768px
Medium
Greater than or equal to 992px
Large
Greater than or equal to 1200px
Width Auto 750px 970px 1170px


Chapter 2.2
Working With Rows

Rows

  • Horizontal groups of columns
  • Place within a container
  • Should always include columns
  • Gets rid of container padding

Chapter 2.3
Creating Columns

Columns

  • 30px Gutters
    1. 15px on each side
  • Use col-SIZE-SPAN
    1. Size: When it stacks
      Span: How many columns
      Example: col-md-4
  • More than 12 columns wrap