Code First Girls Edinburgh

Make your first page responsive

Add Bootstrap to your page

To add an external stylesheet to your simple index.html file:

Make sure you've downloaded Bootstrap, and added the bootstrap.css file to your website's css folder (in the same place as your style.css.
Link the Bootstrap CSS in the <head> of your page.
<link rel="stylesheet" href="css/bootstrap.css">. You want this to point to wherever your bootstrap.css file lives.
Also add the following to your page's <head>: <meta name="viewport" content="width=device-width, initial-scale=1"> This will ensure that your Bootstrap site renders correctly on phones and small screens.
You'll want to start with trying to integrate the Bootstrap grid system as shown in the slides, and other responsive elements you fancy. Refer to the Sample Sites here, and also to the Bootstrap Documentation for help.This documentation can be very overwhelming, so please let us know if you get stuck!

You can also try to copy and paste this piece of code, and tinker with it:

<div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h2>Heading</h2>
        <p>Locavore swag PBR, YOLO sustainable shabby chic pork belly Austin jean shorts 3 wolf moon. PBR&B twee single-origin coffee Neutra, dreamcatcher artisan banjo High Life. You probably haven't heard of them organic brunch before they sold out, PBR&B aesthetic whatever actually.<p>
      </div>
      <div class="col-sm-4">
        <h2>Heading</h2>
        <p>Locavore swag PBR, YOLO sustainable shabby chic pork belly Austin jean shorts 3 wolf moon. PBR&B twee single-origin coffee Neutra, dreamcatcher artisan banjo High Life. You probably haven't heard of them organic brunch before they sold out, PBR&B aesthetic whatever actually.<p>
      </div>
      <div class="col-sm-4">
        <h2>Heading</h2>
        <p>Locavore swag PBR, YOLO sustainable shabby chic pork belly Austin jean shorts 3 wolf moon. PBR&B twee single-origin coffee Neutra, dreamcatcher artisan banjo High Life. You probably haven't heard of them organic brunch before they sold out, PBR&B aesthetic whatever actually.<p>
      </div>
     </div>
</div>

This will create a row of three columns (placeholder text courtesy of Hipster Ipsum). Feel free to read the grid docs and try to add new column rows.

Bootstrap exercises

Add Bootstrap to your page