Bootstrap 4 for Beginners - Build 5 Websites from Scratch

Bootstrap 4 for Beginners - Build 5 Websites from Scratch

by Laurence Svekis
Released September 2018
Publisher(s): Packt Publishing
ISBN: 9781789808179

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

Video description

This course uses Bootstrap 4.0.0-beta, the latest version. Learn about the Bootstrap Grid and new changes that make it easier to use. Find out how to use Bootstrap 4 navbars by making them responsive. Structure content in tables, lists, and cards. Make text stand out with amazing Bootstrap 4 utilities. Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app, a responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. Add to the library and then you are ready to bring the power of Bootstrap into your web pages! It's simple and easy to use and facilitates web design and development. This is all available within Bootstrap. You will be amazed at how easy it is to create modern websites using Bootstrap.

What You Will Learn

  • Learn how to add Bootstrap to your website
  • Resources and top links are included
  • Explore how containers work
  • Add classes to make things happen
  • Media sizes and breakpoints
  • Find out what the Bootstrap Grid is and how it works
  • Columns and row and how to structure your content
  • Use typography to make content stand out
  • List groups and more to group content
  • Custom components such as JumboTron and badges
  • Do amazing things with buttons
  • Progress bars and alerts
  • Customize colors and fonts
  • Learn about Bootstrap tables
  • Bootstrap Cards are new; learn how they work
  • See how Bootstrap can enhance forms
  • Drop-downs and element groupings
  • Use responsive navbars and nav items
  • Explore interactive Bootstrap components such as tooltips and popovers
  • Use modals to enhance your user s experience
  • Explore dynamic jQuery components in action such as carousels, and more

Audience

This course is for web designers, web developers, and anyone who wants to learn Bootstrap.

About The Author

Laurence Svekis: Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.

Table of contents

  1. Chapter 1 : Introduction to Bootstrap
    1. Welcome to Bootstrap 4
    2. What is Bootstrap introduction to Bootstrap 4
    3. New Bootstrap 4 Features
    4. Course editor and resources overview
  2. Chapter 2 : Getting Started with Bootstrap
    1. Setup Bootstrap on your computer
    2. Try out Bootstrap adding classes
    3. Bootstrap Containers to Hold Elements
    4. Media sizes in Bootstrap
  3. Chapter 3 : Bootstraps grid
    1. Bootstrap Grid columns
    2. Bootstrap Column Auto Sizing
    3. Grid Column Order and spacing
    4. nested rows within rows
  4. Chapter 4 : Bootstrap Rapid Design
    1. standout text typography
    2. List group items
    3. Bootstrap responsive images
    4. Bootstrap JumboTron
    5. Badges in Bootstrap
  5. Chapter 5 : Bootstrap Buttons
    1. Buttons in Bootstrap
    2. Bootstrap Button Groups
    3. Button Radio Buttons and check boxes
  6. Chapter 6 : Bootstrap Common Components and utilities
    1. Bootstrap Progress bar
    2. Font and Background color
    3. Bootstrap Utility Classes
  7. Chapter 7 : Bootstrap structure
    1. Bootstrap tables
    2. Bootstrap Cards
    3. Card Structure and grouping
    4. Bootstrap Forms Grid
    5. Input Group Addons
    6. Form Select and File Input
    7. Drop down menu Bootstrap
  8. Chapter 8 : Navigation Bootstrap component
    1. Bootstrap Nav Component
    2. Bootstrap NavBar Responsive
    3. Navbar options Bootstrap
  9. Chapter 9 : Bootstrap interactive components
    1. Bootstrap Alerts
    2. Popover and Tooltip
    3. Collapse and show elements
    4. Bootstrap Modals
    5. Bootstrap Image Carousel
  10. Chapter 10 : Conclusion
    1. Bootstrap conclusion
    2. Section Overview Website 1
  11. Chapter 11 : Rapid Web development create a quick website
    1. Section Preview Website 2
    2. Build a Default Bootstrap template
    3. Build responsive navbar
    4. Responsive NavBar Bootstrap 4
    5. Full Height Section
    6. Build section
    7. Bootstrap Buttons Section
    8. Bootstrap 4 Cards in Action
    9. Bootstrap 4 Forms
    10. Add new section with background image
    11. Footer Styling Bootstrap 4
    12. Bootstrap ScrollSpy
    13. Bonus jQuery Animate Method
    14. Website Build Overview
  12. Chapter 12 : Multiple Page Image header Bootstrap 4 website
    1. Section Preview Website 3
    2. Project Introduction
    3. Create Bootstrap template
    4. Design Website Structure
    5. Setup NavBar Structure
    6. Create a Responsive Navbar Bootstrap 4
    7. Build image Background Section
    8. Bootstrap 4 Footer Structure
    9. Adding Font Awesome Icons
    10. Design Home Page
    11. Build Home Page
    12. Design Planning About Page
    13. Bootstrap List and Grid about Page
    14. Plan and Design Services Page
    15. Services Page using Cards
    16. Setup Contact Page Design
    17. Build Contact Form Bootstrap 4
    18. Multiple Page Bootstrap 4 Website review
  13. Chapter 13 : Build Multiple Page Website from scratch portfolio site
    1. Section Preview Website 4
    2. Project Introduction
    3. Quick Bootstrap 4 Setup
    4. Build Bootstrap Page Structure
    5. Build Bootstrap Responsive NavBar
    6. Build Footer Structure
    7. Build Footer at Font Awesome
    8. Complete WebPage Layout
    9. Design Index Page Layout
    10. Setup Bootstrap 4 Grid
    11. Home Page Carousel
    12. Add Call to Action Section
    13. Bootstrap 4 Cards
    14. Plan about Page Design
    15. Collapse Elements Build about Page
    16. Plan and Design Portfolio Page
    17. Bootstrap Cards Portfolio Page
    18. Plan Contact Page
    19. Build Contact Form
    20. Webpage overview and Review
  14. Chapter 14 : Bootstrap Parallax Style Single Page Website
    1. Section Preview Website 5
    2. Basic Bootstrap 4 Template Creation
    3. Create Bootstrap NavBar
    4. Header Section
    5. Build another Section
    6. Add About Me Section
    7. Bootstrap Cards and Grid
    8. Create a contact form
    9. Add a Footer
    10. Bonus animate with jQuery
    11. Project Overview

Product information

  • Title: Bootstrap 4 for Beginners - Build 5 Websites from Scratch
  • Author(s): Laurence Svekis
  • Release date: September 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789808179