8 Practical Bootstrap Projects

8 Practical Bootstrap Projects

by Maria Antonietta Perna, George Martsoukos, Ashraff Hathibelagal, Syed Fazle Rahman, Ahmed Bouchefra, Manjunath M, Zeeshan Chawdhary
Released August 2018
Publisher(s): SitePoint
ISBN: 9781925836042

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Bootstrap stands as one of the most popular, open-source, front-end frameworks on the Web. Since its official release in 2011, it has undergone several changes, and it's now one of the most stable and responsive frameworks available. It's loved by web developers of all levels, as it gives them the capability to build a functional, attractive website design within minutes. A novice developer with just some basic knowledge of HTML and little CSS can easily get started with Bootstrap.

In this book, we'll share a selection of nine different practical projects that you can follow along with. It contains:

  • Spicing Up the Bootstrap Carousel with CSS3 Animations by Maria Antonietta Perna
  • A Full-screen Bootstrap Carousel with Random Initial Image by George Martsoukos
  • Animating Bootstrap Carousels with GSAP's Animation Library by George Martsoukos
  • Build a Simple Tumblr Theme with Bootstrap by Ashraff Hathibelagal
  • How to Build a Responsive Bootstrap Website by Syed Fazle Rahman
  • Bootstrap and WordPress Theme Integration in 8 Easy Steps by Ahmed Bouchefra
  • Integrating Bootstrap with React: a Guide for Developers by Manjunath M
  • Integrating Bootstrap with Vue.js using Bootstrap-Vue by Zeeshan Chawdhary

This book is for all frontend developers who want to build responsive, mobile-first websites. You'll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion.

Publisher resources

View/Submit Errata

Table of contents

  1. 8 Practical Bootstrap Projects
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. Preface
    1. Who Should Read This Book?
    2. Conventions Used
  7. Chapter 1: Spicing Up the Bootstrap Carousel with CSS3 Animations
    1. Introducing Animate.css
    2. Introducing the Bootstrap Carousel
    3. Building the HTML Structure
    4. Adding CSS to the Carousel
    5. Writing the jQuery
    6. Conclusion
  8. Chapter 2: A Full-screen Bootstrap Carousel with Random Initial Image
    1. Building the Carousel
    2. Creating Full-screen Bootstrap Carousel Slides
    3. Initializing a Random Slide
    4. Potential Further Customizations?
    5. Conclusion
  9. Chapter 3: Animating Bootstrap Carousels with GSAP’s Animation Library
    1. Building the Carousel
    2. Initializing the Carousel
    3. Adding Keyboard Navigation
    4. Animating Bootstrap Carousels: First Animations
    5. Customizing the Carousel When JavaScript is Disabled
    6. Conclusion
  10. Chapter 4: Build a Simple Tumblr Theme with Bootstrap
    1. Our Basic HTML and Bootstrap Resources
    2. Adding Custom Styles
    3. Creating the Tumblr Theme Header
    4. Creating a Container to Hold Posts
    5. Handling Text Posts
    6. Handling Photo Posts
    7. Handling Quote Posts
    8. Handling Pagination
    9. Applying the Theme to Tumblr
    10. Conclusion
  11. Chapter 5: How to Build a Responsive Bootstrap Website
    1. What “Responsive Bootstrap Website” Means
    2. Setting Up
    3. Let’s Begin Building Our Responsive Bootstrap Website
    4. The Responsive Navigation
    5. The Marketing Area
    6. The Content Section
    7. The Right Sidebar
    8. Building the Footer
    9. Conclusion
  12. Chapter 6: Bootstrap and WordPress Theme Integration in 8 Easy Steps
    1. Why WordPress?
    2. Why Bootstrap?
    3. Prerequisites for Following Along
    4. Key Steps to Integrate Bootstrap and WordPress
    5. Conclusion
  13. Chapter 7: Integrating Bootstrap with React: a Guide for Developers
    1. Why You Can’t Just Include Bootstrap Components with React
    2. Setting up a Bootstrap Stylesheet with React
    3. Using Vanilla Bootstrap with React
    4. An Overview of Third-party Libraries for React and Bootstrap
    5. Setting up the reactstrap Library
    6. Bootstrap Grid Basics
    7. Bootstrap Style Components in React
    8. Demo: A Contact List Application UI with reactstrap
    9. Summary
  14. Chapter 8: Integrating Bootstrap with Vue.js using Bootstrap-Vue
    1. Introducing Bootstrap
    2. Connecting Bootstrap with Vue.js
    3. Bootstrap-Vue
    4. Getting Started with Bootstrap-Vue Using the Command Line
    5. Importing Bootstrap-Vue with a script Tag in the Document <head> Section
    6. Working With Bootstrap-Vue Components
    7. Conclusion

Product information

  • Title: 8 Practical Bootstrap Projects
  • Author(s): Maria Antonietta Perna, George Martsoukos, Ashraff Hathibelagal, Syed Fazle Rahman, Ahmed Bouchefra, Manjunath M, Zeeshan Chawdhary
  • Release date: August 2018
  • Publisher(s): SitePoint
  • ISBN: 9781925836042