Jump Start Responsive Web Design: Modern Dynamic Responsive Solutions by Chris Ward

Author:Chris Ward [Ward, Chris]
Language: eng
Format: mobi
Publisher: SitePoint
Published: 2017-04-24T04:00:00+00:00

Bootstrap

While not the first framework for responsive design, Bootstrap is the most widely used. You’ve probably seen it in action without realizing. Released in 2011 by Twitter, it uses a 12-column grid, offers flexbox layout, and has periodically had one of the most popular repositories on GitHub.

Popularity is Bootstrap’s biggest advantage and disadvantage. It’s easy to use, encourages positive layout and CSS practices, and has plenty of documentation and community help. But your site can easily end up looking a lot like every other Bootstrap-powered site.

Installing Bootstrap

The default download of Bootstrap can add a lot to the weight of your page, so I recommend you take a good look at the instructions to ensure you get a copy that’s best optimized for your use. For this example, I’ll use the CDN option, as it’s the simplest. If you want to follow along, add the lines provided on the Bootstrap page, and remove the link to the current CSS file.

You can find the simplified (no media queries) refactored index.html page here as an example. You’ve lost the custom font and background colors, which would be easy to re-add, but you have a responsive grid (Bootstrap also uses a 12-column grid) without too much effort, and that works in a similar way to our custom grid. Bootstrap also has a lot of other styles available for handling images, determining what grid elements to display at different grid sizes, and much, much more.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.