- 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

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
Greater than or equal to 768px
Greater than or equal to 992px
Greater than or equal to 1200px
Width Auto 750px 970px 1170px

Chapter 2.2
Working With Rows


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

Chapter 2.3
Creating 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