In this exercise, we will take a website without any CSS or special formatting, and use Bootstrap to format and structure each page.
-
Download the files to your computer. There are three HTML files for you to work with, and a folder that includes the same files, but includes Bootstrap formatting. You can use these files if you get stuck.
-
Open the index.html file in your text editor (such as Sublime Text) and open it in the browser as well. As we make changes, we will save our html file in our text editor and refresh it in the browser.
-
First, we need to add in the Bootstrap code. Go to Bootstrap.com and copy the code that will go in between the head tags of your html doc.
*You can also copy it here: (click on "raw" to see all the code you need)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
- Save your index.html doc and refresh it in the browser. Notice what has changed, just by inserting the Bootstrap code. Insert the same code in your govt.html file and your neighborhoods.html file.
*Before you get started, review CSS Classes, and HTML divs, as these tools will help you connect your Bootstrap formatting.
-
Use the "container" class to wrap your content. What does this change on your page? More about Bootstrap Containers
-
Next, use the Bootstrap Grid System to rearrange your content and make it appear more similar to the website this practice is based on: WelcomeCLT.org.
-
Use the Bootstrap Navbar to spruce up your menu navigation.
-
Use the grid system to change your neighborhood.html file and make three columns--one for each neighborhood.
-
Use the grid system to arrange your pictures on the govt.html page to have 2 rows of 6.
-
Using Bootstrap.com as a reference, make other cosmetic changes to your site. For example, buttons, and the jumbotron class.