Bootstrap: The Ultimate Guide

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

If you want to build websites, understanding Bootstrap will save you a lot of time and effort. Bootstrap is a user-friendly CSS framework that allows developers to create mobile-friendly and responsive websites. Bootstrap is the most widely used framework for creating mobile-first, responsive websites. It fixes a number of issues that we experienced previously, including cross-browser compatibility. Today, webpages are optimized for all browsers (Internet Explorer, Firefox, and Chrome, to name but a few) and screen sizes (desktop, tablets, phablets, and phones).

Regardless of project size, Bootstrap provides a solid foundation for any website. It includes Reboot, which is based on Normalize.css and aids with the smoothing out of browser disparities for various page elements. Bootstrap also has fantastic typography. Checkboxes, radio buttons, choose choices, and other basic HTML form elements have been restyled to give them a more modern look.

Bootstrap’s scope extends beyond online app design to include devices, allowing for a more seamless user experience. CSS, reusable segments, and JavaScript portions are some of its key characteristics. It has a much clearer design, JavaScript tools, and CSS, among many other capabilities that front-end developers employ. In short, when it comes to UI, the scope is enormous.

Key Features:

• A step-by-step approach to problem-solving and skill development

• A quick run-through of the basic concepts, in the form of a “Crash Course”

• An advanced, hands-on core concepts, with a focus on real-world problems

• An industry-level coding paradigm, practice-oriented explanatory approach

• A special emphasis on writing clean and optimized code, with additional chapters focused on coding methodology

Author(s): Sufyan bin Uzayr
Publisher: CRC Press
Year: 2022

Language: English
Pages: 409
City: Boca Raton

Cover
Half Title
Title Page
Copyright Page
Table of Contents
Acknowledgments
About the Author
Chapter 1 Crash Course in Bootstrap
In This Chapter
Introduction to Bootstrap
History of Bootstrap
Versions of Bootstrap
Bootstrap 1
Bootstrap 2
Bootstrap 3
Bootstrap 4
Bootstrap 5
What Can You Do with Bootstrap?
Advantages of Bootstrap
Disadvantages of Bootstrap
Basic Concepts
Containers
Sizing
Code Example
Colors in Bootstrap
Adding Background Color and Borders
Code Example
Adding Padding and Margin
Property
Sides
Size
Code Example
Grid System
Code Example
Code Example
Code Example
Getting Started with Bootstrap
Setting Up
How to Download Bootstrap Using a Package Manager
Downloading Bootstrap Using npm
Downloading Bootstrap Using Yarn
Downloading Bootstrap Using Composer
How to Download Bootstrap Using a CDN
Chapter Summary
Chapter 2 The Bootstrap Framework
In This Chapter
Getting Started with Bootstrap
How to Download Bootstrap Using Package Manager
Downloading Bootstrap Using npm
Downloading Bootstrap Using a Cable
Download Bootstrap Using Composer
How to Download Bootstrap Using CDN
What Is CDN?
Bootstrap CDN Link and Scripts
For CSS
For JavaScript
For Jquery Library
For Popper​.​js
How to Use Bootstrap CDN
Bootstrap Template
Is Popper​.​js Required for Bootstrap 4?
Responsive Meta Tag
History
Bootstrap 2
Bootstrap 3
Bootstrap 4
Bootstrap 5
Features
Create a Home Page with Bootstrap
1. Add HTML5 Document Type
2. Bootstrap 3 Is Advanced
Basic Bootstrap Pages
Bootstrap Containers
Bootstrap Grid System
Grid Classes
Basic Structure of a Bootstrap Grid
Explanation
Code Example
Code Example (Extra-small Grid)
Code Example (Small Grid)
Code Example (Medium Grid)
Code Example (Small and Medium Grid Combined)
Code Example (Large Grid)
Code Example (Extra-large Grid)
How the Grid Works
Three Equal Columns
Two Unequal Columns
Flexbox
Flexbox Properties in CSS
Display
Syntax
Flexbox Properties in Bootstrap
Flex-direction in CSS
Syntax
Flex-direction in Bootstrap
Flexbox Features
Flex-wrap in CSS
Syntax
Flex-wrap in Bootstrap
Flex-flow
Syntax
Justify-content in CSS
Syntax
Positional Alignment
Order
Justify-Content in Bootstrap
Align Self
Align Items
Grow and Shrink
Fill
Responsive Breakpoints
Z-index
Components in Bootstrap
Bootstrap Alerts
Alert Links
Bootstrap Badges
Bootstrap Jumbotron
Full-width Jumbotron
Bootstrap Buttons
Button Sizes
Block-level Buttons
Active/disabled Buttons
Spinner Buttons
Colored Spinners
Button Tags
Outline Buttons
Dropdowns
Navbar
How It Works
Supported Content
Utilities
Border
Chapter Summary
Chapter 3 Designing Templates
In This Chapter
Creating a Blog Template
Code
Navbar
Code
Code
Code
Code
Code
Code
Code
Code
Code
Code
Home Page
Code
Code
Code
Code
Code
Code
Code
Newsletter
Code
Code
Code
Code
Code
Code
Code
Code
Blog Section
Code
Code
Code
Code
Code
Code
Code
Code
Blog Post 1
Code
Blog Post 2
Code
Blog Post 3
Code
Code
Some Content
Code
Code
Code
About Section
Code
Code
Code
Code
Code
Contact Section
Code
Code
Code
Code
Footer
Code
Creating a Portfolio Template
Code
Code
Navbar
Code
Home Section
Code
About Section
Code
Portfolio Section
Code
Contact Section
Code
Footer Section
Code
Mobile-Friendly Design
Types of Mobile-friendly Design
Responsive Design
Advantages
Disadvantages
Adaptive Design
Advantages
Disadvantages
Chapter Summary
Chapter 4 Creating Admin Panels
In This Chapter
Creating an Admin Panel in Bootstrap
Code
Code
Navbar
Horizontal Navbar
Code
Vertical Navbar
Code
Code
Code
Main Section
Code
Code
Code
What We Learned
Backend UI
Popular Front-end Frameworks and Libraries
Popular Back-end Programming Languages
Popular Back-end Frameworks
Creating a Backend UI in Bootstrap
Code
Code
Code
Navbar
Code
Sidebar
Code
Code
Code
Breadcrumb
Code
Main Content
Code
Code
Code
Code
Code
Code
Code
Code
Code
Footer
Code
What We Learned
Additional Considerations and UX
Qualitative versus Quantitative Research
Attitudinal versus Behavioral Research
Generative versus Evaluation Research
Chapter Summary
Chapter 5 Bootstrap and JavaScript
In This Chapter
Introduction to JavaScript
What Is JavaScript Used for?
How Does JavaScript Work?
Attributes
Syntax
Global Attributes
Syntax
Global Event Attributes
All Attributes in Bootstrap
For modals
For dropdowns
ScrollSpy
Toggleable tabs
Tooltip
Popovers
Alert messages
Buttons
Collapse
Carousel
Affix
Alerts
Carousel
Chapter Summary
Chapter 6 Code Optimization
In This Chapter
What Is Code Optimization?
Goals of Code Optimization
Categories of Optimization
Code Optimization Techniques
Chapter Summary
Chapter 7 Integrations and API
In This Chapter
Creating an HTTP Client
Working with APIs in Bootstrap
Utility API in Bootstrap
Integrating Bootstrap with Jekyll
Integrating with ASP.NET
Chapter Summary
Chapter 8 Cheat Sheet 1
In This Chapter
What Is Bootstrap?
Why Choose Bootstrap?
Features of Bootstrap
Bootstrap Cheat Sheet
Initial Setup (Using CDN)
CSS
Popper
JavaScript
Bundle (Popper + JavaScript)
Bootstrap Icons
Initial Setup (Using npm)
Bootstrap
Bootstrap Icons
Bootstrap Screen Sizing
Bootstrap Grid System
Typography
Utility Classes
Utility: Colors
Utility: Borders
Utility: Flex
Utility: Display
Utility: Misc
Utility: Position
Utility: Spacing
Utility: Text
Chapter 9 Cheat Sheet 2
Utility: Opacity
Bootstrap Key Components
Alerts
Badges
Breadcrumb
Button
Button Plugin
Button Group
Cards
Carousel
Collapse
Accordion
Dropdowns
Chapter 10 Cheat Sheet 3
Code Snippets
Images
Figures
Tables
Input Group
Forms
Floating Labels
Form Layout
Form Validation
List Group
Modal
Navbar
Navs, Tabs, Pills
Offcanvas Start
Placeholders
Pagination
Scrollspy
Chapter 11 Cheat Sheet 4
Progress
Popovers
Toasts
Spinners
Tooltips
Helpers
Chapter Summary
Bibliography
Index