Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Bootstrap Site Blueprints Volume II
  • Table Of Contents Toc
Bootstrap Site Blueprints Volume II

Bootstrap Site Blueprints Volume II

By : Lambert
4.5 (2)
close
close
Bootstrap Site Blueprints Volume II

Bootstrap Site Blueprints Volume II

4.5 (2)
By: Lambert

Overview of this book

Bootstrap is the most popular open source project on GitHub today. With a little bit of know-how, this massively popular CSS framework can leveraged for any type of complex web application or website. Bootstrap Site Blueprints Volume II will teach you to build these types of projects in an easy-to-understand fashion. The key to any complex Bootstrap project is a strong development foundation for your project. The book will first teach you how to build a Bootstrap development environment using Harp.js, Node, and Less. In the next chapters, we’ll build on this foundation by creating restaurant and mobile-first aggregator projects. Once you’re warmed up, we’ll move on to more complex projects such as a wiki, a new magazine, a dashboard, and finally a social networking website. Whether you are brand new to Bootstrap or a seasoned expert, this book will provide you with the skills you need to successfully create a number of popular web applications and websites.
Table of Contents (9 chapters)
close
close
8
Index

Coding the header and footer


The header for this project is fairly minimal in design. It will include a logo, some post filter links, and a search field. The footer for this project, however, is the most complex one we've done yet. It will include two sections, a number of links, an e-mail sign-up form, and space for an advertisement—any good magazine design will include some space for ads.

Updating the header

Let's start with updating the header first. For this project, I'm going to use a couple of HTML5 tags to mix things up. For each project in this book, I try to change how I build the header to show you that there are several ways by which you can construct a header. Some will use the default Bootstrap header, but some will be totally custom. The first thing that we're going to do is wrap the entire header in the <header> tag:

<header>
  …
</header>

Everything contained within the header is going to be centered horizontally, so let's apply a single style to this tag:

header...
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Bootstrap Site Blueprints Volume II
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon