Let's survey the beginning files for this exercise, which you will find in the folder 02_Code_BEGIN. You'll see files similar to the template we set up in Chapter 1, Getting Started with Bootstrap.
There are a few new additions:
- The
lessfolder has a slightly modified organization scheme. We'll return to this later in the project. First, let's attend to the content elements. - The
imgfolder now contains five images:- One logo image, named
logo.png - Four portfolio item images
- One logo image, named
- The
index.htmlfile has the following new touches:- Navbar items have been updated to reflect our new site architecture
- We also have the essential markup in place for the images, content blocks, a logo in the footer, and social links
Other than the navbar, which we set up in Chapter 1, Getting Started with Bootstrap, no Bootstrap classes have been added to style the carousel, columns, or icons yet. You can view the results in your browser.
You'll see the navbar, followed by the portfolio images:
The blocks of text and the footer with a list of social links follows after the images.
It's not much to speak of yet. Let the transformation begin.
We'll begin by applying the Bootstrap classes, allowing us to quickly and efficiently establish the fundamentals for our interface elements using Bootstrap's default CSS styles and JavaScript behaviors.