Bootstrap 3.0 - Grid System

by Teuta Koraqi

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">

<header>
    <h1>City Gallery</h1>
</header>

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="london.html">London</a></li>
        <li><a href="paris.html">Paris</a></li>
        <li><a href="tokio.html">Tokyo</a></li>
    </ul>
</nav>


<article>
    <div class="intro_text">
        <h1>City Navigator</h1>
        <p>Welcome to my cities website. Click on a link on a left to view City information</p>
        </div>

<img src="images/cities.jpg" alt="Cities" style="width:352px;height:211px;">


</article>
</div>

CSS

div.container{
    width:100%;
    border:1px solid gray;
    }


header, footer{
    padding:1em;    
    color:white;
    background-color:black;
    clear:left;
    text-align:center
    }


nav {
    float:left;
    max-width:160px;
    margin:0;
    padding:1em;
    background-color:lightblue; //this did not work
}


nav ul {
    list-style-type: none;
    padding:0;
    }


nav ul a {
    text-decoration: none;
    }


article{
    margin-left:170px;
    border-left:1px solid gray;
    padding:1em;
    overflow:hidden;
}