In this section, we will see the design wireframes for other pages, which we will create in chapters to come.

The following is the design wireframe for the Listing Preview page:

The following is the design wireframe for the property details. If you notice, we are going to use the same Bootstrap's modal window component. When we open the modal window, we should see the property details:

Now, we will learn how to design the wireframe for the Photos page. If you look carefully, the layout structure looks familiar to the Listings page. We will have to create a reusable design using the common libraries, which can be reused across various pages and templates:

Next up is the Upload Photo page. We will again have to create a modal window component and provide a file upload option through which we can upload photos easily:

Now, let's move on to the Edit Photo wireframe. Yet again, we are making use of Bootstrap's modal window component to design our Edit Photo page. We will use Angular's data binding to bind the data in the modal window:

Last, but not least, we will explore the Photo Preview page. We can display the photos using the modal window Bootstrap component. We will close the common action buttons to close or edit the modal windows:

That was quite a bit of work we have done in this chapter, as we learned about the Bootstrap grid and layout components. We have created a few pages as part of our hands-on learning examples and designed our wireframes that we will use in our application.