Bootstrap Challenges

Objectives
Explain why UX is important as a developer
Build a static webpage with HTML and CSS (review)
Add the Bootstrap library to your projects

Challenges

  1. Create an index.html file and add the Bootstrap CDN (or use this Bootstrap boilerplate to get started)
  2. Add one .container, one .row, and three .col-* classes (your columns can be any widths that add up to 12)
  3. Make these girds
    • Mobile (xs) - 12/12
    • Tablet (sm) - 4/8
    • Laptop (md) - 4/8
    • Desktop (lg) - 3/7 (offset-1)
  4. Make these girds
    • Mobile (xs) - 3/9
    • Tablet (sm) - 4/8
    • Laptop (md) - 5/7
    • Desktop (lg) - 5/5 (offset-1)
  5. Add some buttons (you can even put icons inside!)

Stretch Challenges

  1. Add a nav bar to the top of your page.
  2. Add a form to your page.
  3. Visit Bootsnipp, and choose any element(s) from the gallery to add to your page. (Hint: You will have to add your own stylesheet if any extra CSS is required for the element(s) you choose)

Further Reading

HTML & CSS

Bootstrap

Other CSS Frameworks

UX & UI

Bootstrap Boilerplate

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">

    <!-- set viewport to device width to allow responsiveness -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- custom styles (always require after Bootstrap) -->
    <link rel="stylesheet" href="style.css">

    <title>Bootstrap Boilerplate</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <h1>col-sm-6</h1>
          <p>These columns take up half the page.</p>
        </div>
        <div class="col-sm-6">
          <h1>col-sm-6</h1>
          <p>And they take up the whole page on small devices.</p>
        </div>
      </div>
    </div>
  </body>
  </html>