Bootstrap

Key Questions

UX & UI

  • UX = User Experience
  • UI = User Interface

Key Takeaways

  • UX encompasses all aspects of the end user's interaction, including product design, usability, and interface layout
  • UI refers to the visual elements (typography, buttons, forms, etc.)

Why is UX important?

As developers, we want to make web applications that are useable and make people happy.

Bootstrap

  • Bootstrap Docs
  • CSS library developed by Twitter
  • Best known for responsive grid system

Why Use Bootstrap

How to Use Bootstrap

  • Add the the viewport meta tag and the Bootstrap CDN to the <head></head> of your HTML file

    <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

  • You can also use this Bootstrap boilerplate to get started

Bootstrap Grid System

  • .container class holds .row classes
  • Rows create horizontal groups of columns

  • Site content lives in columns

    <body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <p>This column takes up half the page.</p>
      </div>
      <div class="col-sm-6">
        <p>And so does this one!</p>
      </div>
    </div>
  </div>
</body>

  • Predefined column classes col-*

    • xs-*, sm-*, md-*, lg-* refer to targeted device sizes
    • Number between 1-12 sets width of col on that device and all larger devices